GIMP tutorial 10

완성모습

Step 1
780x1000의 새 이미지


Step2
바탕을 #ededed색으로 채운다.


Step 3
Header라는 이름의 새로운 레이어를 만든다.


Step 4
Rectangle select tool을 사용하여 넓이780px, 높이125px 만큼 드래그 한다.
이 때 Ruler에서 guides를 사용한다.


Step 5
선택된 영역을 채울 차례다.
Gradient tool과 FG to BG (RGB)옵션을 차례로 선택한다. 전경색은 000000, 배경색은 3a4146을 선택한다.


Step 6
위에서 아래로 수직 드래그 한다.



이러한 모습이다.



텍스트 로고로 반사 효과를 만들 것이다.


Step 7
30px 크기로 Gimp-tutorials.net을 입력 한다.



Step 8
레이어를 복제하고 logo 아래에 배치한다.
logo reflection layer라 이름 붙인다.


Step 9
flip tool을 사용해 방향을 바꾼다.



Step 10
logo reflection layer를 선택하고 Transparency box를 체크 한다.


Step 11
Gradient fill tool을 사용하고 'FG to transparency 옵션을 선택 한다.
전경색을 3a4146색으로 바꾼다.


Step12
로고가 반사된 부분까지 아래서 위로 드래그 한다.



Step 13
Top Navigation bar라는 새로운 레이어를 만든다.
rectangle selection tool을 사용하여 넓이780px, 높이20px만큼 드래그 한다.





Step 14
gradient fill에서 FG to BF (RGB) Gradient 옵션을 사용해 전경색 0276cf, 배경색82c9ff를 아래서 위로 적용 한다.





이제 Tab이라는 새로운 layer를 만든다.




Step 15
rectangle tool을 사용하여 105x8 크기를 그린다.
Ruler의 guidance을 이용한다.




Step 16
오른쪽 클릭 후, 탭에서 Select>rounded에서 Radius를 45%로 설정




Step 17
nav bar와 동일한 색을 적용해야 한다.
Gradient fill에서 전경색0276cf, 배경색82c9ff를 고른다.




Step 18
눈금자의 225px부분 부터 125xp까지 아래서 위로 드래그 한다.



이런 모습이다.



Step 19
Tabs을 3개 복제한 후, 이름을 정하고 간격을 준다.



Step 20
layer들을 묶는다.



Step 21
각 tab에  text를 추가 합니다.



이제 left bar를 만듭니다. 그것은 CSS기반 사이트에서 잘 작동하고 깔끔할 것입니다.


Step 22
새로운 Layer를 만들고 left menu bar라고 이름 짓는다.


Step 23
rectangle selection tool을 사용하여 200x950 크기를 그리고  #232323색으로 채운다.


Step 24
보기와 같이 정렬시키고 tabs과 text에 묶는다.



Step 25
이제 left menu bar를 분할하는 선을 만든다.
name이란 이름의 layer를 만든다.
화면을 확대하고 rectangle tool로 높이 1px와 menu넓이 만큼 그린 다음, 232222색으로 채운다.


Step 26
다른 선들을 그려 4e4c4c색으로 채운다.
200%로 확대된 모습



Step 26
7개의 lines layer로 복제하고 간격을 준다.



Step 27
gradient effect이라는 새로운 layer를 만들고  배경에 밝은 Gradient효과를 추가 한다.
205px의 사각형을 그려 아래부터 위로 전경색 #ededed 배경색 #ffffff을 채운다.



Step 28
새로운 layer를 만들고 사이트의 밑부분에 동일한 작업을 한다.
그러나 이번에는 위에서 아래로 적용 한다.



이제 메인 레이아웃 디자인은 끝났다. 몇가지 기본 컨텐츠를 추가 하려면 좋은 이미지가 필요하다.
필자가 좋아하는 100% 무료 이미지 사이트는 http://www.stockvault.net 이다.
비용을 지불하지 않아도 된다. 적당한 사진을 다운로드


이 사진을 사용



Step 29
다운로드 받은 이미지를 열고 Scale tool을 선택하고 1024x705크기로 바꾼다.
select tool로 569x179로 적당한 영역을 선택하고 CTRL+C하고나서 이번 작업 레이어에 CTRL+V로 붙여 넣기 한다.
아래 그림과 같이 헤더 아래 놓고 정렬



Step 30
왼쪽 메뉴에 text를 입력하고 정렬



Step 31
다시 몇가지 단락에 글을 추가하고 공간의 중앙에 정렬



Step 32
바닥글을 추가 한다. 보통 copywriter text나 extra nav links를 사용 한다.
여기서는 Gimp 마스코트를 사용 했다. gimp.org 와 gimp-tutorials.net에서 찾을 수 있다.





김프로 템플리트를 만들어 보았다.



text logo를 바꿔서 좋은 결과를 얻을 수 있다.

본문은 http://gimp-tutorials.net/websitetutorial의 내용을 번역 및 수정 하였습니다.