Photoshop 을 사용하여 아름다운 바닥글 템플릿 디자인 이 문서에서는 바닥글을 만드는 PS 자습서에 대해 설명합니다. 바닥 글 디자인은 계층적 느낌으로 그리드 공간 배경 텍스처로 장식되어 있어 매우 아름다운 바닥 글입니다.
웹 2.0 이 인터넷에 접속한 이후 바닥글이 그 어느 때보다 중요해지면서 매우 아름다운 바닥글 디자인이 많이 등장했다. 이 자습서에서는 Photoshop 에서 간단하고 매끄러운 웹 사이트 바닥글을 만드는 방법을 보여 드리겠습니다.
꼬릿말
이것은 우리가 만들고자 하는 바닥 글입니다. 원본 사진을 보려면 아래 스크린샷을 클릭하십시오.
단계 1
액체 머리글 및 바닥글과 마찬가지로 그라데이션은 일반적으로 웹 2.0 디자인 스타일의 표시입니다. 이 자습서에서는 3D 재질을 시뮬레이션하는 그라데이션 패키지 세트를 사용합니다. 너는 우수 판매상으로부터 이 소포를 받을 수 있다. 그라데이션 패키지를 다운로드하려면 여기를 클릭하십시오.
2 단계
Photoshop 에서 새 문서를 만듭니다. 크기가 1440 픽셀 X900 픽셀인 큰 파일을 직접 만들었습니다 (내 노트북 17 형 디스플레이에 적합). 물론, 브라우저 창이 드래그될 때의 상황을 잘 흉내낼 수는 있지만, 바닥글은 그렇게 크지는 말아야 한다. (알버트 아인슈타인, 자기관리명언)
배경 색상을 선택합니다. 내 예에서 배경색은 #b0b0b0 부터 #e 1e 1e 1 까지의 간단한 그라데이션입니다. Shift 키를 누른 채 위에서 아래로 수직 그래디언트를 만듭니다.
세 번째 단계
웹 디자인에서, 네가 어떤 레이아웃을 만들 것인지는 매우 중요하다. 즉, 스트리밍 레이아웃 (브라우저 크기에 맞는 레이아웃) 과 고정 너비 레이아웃 (웹 2.0 스타일 웹 사이트의 고정 너비 레이아웃은 종종 가운데) 중에서 선택할 수 있습니다. 우리의 바닥글은 크기가 760 픽셀 X420 픽셀인 고정 너비 레이아웃 바닥글이 될 것입니다. 이 크기는 800 픽셀 ×600 픽셀 화면에서도 올바르게 표시되도록 합니다.
그리드를 사용하여 다음과 같이 웹 사이트의 크기를 결정합니다. 1024 픽셀 x768 픽셀 화면 크기에 맞는 레이아웃을 만들려면 955 픽셀 X600 픽셀 영역에 격자를 정의합니다.
4 단계
우리의 바닥글은 고정된 폭을 가지고 있지만, 우리는 여전히 바닥글이 전체 페이지를 채울 수 있기를 바랍니다. 이를 위해, 우리는 내가 Photoshop 에서 만든 모조 금속 패턴을 사용할 것이다. 이 모드를 다운로드하려면 여기를 클릭하십시오. Photoshop 에서 이 그림을 열고 [편집] 을 선택하여 패턴을 정의한 다음 패턴의 이름을 지정합니다.
이제 폭 1440 픽셀, 높이 86 픽셀로 새 문서를 만듭니다. 채우기 편집 명령을 선택한 다음 방금 작성한 패턴을 선택합니다. 모두 선택 (Ctrl+A) 하고 그림 잘라내기를 첫 번째 문서의 맨 아래에 붙여넣으면 다음과 같은 결과를 얻을 수 있습니다.
5 단계
이제 1 단계에서 예쁜 그라데이션 패키지를 사용할 때입니다. 새 레이어를 만들고 사각형 선택 도구 (m) 를 사용하여 100% 파일 너비와 2 1 픽셀 높이의 선택 영역을 만듭니다. [그라디언트 도구] (g) 를 선택한 다음 아름다운 그라디언트를 선택합니다. 나는' 블랙 5 광택' 을 선택했다. 이제 Shift 키를 누른 채 사각형 선택 영역에 수직선을 그려 그래디언트를 만듭니다.
만든 모양을 4 단계에서 만든 모양 위로 이동합니다. 다음 그림과 비슷한 결과를 얻을 수 있습니다.
6 단계
이제 5 단계에서 만든 레이어에 그림자 효과를 추가해 보겠습니다.
7 단계
전경색을 #545557 로, 배경색을 # 1e2 1 1f 로 설정합니다. 4 단계에서 작성한 도면층 아래에 새 도면층을 작성합니다. 4 단계에서는 [선택 도구] 를 사용하여 레이어의 내용을 선택합니다. [그라디언트 도구] 를 선택하고 첫 번째 그라디언트 (전경색과 배경색의 조합) 를 선택한 다음 shift 키를 누른 채 선택 영역에 세로 그라디언트를 그립니다. 이제 4 단계에서 레이어를 선택하고 레이어 혼합 모드를 포지티브 오버레이로 변경합니다.
8 단계
모든 레이어 위에 새 레이어를 만들고 안내선 가운데에 #dfdfdf 색상의 둥근 사각형을 그립니다. 레이어를 마우스 오른쪽 단추로 클릭하고 혼합 옵션을 클릭하여 사각형에 대한 그림자 효과를 만듭니다. 그런 다음 효과 레이어를 마우스 오른쪽 버튼으로 클릭하고 레이어 만들기를 선택하면 그림자 효과가 별도의 레이어로 분리됩니다.
이제 직사각형 레이어와 그림자 레이어가 있습니다. 다음과 같은 효과를 얻을 때까지 그림자의 크기를 이동하고 변경합니다. Ctrl+T 를 눌러 변환 도구를 호출한 다음 마우스 오른쪽 버튼을 클릭하고 투시를 선택한 다음 맨 위에 있는 두 개의 핸들을 안쪽으로 드래그할 수 있습니다. 그림자를 아래로 이동하고 지우개 도구와 소프트 브러시를 사용하여 위쪽 가장자리의 그림자를 지울 수도 있습니다.
9 단계
마지막으로 텍스트, 저작권 정보 및 로고를 추가하여 디자인을 완료합니다.
단계 10
Html 파일에서 바닥글을 사용하려면 텍스트 (html 에 텍스트가 추가됨) 를 삭제하고 아래 표시된 배경 그림을 잘라내어 새 파일에 붙여넣기만 하면 됩니다. Photoshop 에서와 마찬가지로 이 패턴은 CSS 파일의 배경 그림 속성을 사용하여 구현됩니다. 그래서 우리는 작은 파일로 더 나은 결과를 얻기 위해 사진을 이렇게 작은 크기로 잘라야 한다.
바닥글을 잘라내려면 안내선에서 그림의 내용을 선택한 다음 잘라내어 새 파일에 붙여넣기만 하면 됩니다.
웹 및 장치로 저장 명령을 선택하여 두 그림을 모두 저장합니다. 그런 다음 JPG 형식과 적절한 품질을 선택합니다. JPG 형식과 PNG 형식은 모두 그림을 저장하는 좋은 형식이며 많은 색상을 저장할 수 있습니다. GIF 형식은 단순한 색상의 그림에 가장 적합합니다. 이런 다른 용법은 다른 알고리즘 때문이다.
최종 바닥 글
PS 를 사용하여 웹 템플릿을 만들려면 어떻게 해야 합니까? 사이즈 하나 설계한 후 직접 내용을 설계했으면 좋겠어요. 어떤 레이어도 병합하지 않도록 주의하십시오. 문자는 몇 가지 상용어로 대체할 수 있다.
결국 PSD 와 JPEG 형식으로 저장됩니다. 전자는 템플릿이고 후자는 온라인 미리 보기입니다!