자습서 : Adobe Photoshop을 사용하여 웹 페이지를 레이아웃하는 방법

모델 포토샵

웹 페이지를 디자인하고 코드를 입력하거나 건드리지 않고도 완전히 간단하고 기능적인 방식으로 작업 할 수있는 매우 다양한 도구가 있습니다. 그들은 무수히 많으며 응용 프로그램에서 제안합니다 (어도비 드림위버 예) 또는 Wix와 같은 온라인 플랫폼에서 직접. 그러나 웹 디자이너에게는 수동 절차를 아는 것이 필수적입니다. HTML5 및 CSS는 웹 사이트 및 랜딩 페이지 레이아웃의 기본 기둥입니다.

그러나 예상보다 더 자주 Indesign 또는 어도비 포토샵 레이아웃 작업을 보완하고 완벽한 마무리를 제공합니다. 오늘은이 광범위한 자습서에서 Adobe Photoshop을 사용하여 웹 페이지를 레이아웃하는 방법을 살펴 보겠습니다. 이 첫 번째 부분에서는 Photoshop에서 개발할 작업을 계속할 것입니다. 그러나 향후 기사에서는이 작업을 HTML 코드에 직접 적용하여 기능을 만드는 방법을 살펴볼 것입니다.

와이어 프레임 디자인부터

웹 페이지의 레이아웃과 디자인을 시작하려면 기본 요소가 무엇인지 정의하는 것으로 시작하는 것이 매우 중요합니다. 이것이 바로 스켈레톤입니다. 이 구조는 모든 콘텐츠 (텍스트 또는 멀티미디어)를 보유하기위한 지원 역할을합니다. 페이지를 구성하는 각 섹션을 정의함으로써 완벽하게 정확하게 작업하고 가능한 한 성공적인 시각적 디자인을 제공 할 수 있습니다.

우리 웹 사이트의 크기를 고려하는 것이 매우 중요합니다. 박스형 또는 전각. 박스형 웹 페이지는 작은 컨테이너 안에 있으므로 주위에 공백이 나타납니다. 반대로 전체 웹은 페이지를 재생하는 장치의 전체 화면을 차지합니다. 양식 중 하나를 선택하는 것은 단순히 문체 질문에 응답하고 우리가 작업하는 프로젝트의 요구 사항에 따라 달라집니다. 이 예제에서는 박스 모드로 작업하여 브라우저에서 제공하는 모든 공간을 차지하지 않습니다.

와이어 프레임 -1

와이어 프레임을 만들기 위해 먼저해야 할 일은 Adobe Photoshop 응용 프로그램에 들어가서 페이지에 원하는 치수를 포함하는 것입니다. 이 예에서 페이지의 너비는 1280 픽셀입니다. 그러나 크기 문제는 최종 목적지 또는 페이지를 재현하려는 장치에 따라 다를 수 있습니다. 웹 디자인이 기능적이고 효율적이 되려면 의심 할 여지가 없습니다. 반응 시장에 나와있는 모든 장치에 적응해야합니다. 그러나이 경우 우리는 데스크톱 컴퓨터에서 재현 할 프로토 타입을 만들기 위해 노력할 것입니다. 그럼에도 불구하고 반응 형 문제는 나중에 논의 될 것입니다. 지금은이 예제에서 사용할 화면 차원의 계층 구조가 여기에 있습니다. 이 경우 Adobe Photoshop에서 랜딩 페이지의 레이아웃을 만든 다음 HTML5 및 CSS3로 마이그레이션합니다. 이 작은 연습의 목적은 Photoshop에서 만든 디자인을 사용자의 움직임에 반응하는 사용 가능한 대화 형 웹 디자인으로 변환하는 것입니다.

휴대폰 측정

iPhone 4 및 4S : 320 x 480

iPhone 5 및 5S : 320 x 568

아이폰 6 : 375 x 667

아이폰 6+ : 414 x 736

Nexus 4 : 384 x 598

Nexus 5 : 360 x 598

갤럭시 S3, S4, S5 : 360 x 640

HTC One : 360 x 640

정제 측정

iPad 모든 모델 및 iPad Mini : 1024 x 768

Galaxy Tab 2 및 3 (7.0 인치) : 600 x 1024

Galaxy Tab 2 및 3 (10.1 인치) : 800 x 1280

Nexus 7 : 603 x 966

Nexus 10 : 800 x 1280

Microsoft Surface W8 RT : 768 x 1366

Microsoft Surface W8 Pro : 720 x 1280

데스크탑 컴퓨터를위한 측정

작은 화면 (예 : 넷북에 사용됨) : 1024 x 600

