Photoshop CS6에서 깨끗하고 우아한 블로그 레이아웃을 디자인하십시오

이 튜토리얼에서는 다음과 같은 과정을 보여 드릴 것입니다. 심플하고 깨끗한 디자인의 블로그 만들기 최신 Photoshop을 사용합니다. 우리는 새로운 것을 사용할 것입니다. 캐릭터 스타일 과 단락 스타일 우리가 프로세스를 합리화하는 것을 돕기 위해.

이 자습서를 수행하려면 다음과 같은 자원이 필요합니다.

• Bernd Montag에서 무료 폰트 사용.
• 26 PSDfreemium의 반복 가능한 픽셀 패턴.
• Daniele Selvitella의 무료 소셜 미디어 아이콘.

• 데모

캔버스 준비하기

1 단계

이 디자인에서는 프레임 워크로 960g를 사용하려고합니다. 기본 페이지와 zip 파일에서 템플릿을 다운로드하고 Photoshop 파일을 검색하십시오. Photoshop에서 '12 열 격자 '파일 열기.

12 Col Grid 레이어의 눈 모양 아이콘을 클릭하여 숨 깁니다. 우리는 지금 그것을 필요로하지 않을 것이다..

2 단계

현재 캔버스 크기가 너무 작습니다. 딸깍 하는 소리 이미지> 캔버스 크기 (또는 Ctrl + Alt + C). 더 큰 크기를 추가하고 앵커 포인트를 가운데로 설정해야합니다..

3 단계

눈금자를 표시하려면 Ctrl + R 키를 누릅니다. 딸깍 하는 소리 보기> 새로 만들기 우리가 정확하게 설계하는 데 도움이되는 새로운 지침서 작성 가이드. 고르다 수직선 및 위치 : 185 픽셀 캔버스 왼쪽 상단에서 수직 가이드를 만들려면 185 픽셀.

4 단계

다른 수직 가이드를 그 위치에 그립니다. 150 픽셀, 1095 픽셀 과 1130 픽셀.

아래는 캔버스 내부의 최종 가이드입니다..

색상 테마 준비

5 단계

이 디자인에서는 Colorlouver의 멋진 색상 조합을 사용하려고합니다. Jpeg 파일로 색상 조합을 열려면 미리보기 링크를 클릭하십시오..

색상 조합을 저장하고 Photoshop 파일에 배치하십시오. 이미지를 캔버스 내부에 직접 배치함으로써 색상을 더 빠르고 쉽게 샘플링 할 수 있습니다..

배경 준비

6 단계

고르다 배경 층 레이어 패널 상단의 자물쇠 아이콘을 클릭하여 잠금을 해제합니다. 축소판을 두 번 클릭하여 색상을 변경하십시오..

두 번째 색상을 클릭하십시오., # 948371, 선택하려면.

7 단계

캔바스 위에 사각형 모양을 그립니다. 이것은 두 번째 배경이 될 것입니다..

8 단계

모양을 선택한 상태로 유지하십시오. 에서 옵션 막대, 열다 가득 따르다 색깔 상자를 클릭 한 다음 컬러 휠 아이콘. [색상 피커] 대화 상자가 열리면 첫 번째 색상을 클릭하여 선택합니다. 그것의 행정 색상 선택 없음.

9 단계

새 레이어를 만든 다음 직사각형 선택 윤곽 도구를 사용하여 위쪽 캔바스를 선택합니다. 그 (것)들을 활성화하십시오 그라디언트 도구 그것을 채우고 방사상의 구배 흰색에서 검은 색으로. 그 레이디 언트가 캔버스의 꼭대기 중앙에 있는지 확인하십시오..

그것의 변경 혼합 방법 에 화면 그것을 줄이십시오 불투명 에 37 %.

10 단계

새 레이어를 만들고 이름을 '그림자'로 지정하십시오..

그림과 같이 보조 배경의 아래쪽에 직사각형 선택 물을 그립니다. 딸깍 하는 소리 편집 : 채우기. 세트 용도 에 검은. 딸깍 하는 소리 승인 검은 색으로 선택을 채우기 위해.

11 단계

Gaussian Blur를 사용하여 부드럽게합니다. 딸깍 하는 소리 필터> 블러> 가우시안 블러.

12 단계

Alt 키를 누른 채로 커서를 놓습니다. 그림자 과 상단 배경 층. Alt 키를 놓지 않고 클릭하여 레이어를 클리핑 마스크로 변환. 클리핑 마스크로 변환하면 그림자가 위쪽 배경 안에 들어갑니다..

13 단계

