이 포토샵 웹 디자인 튜토리얼에서,우리는 포토샵에서 스매싱,깨끗하고 전문적인 웹 사이트 레이아웃을 디자인하는 것입니다. 이 튜토리얼에서 우리가하고있는 레이아웃은 개인 또는 기업 웹 사이트 디자인으로 사용할 수 있습니다. 이 디자인은 매우 사용하기 쉬운,그래서 당신의 위치의 명망을 위해 중대해야 한다.
업데이트: 이것은 포토샵에서 레이아웃을 만드는 방법을 가르 칠 것입니다 두 부분으로 시리즈의 첫 번째 부분입니다,다음 표준 준수 웹 디자인으로 변환하는 방법.
“깨끗하고 전문적인 웹 디자인”시리즈
- 1 부:포토샵에서 깨끗하고 전문적인 웹 디자인 만들기
- 2 부:깨끗하고 전문적인 웹 디자인 코딩
최종 미리보기
우리는이 튜토리얼에서 만들 수 있습니다 레이아웃을 살펴 보자. 당신은 아래 이미지의 최종 미리보기를 참조하거나 전체 크기 버전을 보려면 여기를 클릭 할 수 있습니다. 1 다음 이미지의 설정을 사용하여 포토샵에서 새 문서를 만듭니다.
단위 및 눈금자 설정
2 웹 디자인의 표준 고정 장치인 픽셀 단위로 작업하고 있는지 확인합니다.단위&눈금자를 클릭하고 아래 그림과 같이 모든 것이 설정되어 있는지 확인합니다. 
가이드 추가 콘텐츠 영역 지정
3 보기>눈금자에서 포토샵 눈금자를 활성화합니다.이 경우 눈금자의 가시성을 토글 할 수 있습니다.
또한>정보 창에서 정보 패널을 엽니다.
정보 패널은 선택한 도구에 따라 유용한 정보를 제공합니다.
“미디엄”을 눌러 직사각형 선택 윤곽 도구를 선택하고 캔버스의 왼쪽 모서리에서 120 픽셀 너비의 상자를 만듭니다. 당신은 선택을하는 동안 정보 패널로보고 크기를 조정할 수 있습니다.
이제 왼쪽 눈금자를 클릭하고 아래 이미지와 같이 선택 윤곽 선택의 오른쪽으로 가이드를 드래그합니다. 
4 이 선택을 캔버스의 오른쪽 가장자리로 이동합니다. 선택 영역의 왼쪽에 다른 안내선을 할당합니다.
이제 캔버스는 다음과 같습니다:
로고 만들기
5 이제 우리는 우리의 웹 사이트에 대한 로고를 만들 것입니다.
로고는 매우 간단 할 것이고 색상 그라디언트 효과를 가질 것입니다. 새 그룹(레이어>새>그룹)을 만들고 이름을”로고”로 지정합니다.
6 수평 유형 도구를 선택(티)및 유형”스매싱”(또는 웹 사이트의 이름)대문자로.
7 그런 다음 문자 패널에서 글꼴을 굴림,스타일을 굵게,크기를 42 로 설정합니다. 또한 앤티 앨리어싱 방법 옵션을 선명하게 설정하고 색상#101112 를 사용하십시오.
유형 도구가 활성 도구인 경우 옵션 표시줄에서 이러한 옵션을 설정할 수도 있습니다. 8 더블 클릭하여 레이어 스타일 대화 상자를 엽니다. 그라디언트 오버레이를 선택하고 그라디언트 편집기를 클릭 한 다음 아래 그림과 같이 설정을 사용하십시오.
9″스매싱”유형 레이어를 맨 위로부터 35 픽셀,왼쪽 가이드에서 0 픽셀 거리에 놓습니다. 이동 도구(브이)와 화살표 키를 사용하여이 작업을 정확하게 수행 할 수 있습니다. 이 유형의 레이어를 복제하십시오(레이어>레이어 복제).
“스매싱”단어 바로 옆에 복제 된 레이어를 이동하고 텍스트를”디진”으로 편집합니다. 6,7,8 단계를 반복하지만 다른 그라디언트 색상을 사용하십시오(왼쪽 색상 중지:#27625,오른쪽 색상 중지:#27).
10 가로 유형 도구를 선택하고 다음 설정으로 로고 아래에 태그 라인을 추가합니다. 
11 최종 로고는 아래 이미지와 같아야 합니다.
가이드를 활성화/비활성화하려면>보기>그리드 표시로 이동하거나 바로 가기를 사용하십시오. ; 
탐색 모음 만들기
12 새 그룹을 만들고 이름을”탐색”으로 지정하려면”로고”그룹 위에 있어야 합니다. 캔버스의 위쪽 가장자리 아래 150 픽셀의 위쪽 눈금자에서 안내선을 끕니다. 사각형 도구를 선택하고 캔버스 전체에 4 픽셀 높이의 가로선을 그립니다.
13 이 수평선에서 12 픽셀 높이의 탐색 링크를 추가하고 왼쪽 가이드의 오른쪽에 20 픽셀을 추가합니다.
둥근 사각형 도구를 선택하고 72 픽셀 크기가 35 픽셀 인 상자를 그립니다. 이 레이어를 텍스트 링크 아래로 이동하고 레이어 이름을”호버”로 지정하십시오.
점 변환 도구를 사용하여 아래쪽 둥근 모서리를 곧게 폅니다. 고르지 않은 가장자리의 측면을 아래쪽으로 8 픽셀 여백으로 이동하여 가장자리가 하단의 다른 내부 가장자리와 같도록하십시오.
“가리키기”레이어를 두 번 클릭하여 레이어 스타일 대화 상자를 열고 그라디언트 색상을 추가합니다. 수평 유형 도구를 선택(티),텍스트를 선택,”홈”에 색상을 변경#에프프프프(화이트). 
“문의하기”섹션 만들기
14 다음으로 우리는 디자인의 오른쪽 상단(로고의 정반대)에”문의하기”섹션을 만들 것입니다.
이 전화 아이콘을 다운로드하여 오른쪽 가이드 근처에 놓습니다. 이 레이어의 이름을”전화 아이콘”으로 지정하십시오. 수평 유형 도구를 선택합니다(티).
글꼴 굴림을 사용하여 전화 아이콘 왼쪽에 전화 번호를 추가하고 크기는 20 톤으로 설정하고 색상은#292929 입니다.
글꼴 굴림,굵게,11 의 크기와#595959 의 색상을 사용 하 여 전화 번호 아래에 몇 가지 관련 텍스트를 추가 합니다. 
헤더 만들기
15 이제 우리는 헤더 섹션을 만들 것입니다. 새 그룹을 만들고 이름을”헤더”로 지정하십시오.
16 사각형 도구를 선택하고 1200 픽셀 크기가 440 픽셀 인 사각형 모양을 만듭니다.
이 사각형을 탐색 모음 아래 1 픽셀 거리에 놓고 이 레이어의 이름을”헤더 배경”으로 지정합니다. “헤더 배경”레이어를 두 번 클릭하고 그라디언트 오버레이 레이어 스타일을 선택한 다음 그라디언트 편집기에서이 두 가지 색상을 갖습니다(왼쪽 색상 중지:#2,오른쪽 색상 중지:#7).
사각형 위치 및 색상 세부 사항은 아래 이미지를 참조하십시오. 17 사각형 도구에서 960 픽셀 크기가 360 픽셀 인 다른 사각형을 만듭니다.
이 사각형을”헤더 배경”레이어의 상단에서 40 픽셀의 거리에 놓고 왼쪽 가이드에서 0 픽셀의 거리에 놓습니다. 이 레이어의 이름을”헤더 컨테이너”로 지정하십시오. 우리가 디자인을 가진 지금까지 한 무슨을의 밑에 시사.
“추천 프로젝트”섹션 만들기
18 다음으로 추천 프로젝트 섹션을 만듭니다. 머리글 그룹 안에 새 그룹을 만들고 이름을 지정합니다. 사각형 도구(유)를 선택하고 상단 및 헤더 컨테이너의 왼쪽에서 10 픽셀의 거리에서 340 픽셀로 630 픽셀의 크기와 사각형을 만듭니다.이 레이어의 색상을#000000 으로 지정하고 이름을 지정합니다. 
19 포토샵에서 이미지를 열어 추천 프로젝트로 배치합니다. 이 작업을 수행하려면 다음 단계를 수행하십시오.
우리의 웹 디자인으로 돌아 오십시오.
“컨테이너”레이어 위에 새 레이어를 만들고 편집>붙여 넣기로 이동하여 추천 프로젝트 이미지에 붙여 넣습니다. 이 레이어의 이름을”이미지”로 바꿉니다. 마우스 오른쪽 버튼을 클릭하고 클리핑 마스크 만들기를 선택합니다.
이제 이미지는 사각형 내부에서만 볼 수 있습니다.
추천 프로젝트 이미지가 아래 그림과 비슷하도록 조정합니다. 20 편집>변환>배율로 이동합니다. 옵션 막대에서 회전 상자를 클릭하고-4 를 입력하고 각도를 조정하기 위해 두 번 입력을 누릅니다.
같은 레이어에 머무르고 이 레이어의 혼합 모드로 광도를 선택합니다. 
21 다음으로 추천 프로젝트 이미지의 제목과 설명 표시줄을 만듭니다. 사각형 도구(유)를 선택하고 색상#161718 을 사용하여 90 픽셀로 630 픽셀의 크기와 사각형 모양을 만들 수 있습니다.
이 레이어의 불투명도를 90%로 변경하고 이름을”제목 배경”으로 지정합니다. 아래 이미지와 같이 이 사각형을 배치합니다. 
22 색상#9 를 사용하여 630 픽셀 크기의 다른 사각형을 1 픽셀로 만들고 이름을”제목 가로줄”로 지정합니다.
이 사각형을”제목 배경”레이어의 내용 위쪽 가장자리에 놓습니다.
23 제목과 설명에 대해 다음 설정을 사용하여 21 단계에서 만든 사각형 안에 제목과 설명을 추가합니다.
제목:
- 이 옵션을 선택하면,이 옵션을 선택하면,이 옵션을 선택하면,이 옵션을 선택하면,이 옵션을 선택하면,이 옵션을 선택하면,이 옵션을 선택하면,이 옵션을 선택하면,이 옵션을 선택하면,이 옵션을 선택하면,이 옵션을 선택하면,이 옵션을 선택하면,이 옵션을 선택하면,이 옵션을 선택하면,이 옵션을 선택하면,이 옵션을 선택하면,이 옵션을 선택하면,이 옵션을 선택하면,이 옵션을 선택하면,이 옵션을 선택하면,이 옵션을 선택하면,이 옵션을 선택하면,이 옵션을 선택하면,:
- 이 방법은 다음과 같은 방법으로 사용할 수 있습니다.: 없음
“빠른 견적”섹션 만들기
24 헤더 그룹 내에 다른 그룹을 만들고 이름을”빠른 견적”으로 지정합니다. 사각형 도구(유)를 선택하고 340 픽셀로 300 픽셀의 크기를 가진 사각형을 만들 수 있습니다. 이 사각형을 추천 프로젝트 섹션의 오른쪽에있는 10 픽셀 거리에 놓고 이름을 지정하십시오.
25 이전 단계에서 만든 다른 레이어에서 레이어 스타일을 복사합니다.
“탐색”그룹 안으로 들어가서”호버”레이어를 마우스 오른쪽 버튼으로 클릭하고 레이어 스타일 복사를 선택한 다음”큐큐 컨테이너”레이어로 돌아가서 마우스 오른쪽 버튼을 클릭하고 레이어 스타일 붙여 넣기를 선택하십시오. 우리는 지금 우리의”큐큐 컨테이너”에 대한”호버”레이어의 동일한 레이어 스타일을 가지고있다.
26 수평 유형 도구를 선택합니다(티).
포함 상자의 상단 및 왼쪽 가장자리에서 20 픽셀 거리에”큐큐 컨테이너”안에”빠른 견적”을 작성하십시오. 글꼴 패밀리를 흰색으로 설정하고 앤티 앨리어싱 방법 옵션을 샤프로 설정합니다. 우리는 둥근 사각형 도구를 사용하려고(유)세 개의 양식 필드를 만들 수 있습니다.
둥근 사각형 도구를 선택하고 반지름을 3 픽셀로 설정합니다. 그런 다음 흰색 색상을 사용하여 크기가 260 픽셀 인 35 픽셀로 두 개의 둥근 직사각형을 만듭니다. 그런 다음 모양 레이어의 이름을 각각”필드 1″및”필드 2″로 지정하십시오.
흰색을 사용하여 260 픽셀 크기가 75 픽셀 인 세 번째 둥근 사각형을 만들고 이름을”필드 3″으로 지정합니다. 가로 유형 도구를 선택하고 각 양식 필드에 대한 레이블을 만듭니다. 1731>빠른 견적 작성 섹션27 둥근 사각형 도구를 선택하고 80 픽셀의 상자를 35 픽셀로 만들고 이름을 지정합니다.
28 레이어를 두 번 클릭하여 레이어 스타일 대화상자 창을 열고 그라디언트 오버레이 확인란을 왼쪽에서 선택합니다.
그라디언트 편집기를 클릭하고 아래와 같이 그라디언트의 색상을 변경합니다.
29 수평 유형 도구를 선택(티)및 유형”제출”굴림 글꼴을 사용하여,스타일 굵게 및 크기 13 피트. 레이어 패널에서 두 레이어를 모두 선택합니다.30[도구]패널에서[이동 도구]를 선택하고[옵션]막대에서[수직 중심 정렬]및[수평 중심 정렬]을 클릭합니다.
(또는 레이어>정렬>수직 중심 및 레이어>정렬>수평 중심)으로 이동하여 동일한 결과를 얻을 수 있습니다.
메인 컨텐츠 영역 작성
31 새 그룹을 만들고 이름을”컨텐츠”로 지정합니다. 사각형 도구를 선택합니다.175 픽셀로 300 픽셀의 사각형을 만들고 이름을 지정합니다. 이 레이어를 머리글 아래에 30 픽셀을 놓고 왼쪽 안내선에서 0 픽셀을 놓습니다. 레이어를 두 번 클릭하고 다음 이미지의 설정을 사용합니다.
32 우리는 지금이 상자에 내용을 추가 할 것입니다. 수평 유형 도구를 선택(티)텍스트를 추가,”정보 스매싱진”. 가로 유형 도구를 사용하여”정보”단어를 선택한 다음 색상을#비 47825 로 변경하십시오.제목 아래에 약간의 설명과 링크 텍스트를 추가합니다. 제목,설명 및 링크 텍스트에 다음 옵션이 사용되었습니다.
(필요에 따라 이러한 옵션을 조정할 수 있습니다).
만들기:
에 대한 설명:
- 글꼴:굴림,스타일:보통,크기:12 티,앤티 앨리어싱 방법:없음,색상: #767676
링크 텍스트:
- 글꼴:굴림,스타일:굵게,크기:13 티,앤티 앨리어싱 방법:없음,색상:#252525,밑줄
33 이제 설명 옆에 사각형 상자를 추가 할 것입니다. 이 응용 프로그램은 당신에게 아름다운 욕실 꾸미기의 갤러리를 보여줍니다. 이 사각형을 직사각형(“씨 01”)의 왼쪽에서 10 픽셀 거리로 이동하십시오.
이 레이어의 이름을”테두리”로 지정합니다. 레이어를 두 번 클릭하여 레이어 스타일 대화상자 창을 열고 다음 설정으로 획 레이어 스타일을 추가합니다.
34 82 픽셀로 82 픽셀의 크기를 가진 다른 상자를 만들고”테두리”레이어의 중앙에 놓습니다. 이 레이어의 이름을”상자”로 지정하고이 사각형의 색상을 변경하십시오.
이 그룹의 모든 레이어(“콘텐츠”그룹)를 선택하고 레이어에서>새>그룹으로 이동하고이 새 그룹의 이름을”정보”로 바꿉니다.
참고: 안쪽 회색 정연한 상자는 이미지를 위한 장소 홀더이고 당신의 선택의 어떤 심상든지로 대체될 수 있습니다.35″정보”그룹을 복제하고(그룹을 마우스 오른쪽 버튼으로 클릭하고 중복 그룹을 선택)”서비스”이름을 지정합니다. “서비스”그룹을 마우스 오른쪽 버튼으로 클릭하고 그룹 복제를 다시 선택하고 이름을”포트폴리오”로 지정하십시오.
현재 세 그룹(“정보”,”서비스”및”포트폴리오”)이 있습니다. 아래 그림과 같이 마지막 그룹(“포트폴리오”)을 오른쪽 가이드로 이동하십시오.
36 레이어 패널에서 세 그룹을 모두 선택한 다음 레이어>>가로 가운데를 분배하여 균등하게 간격을 둡니다.다음 이미지의 전체 크기 이미지를 보려면 여기를 클릭하십시오.
37 아래와 같이”서비스”그룹(가운데)과”포트폴리오”그룹(오른쪽)의 제목을 변경합니다. (당신은 당신의 요구 사항에 따라 이러한 제목을 변경할 수 있습니다. 기본 콘텐츠 영역 만들기바닥글 만들기
38 새 그룹을 만들고 이름을”바닥글”로 지정합니다.
사각형 도구(유)를 선택 하 고 우리의 디자인 레이아웃의 하단에 100 픽셀로 1200 픽셀의 크기를 가진 사각형을 만듭니다. 이 레이어의 이름을”바닥 글 배경”으로 지정하십시오. “헤더 배경”레이어를 마우스 오른쪽 버튼으로 클릭하고 레이어 스타일 복사를 선택하여”헤더 배경”레이어와 동일한 그라디언트 오버레이 스타일을 사용하십시오.
바닥글 그룹으로 돌아가서”바닥글 배경”레이어를 마우스 오른쪽 단추로 클릭하고 레이어 스타일 붙여넣기를 선택합니다.
39 가로 형식 도구를 선택하고 왼쪽에 저작권 텍스트 및 바닥글 링크 텍스트를 추가합니다. 
40 우리는 오른쪽에 이메일 구독 섹션을 추가 할 예정입니다.
“바닥글”그룹 내에 새 그룹을 만들고 이름을”구독”합니다. 둥근 사각형 도구를 선택하고 85 픽셀의 사각형을 35 픽셀로 만듭니다. 이 레이어의 이름을”구독하기”로 지정하십시오.
41 양식 필드 및 레이블을 추가하기 위해 단계 26 을 반복합니다.
42 수평 유형 도구를 선택(티)및 유형”구독”굴림 글꼴을 사용하여,스타일은 굵게 설정 13 티트에서 크기.
두 레이어를 모두 선택합니다.
43 구독 버튼을 만들기 위해 28 단계를 반복합니다.44 둥근 사각형 도구를 선택하고 반지름을 3 픽셀로 설정합니다. 흰색을 사용하여 크기가 210 픽셀(35 픽셀)인 둥근 사각형을 만들고 이 모양 레이어의 이름을”이메일 필드”로 지정합니다. “이메일 필드”위에 텍스트 줄을 추가하십시오.
최종 결과
좋아,그게 다야 그리고 우리는 완료. 여기에 최종 결과가 있습니다.
전체 크기 레이아웃을 보려면 아래 이미지를 클릭하십시오. 내 튜토리얼과 함께 다음 주셔서 감사합니다. 난 당신이 모든 즐길이 튜토리얼에서 새로운 무언가를 배운 바랍니다.
친절하게 아래에 의견을 남겨 당신의 생각과 의견을 공유,나는 그들을 듣고 싶어요. 당신이 그들에게 도움이 될 수 있다고 생각한다면 당신은 또한 당신의 친구에게이 디자인 튜토리얼을 공유 할 수 있습니다!
소스 파일 다운로드
아래 링크에서 포토샵 파일을 우편 아카이브로 다운로드 할 수 있습니다.2018 년 11 월 1 일-2018 년 11 월 1 일-2018 년 11 월 1 일-2018 년 11 월 1 일-2018 년 11 월 1 일-2018 년 11 월 1 일)
요약
이 디자인을 사용하려는 경우 로드 시간을 줄이기 위해 이미지를 최적화해야 합니다. 간단하기,사용하기 편하기,사용하기 편하기 때문에 이것은 골프 코스를 위해 것 작은 위치를 위해 중대해야 한다 결정한다.
관련 내용
- 포토샵
- 클린 웹 코딩 클린 블로그 디자인을 만드는 방법 2.포토샵에서 0 스타일 웹 디자인
- 포토샵
저자 소개
와히드 아크 타르는 두바이,아랍 에미리트 연방에서 프리랜서 웹 디자이너입니다. 그는 영감을 얻기 위해 디지털 아트,그래픽 디자인,일러스트레이션,사진 및 타이포그래피의 다양한 창의적인 리소스를 선보이는 부스트 영감의 창시자이자 편집자입니다. 당신은 트위터 나 페이스 북을 통해 그를 도달 할 수 있습니다..