포토샵에서 깨끗한 웹 사이트 레이아웃 만들기-웹 사이트 레이아웃을 디자인하는 것은 화려한 이미지를 배열하고 텍스트 프레임에 텍스트를 채우는 것 이상입니다. 너의 클라이언트 사업에 관하여 양을 말하는 접근 이다. 웹사이트의 색깔 및 도표는 웹사이트의 디자인 그리고 쉬운 항법 교류의 질이 조직과 사용자를 매고 잠재적인 고객으로 그를 돌더라도 반면,사업의 성격을 정의한다.
보기 좋고 쉽게 접근 할 수있는 웹 사이트 레이아웃을 디자인하는 것은 모든 워너비 웹 디자이너에게 필수입니다. 이 튜토리얼은 처음부터 웹 사이트 레이아웃 간단하고 깨끗한 웹 사이트를 만드는 과정을 통해 당신을 데려 갈 것입니다. 이 과정에서,당신은 당신이 더 웹 디자인에 대한 더 많은 지식을 얻을 도움이 될 것입니다 중요한 포인트를 배울 것입니다.
웹 사이트 레이아웃을 디자인하기 전에 요구 사항을 기록하십시오.
웹 사이트 레이아웃 디자인을 시작하기 전에 웹 사이트의 모양과 웹 사이트에 포함해야 할 주제가 무엇인지 알아야합니다. 그의 웹사이트에 웹사이트 배치 성분 너의 클라이언트의 명부를 만들는것은 결정적 필요로 한다. 그와 함께 좋은 디자이너의 품질은 최종 템플릿 작업을 시작하기 전에 전체 웹 사이트의 모의를 준비하는 것입니다.
무료 디자인 강좌 시작
3 차원 애니메이션,모델링,시뮬레이션,게임 개발&기타
다양한 디자인 회사는 와이어 프레임,프로토 타이핑,모형,베타 버전 등을 포함 할 수있는 다양한 수준의 사전 설계 전략을 적용합니다. 이 자습서에서는 원래 템플릿 디자인을 시작하기 전에 모형 버전을 만듭니다. 모형 블록을 식별 할 수있는 회색 음영을 사용하고 있습니다.
캔버스
몇 년 전에 웹 사이트에 액세스 할 수있는 운영 체제와 제한된 장치가 거의 없었지만 페이지 크기는 하나 또는 두 개의 크기로 고정되었습니다. 오늘날 시나리오는 완전히 다릅니다. 최종 사용자는 다양한 크기,휴대 전화,아이 패드와 태블릿의 데스크톱에 사이트에 액세스 할 수 있습니다. 너가 이 다양한 상황안에 특별한 크기에 너의 웹 페이지를 고칠 수 있는 기회. 그러나 모든 장치에 적용되는 업계 표준 크기가 있습니다. 너는 느리게 너의 마음에 들는 크기를 발견할 것이다,또는 너의 클라이언트는 웹사이트를 크기를 흉내내기 위하여 너를 참조할지도 모른다.
이 경우,우리는 다음과 같은 차원에 노력하고 있습니다. 이 시간이 지남에 따라 변경 될 것 같은 높이에 대해 걱정하지 마십시오. 너가 너의 웹사이트에 추가하고 있는 내용 더,더 고도는 이을 것이다.
기억하십시오,그것은 수직으로 페이지를 아래로 스크롤하는 것이 일반적이다,그래서 당신은 사용자가 구글로 홈페이지에 스크롤하지 않는 한 당신은 당신의 웹 페이지에 대한 특정 높이로 수정되지 않을 수 있습니다. 그러나 수평으로 스크롤 할 필요가 없습니다. 이렇게,업계 표준에 의하여 너의 폭을 제한하고 수평한 두루말기에 창조적 얻지 말라.
웹의 경우 해상도는 72 로 제한됩니다. 최근 아이 패드와 몇 정제에서 발견 된 높은 해상도의 이미지와 페이지가 있습니다. 그러나 그것은 드문 경우에,그리고 전 세계에 걸쳐 인터넷 속도를 고려(72)에 충실하는 것이 좋습니다.
명령을 사용하여 파일을 선택하고 템플릿 전체에 똑같이 안내선을 그립니다. 웹사이트는 서로 일관되게 배열된 각 성분에 청초하게 편성되어야 한다. 그리고 웹 사이트 레이아웃 지침은 쉽게 얻을 수 있도록 도와줍니다.
당신의 모형 준비.
원본 템플릿에 모형 파일을 배치하면 충분한 시간을 절약 할 수 있습니다. 귀하의 웹사이트를 디자인 하는 것은 너무 쉽게 몇 분 이내에 프레임 워크를 완료 끝날 것 이다. 그러나 모형은 프레임을 디자인하는 데 도움이 될 것입니다. 세부 사항,유형 배열 및 정렬로 디자인 요소를 완성하는 것은 웹 사이트 레이아웃을 그리는 것보다 과도한 시간이 걸립니다.
색 구성표 및 기타 선택 사항
프레임 워크를 준비한 후 다음 단계는 색 구성표를 선택하는 것입니다. 그러나 디자인 작업을 시작하기 전에 색상을 준비하는 것이 좋습니다.
모든 것은 당신이 디자인을 시작하기 전에 당신의 총을 준비,메시지로 귀결. 작업을 시작하기 전에 아이콘,이미지 및 색상 선택을 포함한 모든 것을 준비해야합니다. 작업 구성 및 계획은 더 많은 시간을 절약하고 그 사이에 방해없이 디자인에 중점을 둡니다.
회사가 새롭고 이전에 기업 정체성이 없다면 색상 선택은 디자이너의 선택이 될 수 있습니다. 클라이언트는 그들이 원하는 어떤 음영의 아이디어를 제공 로고 또는 배경 어떤 경우에 있어야 합니다. 당신이 전체 웹사이트를 재설계할 필요가 있을 수도 있는 기존하는 회사의 사정에서는,당신은 클라이언트의 필요에 의하여 동일한 색깔을 선택해야 할지도 모른다.
당신이 아카이브에서 색 구성표의 수백만을 선택하는 데 도움이 될 수 있습니다 수많은 웹 사이트가 있습니다. 색상 조합의 다양한 선택을 즐길 수있는 다음 웹 사이트를 사용해보십시오.
색깔.어도비통신
Colourlovers.com
여기에서 웹 사이트에 사용할 파란색 음영을 몇 개 선택했습니다. 전체 웹 사이트는 다음과 같은 색 구성표 내에서 계획 될 것입니다. 우리는 클라이언트가 선호하는 색상 모르는,서너 가지 색상 조합을 선택하는 것을 잊지 마십시오. 클라이언트가 색체 배합 설계를 완결하면 하자마자,그늘 가치를 저장하고 색깔이 기업의 아이덴티티안에 조직의 각 수직에 있는 생명 역할을,특별하게 한다 것 을 확인하십시요.
설계 프로세스
디자이너를 수행하는 방법에는 여러 가지가 있습니다. 정의하거나 설계하는 과정을 수행 할 하드 및 빠른 웹 사이트 레이아웃 규칙이 없습니다;그것은 대부분 디자이너가 자신의 편의를 선택합니다 과정이다.
일부 디자이너는 전체 블록과 프레임을 만들고 두 번째 단계에서 세부 사항을 작업하고 유형 및 마지막으로 정렬 및 조정을 시작하려고합니다. 어떤 사람들은 페이지의 한 부분을 한 번에 끝내고 다음 부분으로 가져가는 것을 좋아합니다. 우리는 두 번째 스타일을 따르고 있습니다.
우리는 다음 단계에서 웹 사이트를 완료합니다
- 헤더&바닥 글
- 우리가 무엇을
- 서비스
- 양식
- 뉴스
- 바닥 글
헤더&바닥글
헤더 또는 배너의 크기를 정의하는 엄지 손가락의 규칙은 창의성에 남아 있습니다. 최신 동향에 따르면,웹사이트는 너의 전체 컴퓨터 스크린을 덮는 거대한 심상에 나타난다. 이 스타일은 최근에 꽤 인기를 얻은 영웅 이미지라고합니다.
이 경우,우리는 120 픽셀 높이 헤더와 배너 550 픽셀 높이로 시작했다. 너비는 문서 크기와 일치해야 합니다.
단색의 디자인은 더 큰 프레임이나 이미지와 잘 어울리지 않는 평평한 모양을 가지고 있습니다. 평평한 모양을 피하기 위해 배너 위에 그라디언트 오버레이 레이어를 적용했습니다. 그것은 배너에게 한 그늘에서 다른 그늘로 천천히 변형되는 깊이를 제공합니다.
이 단계에서 헤더&배너 부분에 유형을 추가했습니다. 링크 및 서비스와 함께 회사 이름,브랜드 메시지가 텍스트에 추가됩니다. 또한 배너에 투명 버튼을 관찰 할 수 있습니다.
특수 기능이없는 일반 텍스트 또는 너무 많은 유형은 웹 페이지의 모양과 느낌을 망칠 것입니다;페이지는 곧 사용자를 지루하게하여 사이트를 빠르게 떠날 수 있습니다. 배너의 오른쪽 상단에 있는 서비스 링크에 추가한 벡터 모양을 확인하십시오. 작풍은 간단하다,그러나 현세 보기를 피하는 공허를 채운다.
비즈니스에 적합한 이미지를 선택합니다. 웹에서 사용할 수 있는 스톡 이미지의 수백만 이며 귀하의 요구 사항에 맞는 이미지를 찾을 너무 오래 걸리지 않을 것입니다.
내 경우에는,나는 내 웹 사이트와 잘 갈 것이라고 생각 높은 품질의 이미지를 발견했다. 나는 웹 사이트에 대한 비즈니스 테마가없는,그래서 배너 게시물에 좋아 보이는 모든 이미지를 자유롭게 선택할 수 있습니다.
아래의 무료 스톡 이미지 사이트에서 일부 고화질 이미지를 다운로드하십시오.
www..com.
블렌딩은 아름다운 배너를 만들기 위해 마스터해야 할 예술입니다. 여기에 위의 이미지에 표시된 효과를 달성하기 위해 세 개의 레이어를 혼합. 내가 한 일은
- 파란색 배너 위에 이미지 레이어 배치
- 이미지 위에 그라디언트 오버레이 배치
- 이미지의 불투명도를 40%변경하고 혼합 모드를 차이로 변경하십시오.
- 위 이미지의 레이어 팔레트를 확인하여 레이어가 서로 겹쳐지는 방식을 이해하십시오.
이것은 우리가 그냥 작업을 완료로 헤더&배너가 보이는 방법입니다. 우리는 한 번에 한 부분에 노력하고 있으며,다음 단계로 이동하는 시간이다.
정렬은 입력 할 때 중요합니다.; 너의 위치가 봐야 하는 까 라고의 아이디어가 있고,너가 그것을 시작할 전에 원본은 맞추어야 한다. 이 수준에서,나는 두 개의 서로 다른 텍스트 프레임을 사용,모두 왼쪽에 정렬.
다음 단계는 웹 페이지의 서비스 부분을 디자인하는 것입니다. 나는 회사의 다양한 서비스를 선보일 회색 음영 금속 별을 디자인했다. 스타 기호를 사용하여 뒤에 의도는 5 스타 서비스입니다.
텍스트를 정렬 할 때 가이드는 가장 친한 친구입니다. 유형 및 객체 내의 일관성은 디자인 요소 사이의 공백과 동일한 간격을 잘 활용하여 얻을 수 있습니다. 프레임의 모든 개체가 적절한 간격과 거리를 유지해야한다는 것을 알기 위해 많은 웹 사이트 레이아웃 지침을 사용하여 공정한 양의 공백을 가져 왔습니다.
디자인의 다음 단계는 양식 필드를 만드는 것입니다. 이 경우,나는 우리가 배너 디자인에 사용 된 방법에 반대 일하고 있어요. 우리는 단색 레이어 아래에 이미지 레이어를 배치하고 더 나은 모양을 달성하기 위해 두 레이어 위에 그라디언트 레이어를 적용합니다. 큰 이미지를 배치하는 동안 혼합 모드로 재생하는 것은 항상 필수적이다.
이 사이트의 이미지 선택에는 특정 테마가 없습니다. 이 이미지가 사이트가 더 잘 보이도록 도와 줄 것이라고 생각합니다.
컬러 배경 레이어 아래에 이미지를 놓습니다. 이미지를 컬러 레이어의 크기에 정확하게 고정하려면 레이어 마스킹 옵션을 사용하십시오.
위의 이미지에서 레이어 팔레트를 살펴보십시오. 단색 파란색 레이어가 이미지 상단에 있으며 혼합 모드가 오버레이로 변환되고 불투명도가 65%로 줄어 듭니다.
두 레이어 위에 그라디언트 맵을 사용했습니다. 혼합 모드는 색조로 변경되고 불투명도는 동일하게 유지됩니다.
양식 상자가 준비되어있어 웹 사이트 디자인의 네 번째 레벨이 끝납니다.
우리의 다음 단계는 두 개의 간단한 텍스트 프레임으로 구성되어 있습니다. 이 웹 페이지의 레벨 2 유사,나는 상단과 유사한 두 개의 상자를 정렬 사용. 정렬에서 일관성을 유지하는 것은 공백을 사용하는 좋은 방법입니다.
우리는 페이지의 마지막 부분에 도달,다시 한 번 바닥 글의 크기를 볼 수있는 시간이다. 디자이너는 그가 거기서 사용해야 하는 연결에 기초를 두는 바닥글의 고도에 관하여 계획해야 한다. 이 경우 바닥 글에 170 픽셀의 높이를 부여했습니다. 너비는 웹 사이트와 동일하게 유지됩니다.
귀하의 요구 사항에 따라 링크와 이미지를 놓습니다.
이와 함께,우리는 우리의 웹 사이트의 설계 부분을 체결했다. 우리가 사용하는 색상 조합은 최소;우리는 우리의 디자인에 공백을 많이 사용하고 최소한의 글꼴로 간단한 텍스트를 추가했습니다. 의도는 우리가 성취 희망 깨끗한 웹 페이지를 디자인하는 것입니다.
아래 전체 페이지의 디자인을 다시 한번 살펴보십시오.