그림자를 가져 오십시오. 불투명 에 50 % 미묘한 만들. 아래에서 100 % 배율로 결과를 볼 수 있습니다..

14 단계

이러한 레이어를 하나의 그룹에 넣는 것이 좋습니다. 이것을하기 위해, 모든 레이어 선택 Ctrl + G를 클릭하십시오..

머리글

15 단계

표시된 것처럼 위쪽 캔버스에 사각형을 그립니다..

16 단계

에서 옵션 막대, 세트 행정 ~에 색상 # af9f8e.

17 단계

그것의 가득 따르다 색상, 선택 선형 그라디언트 ...에서 # d0c4b9에서 # a89c91.

아래는 100 %보기의 결과입니다..

사이트 이름

18 단계

디자인의 왼쪽에 사이트의 이름을 추가하십시오. 아래 그림과 같이 배치를 관찰하십시오. 텍스트를 두 번 클릭하고 그림자. 글꼴의 경우 Sansation을 사용하십시오..

메뉴

19 단계

메뉴 막대의 다른면에 메뉴를 그립니다. 폰트 사용 14 포인트. 다시 한 번 게재 위치를 확인하십시오..

20 단계

활성 메뉴의 경우 글꼴 유형을 굵게 설정하십시오.

21 단계

활성화 다각형 도구 설정하다 사이드 에 삼. 삼각형 모양을 그립니다. 채우기 : # 3d3123 과 뇌졸중 : 없음. 더하다 레이어 스타일 > 그림자 제거.

22 단계

밑에 선을 추가하여 활성 메뉴를 강조해 보겠습니다. 그 (것)들을 활성화하십시오 선 도구 무게를 5 px. 고르다 # f76b6a 스트로크없이 채우기.

활성 메뉴 아래에 선을 놓고 메뉴 막대의 아래쪽에 1 픽셀 공간을 추가하십시오..

문자 스타일 사용하기

23 단계

문자 설정을 문자 스타일로 저장해 봅시다. 이 기능은 InDesign에서 단순화 된 버전의 문자 스타일입니다. 저장하려면 텍스트를 활성화 한 다음 '새 문자 스타일'아이콘을 클릭하십시오..

새 문자 스타일을 두 번 클릭하고 다음 설정을 사용하십시오..

24 단계

다른 메뉴를 선택하고 Character Style을 클릭하여 적용하십시오. 문자 스타일 옆에 더하기 기호가 있으면 해당 문자의 설정이 다른 것입니다. 설정을 무시하려면 원형 화살표 아이콘을 클릭하십시오..

25 단계

이전 단계를 반복하여 활성 메뉴에 대한 새로운 문자 스타일을 만듭니다..

26 단계

그래서, Character Styles 사용의 요지는 무엇입니까? 문자 스타일은 문자 설정을 중앙화하는 데 도움이됩니다. 문자 스타일을 편집하여 해당 스타일을 사용하는 모든 텍스트를 편집 할 수 있습니다. 아래 예를 참조하십시오. 문자 스타일 내에서 글꼴 유형을 편집하면 톱 메뉴 - 보통 Corbel에, 모든 정상적인 메뉴는 Corbel로 자동 변경됩니다..

27 단계

새 레이어를 만들어 메뉴 막대 아래 놓습니다. Ctrl 키를 누른 채로 메뉴 막대를 클릭하여 모양을 기반으로 새로운 선택을하십시오. 그것을 채우기 검은.

28 단계

Ctrl + D를 사용하여 선택 항목을 제거합니다. 가우스 흐림, 필터> 블러> 가우시안 블러.

슬라이더

29 단계

너비가 10 열인 직사각형을 그립니다 (아래 참조)..

그것의 채우기 색 고르다 # dfd1c2. 그것의 행정 고르다 # c8baac 크기가있는 10pt. 선 미리보기 옆에있는 작은 드롭 다운 화살표를 클릭하고 내부 정렬 선택됨.

30 단계

프레임 상단에 그림을 붙여 넣습니다. 그것을로 변환 클리핑 가면 Ctrl + Alt + G를 누르면 그림이 자동으로 슬라이더 프레임 내부로 이동합니다. 필요한 경우 프레임에 영향을주지 않고 그림을 이동하고 크기를 조정할 수 있습니다..

31 단계

같은 색상으로 슬라이더 뒤에 다른 직사각형 모양을 그립니다. 가장 바깥 쪽 가이드에 맞추십시오. 더하다 레이어 스타일> 패턴 오버레이 PSDfreemium의 픽셀 패턴을 사용합니다. 소리를 낮추십시오. 불투명 그 미묘한 만들기.

32 단계