중간 화면 : 1280 x 720/1280 x 800

대형 화면 : 1400 픽셀보다 큰 너비 (예 : 1400 x 900 또는 1600 x 1200)

와이어 프레임 가이드

웹 모형 내에서 요소 배포 및 섹션 할당을 시작하려면 가독성과 멜로디 마감을 보장하기 위해 비율을 고려하는 것이 매우 중요합니다. 상단 메뉴보기에서 찾을 수있는 규칙 및 가이드 옵션을 사용하는 것이 필수적입니다. 비례하고 정확한 방식으로 작업하려면 백분율로 작업하는 것이 가장 좋습니다. 보기 메뉴를 클릭 한 다음«새 가이드»옵션을 클릭하여 부서의 양식을 선택합니다. 이 경우 25 %에서 XNUMX 개의 수직 분할을 만들고 바닥 글에 이미지를 배치하고 머리글에 로고 이미지를 배치하기위한 참조로 사용합니다.

와이어 프레임 -1a

우리를 차지할 각 영역을 지정하는 코드가 있습니다. 모델 그리고 그들 각각이 가질 기능. 예를 들어 이미지가 차지할 영역을 나타 내기 위해 일종의 십자 모양의 사각형을 만듭니다. 특정 영역에 동영상을 포함하고자 함을 나타 내기 위해 컨테이너 내부에 재생 기호를 포함합니다. 이 첫 번째 예에서는 이미지로만 작업 할 것입니다. 상단 캡처에서 로고 우리 웹 사이트에서.

와이어 프레임 결승

이것은 우리의 최종 결과가 될 것입니다 와이어 프레임. 보시다시피, 로고가있는 이미지로 구성된 헤더로 나뉘어져 있으며, 이는 두 개의 탭, 검색 엔진 및 검색 창에있는 네 개의 버튼과 함께 홈페이지로 연결되는 링크 역할을합니다. 또한 이미 본문 내에는 분할 막대로 구성된 사이드 바와 웹 사이트에 올 콘텐츠 유형을 분류하는 일련의 카테고리가 포함되어 있습니다. 우리 사이트에 존재할 항목을 포함하는 번호 매기기와 마지막으로 우리 사이트에서 가장 대표적인 메타 태그 또는 레이블이있는 목록이있는 또 다른 섹션입니다.

다음을 포함 할 섹션에 의해 정의되는 콘텐츠 영역에서 자체 관리 가능한 콘텐츠, 우리는 우리 기사의 내용을 찾을 것입니다. 이 경우, 브레드 크럼 또는 브레드 크럼 (웹 사이트의 유기적 구조, 기사의 헤드 라인, 메타 데이터, 이미지가 포함 된 텍스트의 본문 인 단락을 나타냄).

바닥 글에는 페이지의 다른 영역에 대한 링크 역할을 할 XNUMX 개의 이미지가 포함되어 있습니다. 여기에 로고 또는 기타 흥미로운 섹션을 포함 할 수 있습니다. 실제로이 영역은 꼬리말, 바닥 글 자체는 사용 정책, 법적 고지 및 저작권에 따라 조금 더 내려갈 것입니다.

페이지의 기본 구조 또는 스켈레톤을 정의했으면 다음 단계로 이동해야합니다. 이것은 우리 웹 사이트의 각 영역의 적절한 디자인으로 구성됩니다. 즉, 웹 사이트에 최종적으로 삽입 될 콘텐츠로 각 영역을 "채우기"시작합니다. 이 순서대로 작업하면 나중에 비율을 수정해야 할 가능성이 높기 때문에 와이어 프레임에서 작업하기 전에 이러한 요소를 디자인하지 않는 것이 좋습니다. 우리는 이미지를 왜곡 할 위험이 있습니다. 그리고 각 요소의 디자인을 다시해야하는데, 이는 시간 낭비이거나 품질이 떨어지는 결과가 될 것입니다.

이 경우 당사 웹 사이트의 디자인은 매우 간단합니다. 우리는 머티리얼 디자인 교훈,이 관행을 예시하기 위해 Google 로고를 사용할 것입니다. 이 튜토리얼의 목적은 기술 지식을 설명하는 것이므로이 경우 미적 결과는 관련이 없음을 분명히해야합니다. 보시다시피, 우리는 이전에 계획에서 결정한 모든 영역으로 공간을 조금씩 채우고 있습니다. 그러나 우리는 마지막 순간에 약간의 수정을가했습니다. 아시다시피 로고의 크기를 크게 줄였으며 상단 메뉴와 완벽하게 연결되는 하단 헤더 영역에 구분선을 포함 시켰습니다. 이 경우 리소스 뱅크의 버튼과 재료를 사용했습니다. 디자이너로서 우리가 직접 디자인 할 수 있습니다 (특히 브랜드 이미지 또는 로고가 제공하는 것과 매우 유사한 토닉을 제공하려는 경우이 옵션을 권장합니다).

