메뉴 건너뛰기

XE : Xpress Engine




웹디자인 강의

모자이크 타일 효과 내기

쌤플;;

후지산.. 눈덮힌게 멋지눼..

이쁘져? 이쁘져? ^o^ ♪
냠냠.. 그럼 강좌 시작함다.

① 준비해둔 이미지 Open

www.daj.ne.jp 에서 가져온 그림

준비해둔 이미지를 엽니다.
모자이크 효과를 줬을때를 염두에두고 색상과 형태의 구별이 쉬운 이미지를 고르도록 합시다.



② 이미지 수정하기

그림처럼만 하면 글자 없어진다. ㅇ_ㅇㆀ

에.. 오른쪽 아래에 있는 ⓒ www.daj.ne.jp 글자를 수정해서 지울겁니다.
음.. 잠시 설명을 하고 넘어가자면.. daj는 일본의 이미지 사이트로 웹에서 이미지를 팔고 있는 회사지요.
이곳의 이미지들은 상용으로 판매되는 것이지만.. 지금 제가 사용하는 이미지는 Preview용 저해상도 이미지 입니다.
판매되는 것은 고해상도의 이미지구요..

에.. 어쨌든 지웁니다.
도장툴을 사용해서 지울건데여. 먼저 툴박스에서 도장툴을 선택합니다.
그리고 적당한 크기의 부드러운 브러시를 선택하시구요.
그다음에 Alt를 누르고 ①번 지점을 클릭합니다. 그리고 ②번에서 ③번까지 드래그합니다.
그렇게 하면 ①번과 ②번 사이의 지점의 이미지가 복사되어 ②번과 ③번 사이로 들어갑니다.
이 방법을 사용하면 마치 글자만 지워진 것 같은 효과를 볼 수 있지요.
왼쪽의 그림에는 약간 글씨가 남은게 보이죠?
그렇지만.. 모자이크로 만들거기때문에.. 대충해도 괜찮아요.. ^^



③ 모자이크 효과 주기

모자이크 필터 대화상자

모자이크 효과 들어간 상태

모자이크 효과를 줍시다 ㅇ_ㅇa 냠냠.
간단하게 필터를 한번 딱 쓰면 되지요.
Filter > Pixelate > Mosaic 을 선택해서 모자이크 효과를 줍시다.
픽셀 크기는 적당하게 주시면 되구여. 저는 6을 줘 봤습니다.
효과를 주면 왼쪽아래처럼 바뀌게 됩니다.



④ 패턴무늬 만들기

6픽셀의 크기로 무늬를 그렸다.

새 레이어를 하나 만들구요..
적당하게 화면을 확대해서.. 아까 모자이크 효과에 주었던 크기와 같은 크기로..
저는 6을 줬으니까.. 6픽셀짜리로... 네모낳게 선택하구요..
연필툴로 검은색을 칠해서 왼쪽과 같은 무늬의 패턴을 만들었습니다.

패턴무늬가 있는 레이어만 보이게 해놓았다.

배경이 투명색이 되도록 다른 레이어들을 안보이게. 

그리고 패턴을 그린 레이어 외의 나머지 레이어의 눈아이콘을 클릭해서 보이지 않게 꺼줍니다. 그러면 왼쪽아래의 이미지처럼 보이게 되지요. 선택영역을 그림처럼 하셔야 하구요.
그 상태에서 Edit > Define Pattern 메뉴를 선택합니다.
겉으로는 아무런 변화가 없지만.. 선택영역의 부분이 패턴무늬로 지정 된겁니다.
지정 된 후에는 Del키를 눌러 레이어를 다시 깨끗하게 만들어 줍니다.
(혹시라도 나중에 무늬가 겹칠지 모르니... 확인사살 ㅇ_ㅇa)

※ 패턴을 그린 나머지의 레이어를 보이지 않게 하는 이유는 다른 레이어들의 색상이 패턴무늬로 지정 되지 않게 하기 위해서 입니다.
Define Pattern 명령은 레이어와 상관없이 보이는 그대로 패턴으로 만들기 때문이죠.



⑤ 패턴으로 칠하기

패턴을 칠하기위해 뜬 대화상자

이번에는 아까 만들었던 레이어에 패턴무늬를 채울 겁니다.
에.. Edit > Fill 을 선택하시구요.
대화상자가 나오면 왼쪽 그림과 같이 선택하시고 ok 하시면 패턴무늬로 레이어 전체가 칠해집니다.

※ 불투명도 값을 뒤에 레이어팔레트에서 조절 할겁니다.
그렇지만 미리 값을 주지 않는 이유는 이미지가 어떻게 변해가는지 보면서 값을 주기 위해서지요.
보지도 않고 적당한 수치값을 알 수는 없으니까요.
 

