포토샵과 웹페이지 레이아웃 디자인의 관계에 대한 간략한 분석
1. 웹 페이지 레이아웃 디자인에서 Photoshop의 역할
1. 웹 페이지 레이아웃 계획에서 Photoshop의 역할
①유연한 레이아웃: Photoshop의 영혼 각 레이어는 서로 다른 요소를 배치할 수 있으며, 각 레이어의 이미지 위치는 다른 레이어의 이미지 위치에 영향을 주지 않고 자유롭게 이동할 수 있습니다. 이미지 크기, 색상 레벨, 밝기, 채도, 투명도 등은 다른 레이어의 이미지에 영향을 주지 않고 독립적으로 설정할 수 있습니다. 이러한 유연한 기능을 통해 디자이너는 아무런 제한 없이 원하는 대로 디자인할 수 있습니다. 그러나 Dreamweaver와 같은 소프트웨어는 디자이너에게 훨씬 적은 자유도를 제공하며 그 효과는 크게 줄어듭니다.
②수정 용이: 웹사이트 구축 초기에는 먼저 고객과 계약을 체결해야 합니다. 계약을 체결할 때 고객은 이때 자신의 웹사이트가 어떤 모습일지 가장 고민하게 됩니다. , 디자이너가 구축된 웹사이트를 생각해내는 것은 불가능합니다. 첫째, 비용이 너무 높으며, 둘째, 지적 재산권을 보호하기 위해 일부 고객은 계약을 체결할 수 있는지 확실하지 않습니다. 디자인 계획을 버리고 다른 회사에 맡겨서 만들면 남의 웨딩드레스가 되지 않을까요? 가장 좋은 방법은 Photoshop에서 만든 렌더링을 고객에게 보여주는 것입니다. 정상적인 상황에서 고객의 최초 만족도는 매우 낮으며 항상 수정 제안을 제시하고 수정 계획을 계속 제안합니다. 이때 우리는 Photoshop의 강력한 기능을 사용하여 고객이 만족할 때까지 고객의 요구 사항에 따라 쉽게 수정하고 최적화할 수 있습니다. Dreamweaver에서 대대적인 수정을 하는 경우 재설계만큼 시간과 노동 집약적이며 고객 요구 사항을 충족하지 못할 수도 있습니다.
③탐색 진행 속도를 높입니다. 보기 흉하고 정형화되지 않은 디자인의 사이트는 활력이 없고, 열기와 다운로드 속도가 느린 사이트는 아무런 가치가 없습니다. 심리학 연구에 따르면 선택의 여지가 많을수록 사람들의 관용은 더 나빠지고 선택의 폭이 커질수록 사람들의 관용은 낮아집니다. 오늘날 인터넷의 급속한 발전으로 인해 유사한 웹 사이트가 너무 많아 사람들이 웹 사이트 앞에 멈춰 서서 조금씩 다운로드하고 열고 테스트하고 표시하기를 기다릴 필요가 없습니다. 일반적인 상황에서는 다운로드 속도가 10초를 초과하면 사람들은 자동으로 다른 웹사이트로 이동하게 됩니다. 다운로드 속도를 결정하는 요소는 서버 구성 표준, 네트워크 전송 미디어, 클라이언트 구성, 동시 클릭 수 등 다양합니다. 그러나 이러한 조건이 동일할 경우 웹페이지의 크기와 웹페이지 요소의 최적화 및 구성만이 유일한 요소입니다. 포토샵을 사용하여 디자인한 웹페이지는 크롭 후 크기가 상대적으로 작아집니다. 동일한 요소도 형식 변경으로 인해 다운로드 속도가 크게 향상되므로 포토샵은 속도와 클릭률을 높이는 마법의 무기가 되었습니다.
2. Photoshop을 사용하여 웹 페이지 레이아웃을 디자인할 때 주의해야 할 몇 가지 문제
1. 웹 문서는 일반적으로 1007*600 및 708*800 픽셀이며 해상도는 화면 해상도인 72픽셀입니다. 해상도가 너무 높으면 효과가 향상되지 않지만 다운로드 속도가 느려집니다. 일반적으로 대규모 웹사이트는 화면 3개를 초과해서는 안 됩니다.
2. 색상: 웹사이트의 배경색과 파일의 색상이 통일되고 조화를 이루어야 합니다. 일반적으로 일부 웹사이트는 더럽고 난잡하며 형편없다고 비판받습니다. .. 배색이 무리하거나 너무 과해서 사람들에게 불편한 느낌을 주는 것이 핵심입니다.
3. 제목. 탐색 글꼴은 일반적으로 굵은 글꼴이고 본문은 일반적으로 Song 글꼴입니다. 다른 글꼴은 브라우저와 호환되지 않아 디버깅 중에 오류가 발생하고 작업에 문제가 발생할 수 있습니다. 페이지 효과를 향상하기 위해 다른 글꼴을 사용하는 경우 Dreamweaver를 사용하기 전에 Photoshop에서 분할하고 이미지화하는 것이 가장 좋습니다. 글꼴의 색상 설정은 전체 페이지 효과를 고려해야 합니다.
4. 레이아웃 형식: 렌더링은 Photoshop을 사용하여 디자인되지만 Dreamweaver의 페이지 레이아웃 요구 사항을 고려해야 합니다. Dreamweaver의 웹 페이지 레이아웃은 '國' 글꼴을 사용합니까, 아니면 다른 모드를 사용합니까? 사용 프레임 및 사용되는 프레임 유형을 설계하기 전에 고려해야 합니다. 그렇지 않으면 렌더링이 최종 웹사이트 레이아웃과 달라져 고객과 본인 모두에게 문제와 손실을 초래할 수 있습니다.
5. 좋은 웹사이트는 사진이나 텍스트가 있는 것이 좋습니다. 이는 웹사이트의 기능, 업종, 목적에 따라 다릅니다. 그러나 한 가지 원칙은 사진과 텍스트가 일치해야 한다는 것입니다. 합리적으로 배열되어야 하며, 그림은 특정 공간 분포에 따라 조화롭게 분포되어야 합니다. 또한 사진의 크기는 미적 원칙에 부합해야 하며 너무 크지 않아야 합니다. 일반적으로 사진의 세부 사항을 더 많이 표시하려면 더 큰 사진을 썸네일에 연결하는 것이 좋습니다.
6. 참조선을 과학적으로 사용하세요. 참조선은 페이지 레이아웃을 디자인하는 데 효과적인 보조 도구입니다. 먼저 가로 참조선을 사용하여 웹 페이지 레이아웃을 여러 주요 섹션으로 나눈 다음 세로 참조선을 사용하여 아이디어에 따라 각 섹션을 여러 개의 작은 섹션으로 나눌 수 있습니다. 마지막으로 전체를 한 번 관찰해 보세요. 웹 페이지 요소를 정확하게 배치하려면 정렬 안내 방법인 "보기" - "정렬 대상" - "안내선"을 사용할 수 있으며 눈금자와 격자선을 사용하여 안내선의 정확한 위치를 지정할 수 있습니다. 여기서 주의할 점은 웹사이트의 로고, 배너, 내비게이션 바는 모두 미리 디자인되어 있으며 크기가 고정되어 있으므로 이러한 영역을 만들 때 크기는 해당 요소의 크기에 맞게 디자인되어야 하며 그렇지 않으면 DreamWeaver에 들어갈 때 실수가 없습니다. 통합 시 가장자리가 비어 있거나 양식이 열리는 현상이 있을 수 있습니다.
3. "슬라이스" 도구는 Photoshop에서 DreamWeaver로의 연결 역할을 합니다.
포토샵 렌더링을 이용해 고객과 최종 계약을 체결한 뒤, 포토샵으로 웹 페이지 레이아웃을 디자인하는 것이 끝이 아니지만, 아직 중요한 단계인 '슬라이싱'이 남아있다. DreamWeaver는 렌더링을 올바르게 편집할 수 있으며 효과적인 통합을 통해 웹 페이지 레이아웃에서 Photoshop의 활성 역할을 극대화할 수 있습니다. "슬라이싱"이라는 중요한 단계를 완료하려면 다음 원칙을 따라야 합니다.
1. 참조선을 사용해야 합니다. 참조선은 디자인할 때 사용되며, 도면을 자를 때는 더욱 그렇습니다. 참조선을 사용하면 동일한 테이블에 있는 잘라낸 이미지의 크기가 통일되고 조정되어 "빈 공간"과 "폭발된 가장자리"를 효과적으로 방지할 수 있습니다.
2. 로고와 배너는 반드시 커팅되어야 합니다. 렌더링에 로고와 배너가 있는 경우 주로 미리 디자인된 로고와 배너를 위한 공간을 남겨두기 위해 이 부분을 슬라이싱해야 합니다. 드림위버와 통합할 때는 로고와 배너 슬라이싱을 사용하지 않고 원본 로고를 사용하는 것이 가장 좋습니다. 및 배너 문서를 직접 작성하는 경우 로고 및 배너의 효과를 향상시킬 필요가 있습니다.
3. 점선과 모서리 모양을 잘라야 합니다. 점선과 모서리 모양은 DreamWeaver에서는 구현할 수 없으며 Photoshop을 통해서만 슬라이스할 수 있습니다.
4. 그라데이션을 잘라야 합니다. 이것도 드림위버가 할 수 없는 일이다.
5. 큰 그림은 잘라야 한다. 큰 이미지는 균일한 이미지로 나누어야 웹페이지의 다운로드 속도를 향상시킬 수 있습니다.
6. 특수 텍스트 효과를 잘라야 합니다. Helvetica 및 Song 글꼴을 제외한 다른 글꼴은 슬라이스되어야 합니다. DreamWeaver에서 가장 효과적인 글꼴은 Song과 Heidi뿐이며 다른 글꼴 브라우저도 호환되지 않아야 합니다.
7. 네비게이션 바를 잘라야 합니다. 일반적으로 내비게이션 바는 특별히 디자인되어 있으며 드림위버에서는 그 효과를 얻을 수 없으므로 나중에 사용하려면 슬라이스해야 합니다.
8. 슬라이스를 효과적으로 저장합니다. 슬라이스가 저장되는 폴더는 사이트의 루트 디렉터리에 위치해야 하며, 폴더 이름은 영어로 되어 있어야 합니다. 슬라이스를 저장할 때 "파일 - 웹용 저장 형식" 명령을 사용하십시오. 슬라이스 저장 형식 요구 사항은 일반적으로 GIF 형식으로 저장됩니다. GIF는 작은 크기를 차지합니다. 요구 사항이 더 높은 이미지는 더 많은 사진 세부 정보를 표시하는 JPEG 형식으로 저장됩니다.
물론 웹 레이아웃 디자인 소프트웨어의 사용은 디자이너의 습관, 취미, 스타일에 따라 다릅니다. 저자는 웹 디자인의 대다수 초보자가 참고할 수 있도록 여기서 일반적인 규칙에 대해 이야기하고 있습니다.