Web

이 예제를 배치하기 위해 두 가지 다른 수준에서 작업 할 것임을 명심하는 것이 중요합니다. 한편으로는 객체에 대해 작업하고 다른 한편으로는 웹 사이트의 모양에 대해 작업합니다. 즉, 한편으로는 웹 사이트의 골격과 다른 한편으로는 이 스켈레톤이 지원할 부동 요소. 사이드 바가 차지할 영역, 머리글을 본문에서 나누는 분할 막대와 같이 전혀 떠 있지 않은 영역이 있음을 알 수 있습니다.

web2

구조 1, 2, 3 및 4는 배경 따라서 실제로 Adobe Photoshop에서 내보낼 필요는 없지만 할 수는 있지만 반드시 필요한 것은 아닙니다. 때에 온다 플랫 색상 (플랫 디자인과 머티리얼 디자인의 필수 기능 중 하나는 CSS 스타일 시트를 사용하는 코드를 통해 완벽하게 적용 할 수 있습니다.) 그러나 나머지 요소는 나중에 HTML 코드에 삽입 할 수 있도록 저장해야합니다. 이 작은 다이어그램에서는 페이지의 배경에 속하는 영역을 재현하여 사이트의 최종 모습이 무엇인지 명확하게 알 수 있습니다.

아시다시피 Adobe Photoshop에서이 구성표를 만드는 감각은 각 요소의 실제 치수를 얻고 각 요소의 배열과 구조를 명확히하는 것입니다. 물론 텍스트 콘텐츠는 프로세스의이 단계에서 자리가 없습니다. 코드 편집기에서 제공. 우리는 또한 일반적으로 부트 스트랩과 같은 프레임 워크에서 또는 Jquery에서 직접 적용되지만,이 연습에서는 버튼과 정적 요소로 작업 할 것임을 지적해야합니다.

웹 페이지를 구성 할 각 요소를 만들었 으면 이제 내보내기를 시작하고 HTML 프로젝트 폴더 안에있는 이미지 폴더에 저장할 차례입니다. 스켈레톤 구성을 기반으로 일부 원본 요소를 수정해야 할 가능성이 매우 높기 때문에 와이어 프레임에서 내보내는 데 익숙해지는 것이 중요합니다. (예를 들어,이 경우 원본 버튼, 로고 및 하단 영역의 이미지를 포함하여 컴포지션의 일부인 대부분의 요소의 크기를 변경했습니다.)

모든 항목을 독립적으로 저장하는 방법을 배우면 해당 항목이 가지고있는 크기와 정확한 방법으로 저장됩니다. 최소한의 오류는 웹 페이지의 모든 요소에 영향을 미칠 수 있습니다. 서로 관련되어 있으며 최종 웹에서 HTML로 입력 할 수 있도록 완벽한 치수를 가져야합니다. 이 경우 다음 요소를 독립적으로 잘라 내고 저장해야합니다.

  • 우리의 로고.
  • 모든 버튼 (주 메뉴의 일부 및 나머지).
  • 모든 이미지.

우리는 여러 가지 방법으로 그것을 할 수 있으며 아마도 당신에게 더 효과적인 대안을 찾을 것입니다. 하지만 이런 종류의 레이아웃을 만드는 것이 처음이라면 다음 팁을 따르는 것이 좋습니다.

  • 먼저 와이어 프레임이 포함 된 PSD 파일이있는 폴더로 이동하여 내보낼 요소 수만큼 복제해야합니다. 이 경우 원본에서 12 개의 복사본을 만들어 동일한 폴더에 저장했습니다. 다음으로 각 사본의 이름을 바꾸고 포함 된 요소의 이름을 각각에 할당합니다. 로고, 메뉴 버튼 12, 메뉴 버튼 1, 검색 바, 상단 버튼 2, 상단 버튼 1, 상단 버튼 2 및 상단 버튼 3의 4 개 사본의 이름이 변경됩니다. 나머지 1 개는 이미지 2, 이미지 3, 이미지 4 및 이미지 XNUMX.
  • 이 작업이 완료되면 로고 이름으로 파일을 엽니 다.
  • 레이어 팔레트로 이동하여 로고가 포함 된 레이어를 찾습니다. 그런 다음 우리는 Ctrl / Cmd 해당 레이어의 썸네일을 클릭하는 동안. 이렇게하면 로고가 자동으로 선택됩니다.
  • 다음 단계는 Photoshop에 해당 로고를 정확한 방식으로 잘라내기를 원한다고 알리는 것입니다. 이를 위해 키 또는 명령에서 자르기 도구 만 호출하면됩니다. C.
  • 이 작업을 마치면 Enter 버튼을 클릭하여 컷을 확인합니다.
  • 이제 상단 파일 메뉴로 이동하여 저장 방법을 클릭합니다. 이 경우«로고»가 될 이름을 선택하고 형식을 할당합니다. PNG, 웹에서 최고 품질을 제공하는 파일입니다.
  • 모든 사본과 요소로 프로세스를 반복합니다. 다듬었을 때 팔레트의 나머지 레이어가 눈에 보이지 않는 또는 제거됩니다. 이러한 방식으로 각 요소를 투명한 배경으로 저장할 수 있습니다.