모양 위에 직사각형 모양을 그립니다. 채우기 : # b3aca5 과 스트로크 없음. Ctrl + T를 누른 다음 45도 회전. 레이어 모양을로 변환 클리핑 가면.

33 단계

모양을 복제하고 크기를 조정하십시오. 그것의 변경 가득 따르다 더 어두운 색으로. 레이어 모양을로 변환 클리핑 가면.

34 단계

반대쪽에 다른 화살표를 그리려면 같은 단계를 반복하십시오..

35 단계

Ctrl 키를 누른 상태에서 슬라이드 프레임을 클릭하여 새 항목을 선택합니다. 새 레이어를 만들어 레이어로 변환합니다. 클리핑 가면. 선택 항목 채우기 검은.

36 단계

선택을 취소하십시오 (Ctrl + D). 부드럽게 하다 그것을 사용하여 가우스 흐림.

필요한 경우 그림자 불투명도를 줄일 수 있습니다..

37 단계

슬라이더의 모서리에 둥근 사각형을 그립니다. 채우기 # c8baac.

38 단계

모양 안에 원을 그립니다. 그것의 세트 행정 에 검은 크기 1 점 과 채우기 제거.

39 단계

선택 원 사용 경로 경로 선택 수단. Shift + Alt 키를 누른 채로 드래그하여 복제합니다..

더 많은 원을 그리려면이 단계를 반복하십시오..

40 단계

원 경로 중 하나를 선택하십시오. 새로운 레이어로 잘라내려면 Ctrl + Shift + J를 누르십시오..

41 단계

에서 옵션 막대, 그것을 제거하다 행정 그것의 변경 가득 따르다 ~에 방사상의 그라디언트에서 # e38989 - # bb5c5c. 더하다 레이어 스타일> 바깥 쪽 광선 과 그림자.

42 단계

슬라이더 아래에 타원형 선택 물을 그립니다. 새 레이어 만들기 및 채우기 검은.

43 단계

선택을 취소하십시오 (Ctrl + D). 그것을 사용하여 부드럽게 가우스 흐림.

낮은 배경

44 단계

하단 배경에 다른 사각형 모양을 그립니다. 같은 것을 사용하십시오. 가득 따르다 과 행정 슬라이더 모양의 색상.

언제나 그렇듯이, 그 배치에 매우 신중해야합니다. 캔버스의 모든 가이드를 다룰 수 있기를 바랍니다..

더하다 레이어 스타일> 패턴 오버레이.

아래는 100 % 배율의 결과입니다..

45 단계

사각형 마키 도구를 사용하여 윗면 영역을 선택하십시오..

46 단계

새 레이어를 만들어 모양 뒤에 배치합니다. 선택 항목 채우기 검은. Ctrl + T를 누르고 마우스 오른쪽 버튼을 클릭하여 선택하십시오. 원근법.

위쪽 모서리를 바깥쪽으로 드래그하십시오..

다시 마우스 오른쪽 버튼을 클릭하고 규모. 위쪽 핸들을 아래로 끕니다..

마우스 오른쪽 버튼을 클릭하고 선택하십시오. 경사. 좌우 세그먼트를 안쪽으로 드래그합니다..

그것을 사용하여 부드럽게 가우스 흐림.

음색을 낮추십시오. 불투명 에 20 %.

47 단계

배경 내부에 흰색 직사각형을 그립니다. 이것은 사이트의 주요 콘텐츠에 대한 배경 정보가 될 것입니다..

배경의 왼쪽, 오른쪽 및 위쪽에 10 픽셀의 공백을 추가합니다. 초기 단계에서 가이드를 작성 했으므로 간격을 쉽게 지정해야합니다. 더하다 레이어 스타일> 바깥 쪽 광선.

48 단계

도형의 위쪽에서 25 px의 새 안내선 추가.

섹션 제목

49 단계

페이지 섹션 제목과 설명에 새로운 문자 스타일 추가.

유형 도구를 사용하여 섹션 제목과 설명을 추가하십시오. 이전에 만든 스타일을 적용하십시오. 앞에서 만든 가이드의 도움으로 배경 상단에서 25 픽셀의 공간을 추가해야합니다..

50 단계

사이트 설명 아래에 5px 행을 그립니다. 입력 : # 938270 과 뇌졸중 : 없음.

블로그 게시물

51 단계

게시물 제목에 다른 문자 스타일 만들기.

52 단계

게시물 제목 추가 및 이전 문자 스타일 적용.

53 단계

제목 아래에 너비가 4 열인 직사각형 모양을 그립니다. 세트 화이트 그것의 가득 따르다 과 #bebebe 그것의 행정. 더하다 레이어 스타일> 획.