패턴무늬 들어간 상태

패턴 무늬가 보기 좋게 들어갔지요? ^-^



⑥ 보기좋게 레이어 투명도 조절 하기

빨간 동그라미 있는 부분이 불투명도 조절하는 부분이에여 ㅇ_ㅇa

패턴무늬가 보기좋게 흐려졌다.

왼쪽에 레이어팔레트 보이죠?
패턴무늬로 칠해진 레이어를 선택한후 레이어의 투명도값을 적당하게 바꿔줍니다.
레이어이펙트를 잘 써보셔도 좋겠죠. ㅇ_ㅇa

왼쪽 아래는 투명도 값을 20으로 바꿔준 이미지 입니다.
일단 이렇게 만들면 다 된 셈이죠.
이 상태의 이미지가 맘에 드시면 이대로 쓰시면 되구요.

조금 더 응용을 해서 타일처럼 보이도록 볼륨을 줘보죠.
원하시는분들만 계속 따라오세요. ^^ㆀ



⑦ 밝은 빛 효과로 타일 무늬 내기

반전 효과를 줄 레이어가 선택된 상태

흰색이 들어가서 타일처럼 보인다.

빛을 넣어주는건 간단합니다.
레이어 복사하는거 기억하시죠?
폰트이미지 테두리 만들기 ③번 에서 했었던...

패턴 무늬가 들어간 레이어를 복사해서 선택하구요.
Ctrl키를 누른채로 화살표방향키 →와 ↓를 한번씩 눌러줍니다.
그러면 레이어전체가 오른쪽,아래 방향으로 1픽셀 이동하죠.
그리고 Ctrl + I를 눌러줍니다.

Ctrl + I는 이미지의 색상을 반전 시켜주는 효과입니다.
원래 칠해진 색이 검은 색이었으니..
모두 흰색으로 바뀌었겠죠?



⑧ 마무리 - 이쁘게 다듬기

마무리는 각자 알아서...ㆀ 잘 합니다.
제 경우에는 레이어를 살린채로 그림 이미지 테두리를 지우개툴로 지워줬구요.
이미지테두리 지워준거 보다 조금 크게해서 패턴레이어의 테두리를 지워줌으로 완성 해봤습니다. ㅇ_ㅇv

완성작

번호 제목 글쓴이 날짜 조회 수
공지 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] Eccen 2004.12.15 48033
115 아주 간단하게 도트박스 만들기!! #1 [21] file w:)style 2002.03.16 7049
114 [포토샵6] 공중에서 본 하늘만들기?? [20] ♤재식이~ 2002.03.16 13037
113 [ico] 즐겨찾기 아이콘 만들기 [13] file yami 2002.03.16 9683
112 [퍼니페인트]볼록이 버튼 만들기 [4] funnyPSP 2002.03.15 6540
111 [잡담]포토샵할때 이것만은 알아두세요. [33] file ToonieZ 2002.03.14 8777
» 모자이크 타일 효과 내기 [19] Headvoy 2002.03.11 12286
109 [퍼니페인트]입체적인 봉 만들기 [5] funnyPSP 2002.03.10 4003
108 [퍼니페인트]키르님의 겨울연가 로고 만들기 - 페인트샵으로~ [6] funnyPSP 2002.03.09 6746
107 [퍼니페인트]키르님의 물결 만들기 - 페인트샵으로..;; [6] funnyPSP 2002.03.09 2860
106 [퍼니페인트]그림 천천히 이어 붙이기 효과(?) [3] funnyPSP 2002.03.09 6141
105 [키르강좌] 패턴이용하기 두번째(이상해요~;;) [6] 키르(SP) 2002.03.09 8027
104 [영원의강좌] 화려하고 믓쪄버리는 텍스쳐 만들기! [4] 황예진 2002.03.07 7590
103 [키르강좌] 물결모양만들기...^^ [6] 키르(SP) 2002.03.07 9463
102 [키르강좌] 겨울연가 로고만들기 [3] 키르(SP) 2002.03.06 11089
101 (FLASH) 제로보드 플래시로 만들기 (2) [12] file 야웅 2002.03.06 20287
100 [참조] 웹폰트 사용하기.. [2] mo2ni 2002.03.06 11049
99 [특보] 웹폰트 만들기.. [18] mo2ni 2002.03.06 10998
98 ☆>>포토샵<<☆+타야+의 초간단 염색하기강좌 [12] +타야+ 2002.03.06 9108
97 [키르강좌] 듀오톤이미지..^^ [4] 키르(SP) 2002.03.04 6102
96 [퍼니페인트]페인트샵에서 자판에 글씨 넣기 [6] funnyPSP 2002.03.03 3741