Button1

이 경우 레이어 팔레트에서 메뉴 버튼 2를 선택합니다. 스크린 샷에서 버튼의 제한이 어떻게 자동으로 선택되었는지 확인할 수 있습니다.

button2

C 키에서 자르기 도구를 선택하면 캔버스가 버튼 크기로만 축소됩니다.

저장 버튼

이제 웹 사이트의 일부인 모든 요소를 ​​하나씩 저장하고 이미지 폴더에 포함하고 나중에 사용할 시간입니다. 코드에서 호출을하고 레이아웃을 계속하지만 지금부터는 코드 편집기를 사용합니다.

프로세스를 완전히 직관적으로 만드는 웹 페이지 레이아웃에 대한 많은 도구와 대안이 있지만, 우리가 그것을하는 방법을 배우는 것은 매우 중요합니다. 조작. 이런 식으로 우리는 웹 페이지 디자인의 기초가 무엇인지 배울 것입니다.

개요:

  1. 디자인 구조 전송하려는 콘텐츠와 웹 사이트에서 만들어야하는 섹션에 특별한주의를 기울이는 웹 사이트의
  2. 스켈레톤 작업 또는 와이어 프레임 내용이 표시되는 영역과 형식을 나타내는 Adobe Photoshop에서
  3. 이전에 개발 한 측정 및 브랜드에 의존하여 디자인 웹의 표면. 모든 요소 (부동 및 고정)를 포함합니다. 해당 버튼, 로고 및 이미지를 포함하는 것을 잊지 마십시오.
  4. 프로젝트의 일부인 모든 요소를 ​​하나씩 잘라냅니다. 올바른 조치가 있고 나중에 문제를 일으키지 않는지 확인하십시오.
  5. 모든 요소를 ​​형식으로 저장 PNG 프로젝트 폴더 내의 이미지 폴더 HTML.
  6. 이 프로젝트는 웹 창에 출력을 가지므로 색상 모드를 고려하고 적용하는 것이 매우 중요합니다. RGB.
  7. 출근하기 전에 존경하는 다른 웹 사이트에서 영감을 얻고 팀원들과 이에 대해 논의하는 것을 잊지 마십시오. 클라이언트를위한 프로젝트 인 경우에는 요약보고 가능한 멀리.

2 코멘트, 당신의 것을 남겨주세요

코멘트를 남겨주세요

귀하의 이메일 주소는 공개되지 않습니다. 필수 필드가 표시되어 있습니다 *

*

*

  1. 데이터 책임자 : Miguel Ángel Gatón
  2. 데이터의 목적 : 스팸 제어, 댓글 관리.
  3. 합법성 : 귀하의 동의
  4. 데이터 전달 : 법적 의무에 의한 경우를 제외하고 데이터는 제 XNUMX 자에게 전달되지 않습니다.
  5. 데이터 저장소 : Occentus Networks (EU)에서 호스팅하는 데이터베이스
  6. 권리 : 귀하는 언제든지 귀하의 정보를 제한, 복구 및 삭제할 수 있습니다.

  1.   해적왕 해적왕

    hahahahahaha 그리고이 모든 작업이 끝나면 시작 버튼으로 이동하여 장비를 끄고 빌어 먹을 똥이 아닌 웹 사이트를 만들어 줄 빌어 먹을 전문가에게 가십시오.)

  2.   로니

    튜토리얼은 저를 잘 칭찬하지만 다음 번에서 더 자세하게 만들 것입니다. 저는 아직이 디자인에서 시작하고 있으며 최종 결과가있는 이미지를 볼 때 어떻게해야할지 모르는 몇 가지 단계가 있습니다. 감사합니다.