54 단계

모양 위에 이미지를 붙여 넣습니다. 클리핑 마스크로 변환 (Ctrl + Alt + G).

55 단계

다음으로 둥근 사각형을 그립니다. 채우기 : # 8e8380 과 뇌졸중 : 없음. 그것을로 변환 클리핑 가면.

56 단계

블로그 메타 데이터에 새로운 문자 스타일 만들기.

57 단계

도형 위에 메타 데이터 텍스트를 추가하고 이전에 만든 문자 스타일을 적용합니다..

58 단계

활성화 유형 도구를 클릭하고 드래그하여 텍스트 상자를 만듭니다. 너비를 4 열로 설정하십시오. 딸깍 하는 소리 유형> 붙여 넣기 Lorem Ipsum Photoshop에서 자동 생성 된 Lorem Ipsum으로 채우기.

59 단계

캐릭터 내용에 대해 새로운 단락 스타일을 만드십시오. 단락 스타일 패널에서 새 아이콘을 클릭하십시오..

단락 스타일을 두 번 클릭하고 다음 설정을 사용하십시오..

60 단계

이 스타일을 게시물 콘텐츠에 적용하십시오. 들여 쓰기 및 간격 설정을 시험해 볼 수도 있습니다.

웹 디자인을 위해, 하이픈 넣기를 비활성화하십시오.

61 단계

다음으로 둥근 사각형을 그립니다. 채우기 : # 8e8380 과 뇌졸중 : 없음. 더하다 레이어 스타일> 패턴 오버레이. 일관성을 위해 슬라이더와 동일한 패턴을 사용하십시오..

62 단계

단추 레이블을 추가하십시오. 캐릭터 스타일로 저장하는 것이 좋습니다. 이렇게하면 다른 버튼에도 쉽게 사용할 수 있습니다..

63 단계

이전 버튼은 정상 상태입니다. 그것을 복제하고 색상을 다음과 같이 변경합시다. # f76b6a. 또한 라벨 유형을 굵게 설정하십시오..

64 단계

게시물을 그룹에 배치 한 다음 Ctrl + J를 눌러 복제하십시오. 그룹을 복사하려면 Alt 키를 누른 상태에서 드래그하십시오..

동일한 단계를 반복하여 더 많은 게시물을 만드십시오. 각 게시물의 그림과 제목을 변경하는 것을 잊지 마십시오..

단계 65

복제 더 읽기 버튼을 누르고 라벨을 번호로 변경하십시오. 우리는 페이지 네비게이션을 위해 사용할 것입니다. 조건 중 하나를 단추로 설정하는 것을 잊지 마십시오..

66 단계 : 바닥 글

바닥 글 작업을 시작합시다. 위젯 제목 및 설명 추가.

67 단계

링크를 추가하고 그 아래에 1 픽셀 선을 그립니다. 세트 채우기 : 없음 과 뇌졸중 : # 8e8380.

68 단계

딸깍 하는 소리 기타 옵션 버튼을 눌러 선택 점선.

69 단계

위젯에 링크 추가.

70 단계

위젯 복제.

71 단계

또한 호버 조건을 추가해야합니다. 링크 중 하나를 굵게 설정.

해당 활성 링크 아래에 5 픽셀 라인을 추가하십시오. 색상을 다음과 같이 설정하십시오. # f76b6a. 일관성을 유지하기 위해이 링크의 모양은 메뉴 막대의 활성 메뉴와 유사합니다.

72 단계

아래쪽 영역에 다른 직사각형을 추가하십시오. 그것의 세트 가득 따르다 에 # 3d312삼.

꼬리말 정보

73 단계

바닥 글 정보를 사용하여 추가 유형 수단. 어둠을 내라. 그림자 배경에 대비를 추가하는 방법.

소셜 네트워크

74 단계

Daniele Selvitella의 소셜 미디어 아이콘을 추가하십시오. 더하다 레이어 스타일> 바깥 쪽 광선.

75 단계

소리내어 정상적인 아이콘으로 50 %. 호버 조건에 대해 불투명 ...에서 100 %.

76 단계

자유 손 모양의 커서 아이콘을 잡고 활성 또는 호버 링크 위에 가장 작은 손 모양 커서를 놓습니다..

최종 결과

이것이 우리의 최종 결과입니다. 최신 Photoshop 버전에는 웹 레이아웃을 디자인하는 데 흥미로운 기능이 있음을 알 수 있습니다. 문자 스타일 및 단락 스타일은 모든 웹 디자이너에게 중요한 개선점입니다..

• 데모
• 소스 다운로드