보기 좋고 깨끗하고 기능적인 웹 레이아웃을 디자인하는 것은 웹 디자이너 생활의 필수적인 부분입니다. 이 튜토리얼에서는 처음부터 Photoshop에서 깔끔하고 전문적인 웹 레이아웃을 만들어 보겠습니다. 그 과정에서 디자인을 만드는 데 유용한 방법을 배울 수 있습니다. 그럼 시작해 보세요!
최종 결과 미리보기
전문적인 웹 레이아웃 만들기 Photoshop 튜토리얼
1단계: 모형
디자인을 시작하기 전에 요구 사항, 모양 및 기능을 계획해야 합니다. 그런 다음 이러한 아이디어를 레이아웃에 맞춰 시각적으로 실행해야 합니다. 모형과 와이어 프레임은 유연성이 뛰어난 레이아웃을 만드는 데 매우 유용합니다. 이는 모범 사례이며 업계에서 적극 권장됩니다.
아래는 그레이톤만 사용해서 조합해봤습니다. 그런 식으로 이 시점에서 장면에서 색상을 제거합니다. 그래야 전체적인 레이아웃에 집중하고 색상을 어지럽히는 일을 피할 수 있습니다. 이는 사물을 신속하게 변경하고 재배치할 수 있는 많은 자유를 제공합니다. 모형은 원하는 만큼 상세할 수 있습니다. 이를 위해 나는 아래의 것을 사용합니다. 레이아웃과 내용을 간단히 정의하면 됩니다.
2단계: 캔버스 설정
그래서 우리는 레이아웃에 대한 청사진을 갖게 되었습니다. 실제로 디자인을 종합해보자! 우리는 960 픽셀 너비의 레이아웃을 만들 것입니다. 1200x1500 크기의 새 문서를 만듭니다.
이는 960픽셀 너비의 레이아웃이므로 지침을 추가하여 작업 영역을 정의해야 합니다. 전체 문서를 선택하려면 Ctrl+A를 누르세요 .
선택 > 선택 변환으로 이동합니다. 선택 영역을 너비 960픽셀로 줄입니다. 이것이 레이아웃의 작업 영역입니다.
선택 항목에 안내선을 추가합니다.
나중에 추가할 내용과 테두리 사이에 패딩을 만들어야 합니다! 선택 항목이 다시 활성화된 상태에서 선택 변환을 선택합니다. 선택 영역의 너비를 920픽셀로 조정합니다. 이는 각 측면에 20픽셀의 패딩이 있어 총 40픽셀의 패딩이 있다는 의미입니다.
선택 항목에 안내선을 추가합니다.
3단계: 헤더 생성
레이아웃의 헤더를 만들어 봅시다! 높이가 465픽셀인 항목을 선택합니다.
먼저 선택 영역을 회색 값으로 채우고 나중에 레이어 스타일을 사용하여 색상과 그라디언트를 추가합니다. 시각적 계층 구조를 유지하려면 디자인 전반에 걸쳐 이를 따르십시오.
헤더에 그라데이션을 추가합니다. 레이어 축소판을 두 번 클릭합니다. 그라데이션 오버레이를 선택합니다. 아래의 2가지 색상 그라데이션을 만듭니다. 설정을 사용하세요.
다음과 같아야합니다.
다음으로 헤더에 강조 표시를 추가해야 합니다. Ctrl+Alt+Shift+N 을 눌러 새 레이어를 만듭니다 . 직경 600px의 부드러운 브러시를 선택합니다. 브러시 색상으로 #19535a를 선택합니다. 헤더 중앙을 한 번만 클릭하면 됩니다.
위에서 높이가 110픽셀인 항목을 선택합니다.
선택한 부분을 삭제하려면 삭제 키를 누르세요. 아래와 같습니다.
Ctrl+T 를 눌러 수직으로 축소하세요 .
하이라이트 지점이 헤더의 중앙에 완벽하게 위치하는지 확인해야 합니다. 레이어, 헤더 및 강조 표시를 선택하고 "V"를 눌러 이동 도구로 전환하세요. 옵션 패널에서 수평 중심 정렬 버튼을 선택합니다.
새 레이어를 만들고 연필 도구를 사용하여 #01bfd2 색상으로 1픽셀 하이라이트 선을 그립니다.
그라디언트 마스크를 사용하여 가장자리를 부드럽게 숨깁니다. 그라디언트 도구를 선택하고 옵션 패널에서 아래 그라디언트를 만듭니다.
위의 그라데이션을 적용합니다.
4단계: 텍스처 패턴 생성
이제 간단한 체크 패턴을 만들고 헤더에 적용해 보세요. 연필 도구를 선택하고 브러시 크기를 2픽셀로 설정한 다음 서로 닿는 두 개의 점을 추가합니다. 배경을 끄고 점을 선택하세요. 편집 > 패턴 정의를 선택합니다.
새 레이어를 만들고 하이라이트 레이어 아래에 배치합니다. 패턴을 적용할 영역을 선택하세요. Shift+F5를 눌러 채우기 대화 상자를 로드합니다. 방금 생성된 패턴을 선택합니다. 그리고 좋아요.
선택 영역이 패턴으로 채워집니다. 자세히 살펴보세요.
패턴을 머리글에 부드럽게 혼합합니다. 패턴 레이어에 레이어 마스크를 추가합니다. 부드러운 붓을 골라 크고 부드러운 붓으로 칠해줍니다. 브러시 색상으로 #ffffff를 선택합니다. 브러시 불투명도를 약 60%로 낮추고 칠합니다. 너무 강하다고 생각되면 레이어 불투명도를 개별적으로 조정하십시오.
잘 섞였습니다.
5단계: 로고타입 추가
배경이 거의 완성되었습니다. 이제 로고 유형을 추가하십시오. 유형을 추가하기 전에 로고 뒤에 있는 강조 표시를 추가하세요. #19535a로 부드러운 브러시를 선택하세요. 자리를 추가하세요.
유형을 추가합니다. 제가 사용한 폰트는 "Bebas" 입니다. 무료로 다운로드하세요.
로고에 미묘한 효과를 적용합니다.
6단계: 탐색
탐색 링크를 추가합니다.
탐색 버튼을 만듭니다. 직사각형 선택 윤곽 도구를 사용합니다. 어떤 색상이든 채울 수 있습니다. 그런 다음 채우기 불투명도를 0으로 낮춥니다.
레이어 축소판을 두 번 클릭하고 Gradient Overlay를 선택합니다. 다음 설정을 사용하세요.
7단계: 콘텐츠 슬라이더
580 x 295픽셀을 선택합니다.
선택 영역을 회색 톤으로 채웁니다.
사용하고 싶은 이미지를 불러옵니다. 위에서 만든 기본 레이어에 클립합니다.
이제 슬라이더에 그림자 효과를 추가하십시오. 새 레이어를 만듭니다. 브러시 도구를 선택하고 직경을 400픽셀로 설정합니다. 브러시 팔레트를 열고 원형률을 줄입니다. 아래 설정을 사용하세요.
브러시 색상을 #000000으로 설정하고 스팟을 추가합니다.
가장자리를 부드럽게 하려면 가우시안 블러를 적용하세요.
그림자의 아래쪽 절반을 선택하고 삭제합니다.
슬라이더 바로 위에 그림자 위치를 변경합니다.
세로로 줄여봤습니다. 다음으로 슬라이더 중앙에 정렬합니다. 두 레이어를 모두 선택하고 옵션 패널에서 수평 중심 정렬 버튼을 클릭합니다.
그림자를 복제하고 수직으로 회전시킵니다. 슬라이더의 아래쪽 가장자리에 놓습니다.
직사각형 선택 윤곽 도구를 사용하여 슬라이더 제어 버튼을 만듭니다. #000000을 입력하세요.
버튼 불투명도를 50%로 낮추세요
옵션 패널에서 자동 모양을 열고 이 화살표를 선택하세요. 버튼에 추가하세요.
스트립을 추가합니다. #000000으로 채워주세요.
불투명도를 50%로 낮춥니다.
여기에 프로젝트에 대한 설명을 추가할 수 있습니다.
8단계: 환영 문구 추가
여기에는 환영 메시지와 웹사이트에 대한 설명이 나와 있습니다.
9단계: 헤더 마무리
헤더를 거의 완성했습니다. 마무리 작업에 미묘한 그림자 효과를 추가해 봅시다! 브러시 도구를 사용하여 앞서 만든 것처럼 그림자를 만듭니다.
헤더와 섀도우 사이에 1px 간격을 남겨두세요.
10단계: 배경에 그라데이션 적용
밝은 회색에서 흰색으로의 그라데이션을 만듭니다.
헤더 아래에 새 레이어를 만들고 그라디언트를 적용합니다.
11단계: 슬라이더 회전 컨트롤 추가
회전 컨트롤을 만듭니다.
하나의 컨트롤에 내부 그림자를 적용하여 슬라이더의 현재 활성 항목을 나타냅니다.
12단계: 콘텐츠 구분선 만들기
연필 도구를 선택하고 1픽셀 선을 그립니다. 밝은 회색(#aaaaaa)을 선택하세요.
그라디언트 마스크를 사용하여 가장자리를 부드럽게 숨깁니다.
13단계: 메인 콘텐츠 추가
이제 실제 콘텐츠 부분으로 들어갈 차례입니다. 3열 레이아웃입니다. 사이에 패딩을 추가하여 3개의 동일한 열을 만들어야 합니다. 나는 간단한 계산을 수행하고 사용 가능한 공간을 25픽셀 패딩이 있는 3개의 동일한 너비 상자로 나누었습니다.
상자에 안내선을 추가합니다. 그런 다음 상자를 제거하십시오. 그리고 이것들은 기둥입니다.
일부 주요 서비스를 추가하세요. 기능 아이콘 세트에서 아이콘을 드롭하세요. 물체 사이의 거리를 균일하게 유지합니다.
간단한 "자세히 보기" 버튼을 만들어 보겠습니다. 둥근 사각형 도구를 선택하여 모양을 그립니다. 모양 레이어인지 확인하세요.
버튼에 그라디언트 오버레이와 획을 적용합니다.
버튼을 복제합니다.
최근 작업 항목을 추가하겠습니다. 이미지 홀더 상자 3개를 그리고 3픽셀 획을 적용했습니다.
이미지를 상자에 자릅니다.
이전처럼 그림자를 만들어 상자 아래에 배치했습니다.
일부 프로젝트 설명을 추가합니다.
트위터 피드를 만들어 보겠습니다. Twitter 새 아이콘을 놓습니다.
트위터 공지를 추가했습니다.
더 많은 트윗을 위한 버튼을 만듭니다.
다음 스타일을 적용하세요.
텍스트를 추가하세요.
14단계: 바닥글 만들기 및 마무리
바닥글을 선택하고 회색 값으로 채웁니다.
색상 오버레이를 적용합니다.
마지막으로 바닥글 탐색 및 저작권 정보를 추가합니다. 그리고 이것으로 세션이 종료됩니다. 최종 이미지를 살펴보세요.
최종 결과
보기 좋고 깨끗하고 기능적인 웹 레이아웃을 디자인하는 것은 웹 디자이너 생활의 필수적인 부분입니다. 이 튜토리얼에서는 처음부터 Photoshop에서 깔끔하고 전문적인 웹 레이아웃을 만들어 보겠습니다. 그 과정에서 디자인을 만드는 데 유용한 방법을 배울 수 있습니다. 그럼 시작해 보세요!
최종 결과 미리보기
전문적인 웹 레이아웃 만들기 Photoshop 튜토리얼
1단계: 모형
디자인을 시작하기 전에 요구 사항, 모양 및 기능을 계획해야 합니다. 그런 다음 이러한 아이디어를 레이아웃에 맞춰 시각적으로 실행해야 합니다. 모형과 와이어 프레임은 유연성이 뛰어난 레이아웃을 만드는 데 매우 유용합니다. 이는 모범 사례이며 업계에서 적극 권장됩니다.
아래는 그레이톤만 사용해서 조합해봤습니다. 그런 식으로 이 시점에서 장면에서 색상을 제거합니다. 그래야 전체적인 레이아웃에 집중하고 색상을 어지럽히는 일을 피할 수 있습니다. 이는 사물을 신속하게 변경하고 재배치할 수 있는 많은 자유를 제공합니다. 모형은 원하는 만큼 상세할 수 있습니다. 이를 위해 나는 아래의 것을 사용합니다. 레이아웃과 내용을 간단히 정의하면 됩니다.
2단계: 캔버스 설정
그래서 우리는 레이아웃에 대한 청사진을 갖게 되었습니다. 실제로 디자인을 종합해보자! 우리는 960 픽셀 너비의 레이아웃을 만들 것입니다. 1200x1500 크기의 새 문서를 만듭니다.
이는 960픽셀 너비의 레이아웃이므로 지침을 추가하여 작업 영역을 정의해야 합니다. 전체 문서를 선택하려면 Ctrl+A를 누르세요 .
선택 > 선택 변환으로 이동합니다. 선택 영역을 너비 960픽셀로 줄입니다. 이것이 레이아웃의 작업 영역입니다.
선택 항목에 안내선을 추가합니다.
나중에 추가할 내용과 테두리 사이에 패딩을 만들어야 합니다! 선택 항목이 다시 활성화된 상태에서 선택 변환을 선택합니다. 선택 영역의 너비를 920픽셀로 조정합니다. 이는 각 측면에 20픽셀의 패딩이 있어 총 40픽셀의 패딩이 있다는 의미입니다.
선택 항목에 안내선을 추가합니다.
3단계: 헤더 생성
레이아웃의 헤더를 만들어 봅시다! 높이가 465픽셀인 항목을 선택합니다.
먼저 선택 영역을 회색 값으로 채우고 나중에 레이어 스타일을 사용하여 색상과 그라디언트를 추가합니다. 시각적 계층 구조를 유지하려면 디자인 전반에 걸쳐 이를 따르십시오.
헤더에 그라데이션을 추가합니다. 레이어 축소판을 두 번 클릭합니다. 그라데이션 오버레이를 선택합니다. 아래의 2가지 색상 그라데이션을 만듭니다. 설정을 사용하세요.
다음과 같아야합니다.
다음으로 헤더에 강조 표시를 추가해야 합니다. Ctrl+Alt+Shift+N 을 눌러 새 레이어를 만듭니다 . 직경 600px의 부드러운 브러시를 선택합니다. 브러시 색상으로 #19535a를 선택합니다. 헤더 중앙을 한 번만 클릭하면 됩니다.
위에서 높이가 110픽셀인 항목을 선택합니다.
선택한 부분을 삭제하려면 삭제 키를 누르세요. 아래와 같습니다.
Ctrl+T 를 눌러 수직으로 축소하세요 .
하이라이트 지점이 헤더의 중앙에 완벽하게 위치하는지 확인해야 합니다. 레이어, 헤더 및 강조 표시를 선택하고 "V"를 눌러 이동 도구로 전환하세요. 옵션 패널에서 수평 중심 정렬 버튼을 선택합니다.
새 레이어를 만들고 연필 도구를 사용하여 #01bfd2 색상으로 1픽셀 하이라이트 선을 그립니다.
그라디언트 마스크를 사용하여 가장자리를 부드럽게 숨깁니다. 그라디언트 도구를 선택하고 옵션 패널에서 아래 그라디언트를 만듭니다.
위의 그라데이션을 적용합니다.
4단계: 텍스처 패턴 생성
이제 간단한 체크 패턴을 만들고 헤더에 적용해 보세요. 연필 도구를 선택하고 브러시 크기를 2픽셀로 설정한 다음 서로 닿는 두 개의 점을 추가합니다. 배경을 끄고 점을 선택하세요. 편집 > 패턴 정의를 선택합니다.
새 레이어를 만들고 하이라이트 레이어 아래에 배치합니다. 패턴을 적용할 영역을 선택하세요. Shift+F5를 눌러 채우기 대화 상자를 로드합니다. 방금 생성된 패턴을 선택합니다. 그리고 좋아요.
선택 영역이 패턴으로 채워집니다. 자세히 살펴보세요.
패턴을 머리글에 부드럽게 혼합합니다. 패턴 레이어에 레이어 마스크를 추가합니다. 부드러운 붓을 골라 크고 부드러운 붓으로 칠해줍니다. 브러시 색상으로 #ffffff를 선택합니다. 브러시 불투명도를 약 60%로 낮추고 칠합니다. 너무 강하다고 생각되면 레이어 불투명도를 개별적으로 조정하십시오.
잘 섞였습니다.
5단계: 로고타입 추가
배경이 거의 완성되었습니다. 이제 로고 유형을 추가하십시오. 유형을 추가하기 전에 로고 뒤에 있는 강조 표시를 추가하세요. #19535a로 부드러운 브러시를 선택하세요. 자리를 추가하세요.
유형을 추가합니다. 제가 사용한 폰트는 "Bebas" 입니다. 무료로 다운로드하세요.
로고에 미묘한 효과를 적용합니다.
6단계: 탐색
탐색 링크를 추가합니다.
탐색 버튼을 만듭니다. 직사각형 선택 윤곽 도구를 사용합니다. 어떤 색상이든 채울 수 있습니다. 그런 다음 채우기 불투명도를 0으로 낮춥니다.
레이어 축소판을 두 번 클릭하고 Gradient Overlay를 선택합니다. 다음 설정을 사용하세요.
7단계: 콘텐츠 슬라이더
580 x 295픽셀을 선택합니다.
선택 영역을 회색 톤으로 채웁니다.
사용하고 싶은 이미지를 불러옵니다. 위에서 만든 기본 레이어에 클립합니다.
이제 슬라이더에 그림자 효과를 추가하십시오. 새 레이어를 만듭니다. 브러시 도구를 선택하고 직경을 400픽셀로 설정합니다. 브러시 팔레트를 열고 원형률을 줄입니다. 아래 설정을 사용하세요.
브러시 색상을 #000000으로 설정하고 스팟을 추가합니다.
가장자리를 부드럽게 하려면 가우시안 블러를 적용하세요.
그림자의 아래쪽 절반을 선택하고 삭제합니다.
슬라이더 바로 위에 그림자 위치를 변경합니다.
세로로 줄여봤습니다. 다음으로 슬라이더 중앙에 정렬합니다. 두 레이어를 모두 선택하고 옵션 패널에서 수평 중심 정렬 버튼을 클릭합니다.
그림자를 복제하고 수직으로 회전시킵니다. 슬라이더의 아래쪽 가장자리에 놓습니다.
직사각형 선택 윤곽 도구를 사용하여 슬라이더 제어 버튼을 만듭니다. #000000을 입력하세요.
버튼 불투명도를 50%로 낮추세요
옵션 패널에서 자동 모양을 열고 이 화살표를 선택하세요. 버튼에 추가하세요.
스트립을 추가합니다. #000000으로 채워주세요.
불투명도를 50%로 낮춥니다.
여기에 프로젝트에 대한 설명을 추가할 수 있습니다.
8단계: 환영 문구 추가
여기에는 환영 메시지와 웹사이트에 대한 설명이 나와 있습니다.
9단계: 헤더 마무리
헤더를 거의 완성했습니다. 마무리 작업에 미묘한 그림자 효과를 추가해 봅시다! 브러시 도구를 사용하여 앞서 만든 것처럼 그림자를 만듭니다.
헤더와 섀도우 사이에 1px 간격을 남겨두세요.
10단계: 배경에 그라데이션 적용
밝은 회색에서 흰색으로의 그라데이션을 만듭니다.
헤더 아래에 새 레이어를 만들고 그라디언트를 적용합니다.
11단계: 슬라이더 회전 컨트롤 추가
회전 컨트롤을 만듭니다.
하나의 컨트롤에 내부 그림자를 적용하여 슬라이더의 현재 활성 항목을 나타냅니다.
12단계: 콘텐츠 구분선 만들기
연필 도구를 선택하고 1픽셀 선을 그립니다. 밝은 회색(#aaaaaa)을 선택하세요.
그라디언트 마스크를 사용하여 가장자리를 부드럽게 숨깁니다.
13단계: 메인 콘텐츠 추가
이제 실제 콘텐츠 부분으로 들어갈 차례입니다. 3열 레이아웃입니다. 사이에 패딩을 추가하여 3개의 동일한 열을 만들어야 합니다. 나는 간단한 계산을 수행하고 사용 가능한 공간을 25픽셀 패딩이 있는 3개의 동일한 너비 상자로 나누었습니다.
상자에 안내선을 추가합니다. 그런 다음 상자를 제거하십시오. 그리고 이것들은 기둥입니다.
일부 주요 서비스를 추가하세요. 기능 아이콘 세트에서 아이콘을 드롭하세요. 물체 사이의 거리를 균일하게 유지합니다.
간단한 "자세히 보기" 버튼을 만들어 보겠습니다. 둥근 사각형 도구를 선택하여 모양을 그립니다. 모양 레이어인지 확인하세요.
버튼에 그라디언트 오버레이와 획을 적용합니다.
버튼을 복제합니다.
최근 작업 항목을 추가하겠습니다. 이미지 홀더 상자 3개를 그리고 3픽셀 획을 적용했습니다.
이미지를 상자에 자릅니다.
이전처럼 그림자를 만들어 상자 아래에 배치했습니다.
일부 프로젝트 설명을 추가합니다.
트위터 피드를 만들어 보겠습니다. Twitter 새 아이콘을 놓습니다.
트위터 공지를 추가했습니다.
더 많은 트윗을 위한 버튼을 만듭니다.
다음 스타일을 적용하세요.
텍스트를 추가하세요.
14단계: 바닥글 만들기 및 마무리
바닥글을 선택하고 회색 값으로 채웁니다.
색상 오버레이를 적용합니다.
마지막으로 바닥글 탐색 및 저작권 정보를 추가합니다. 그리고 이것으로 세션이 종료됩니다. 최종 이미지를 살펴보세요.
최종 결과