병원 홈페이지 디자인 메인 헤더 엘리멘터 슬라이더 배경으로 제작

병원 홈페이지 디자인 과정을 소개하기 위한 첫 번째 시간입니다. 약속대로 메인 헤더는 슬라이더 섹션을 통해 완성 하였고, 엘리멘터 프로 기능이 필요합니다. 가장 보편적인 방식이며 실제 병원 웹사이트 느낌이 들도록 이미지를 넣었습니다.

이외에도 폰트에 대한 설명까지 준비했으니 참고해서 디자인에 활용해 보세요.



 

엘리멘터 섹션 배경 설정과 슬라이더 만들기

엘리멘터 페이지빌더 프로 기능에는 섹션 배경 화면을 슬라이더로 설정할 수 있는 기능을 제공하기 때문에 추가 위젯을 사용할 필요 없이 원하는 이미지를 갤러리 형식으로 슬라이더로 표현할 수 있습니다.

이때 몇 가지 요소만 제어 한다면 여러분도 누구나 웹사이트 헤더 배경을 멋진 슬라이더로 디자인 할 수 있죠. 이번 병원 홈페이지 제작 과정에서 헤더 디자인은 최대한 심플하게 표현하려고, 타이틀과 텍스트는 슬라이더 되지 않도록 설정했습니다.

이제 부터 이미지와 함께 슬라이더 디자인 과정을 보여 드릴게요.



완성된 헤더 이미지 입니다.

우측은 포토샵에서 그라디언트 효과를 주어 폰트가 잘 보이도록 이미지를 변형해 올렸습니다. 물론 모든 이미지가 마찬가지 입니다.

---

---

슬라이더 섹션 세팅 값인데 지속시간은 하나의 이미지가 보여지는 시간이며, 전환 기간이란 슬라이더가 변하는 걸 의미합니다. 아래 켄번즈 효과는 이미지가 확장하면서 변경되는 효과를 만듭니다.

이렇게 슬라이더 배경을 디자인할 때 전환 기간을 크게 잡으면 이미지가 바뀔때 오버레이 되는 효과를 만들 수 있다는 것도 확인해 보시면 도움이 됩니다.

---

---

다음은 해당 섹션의 기본 셋팅 값입니다. 웹사이트 사이즈를 좌우 1300px로 잡기 위해 섹션 최대값을 1500으로 잡고 좌우 마진을 100px로 잡아 1300px을 맞췄습니다.

배경 화면은 전체 화면으로 디자인 하기 위에서 스크레치 섹션을 선택한 상태란 걸 확인할 수 있습니다.

---

---

앞서 이야기 한 것 처럼 좌우 여백을 100으로 잡았고, 섹션 상단 여백을 250, 하단을 50으로 잡았는데, 그 이유는 현재는 디자인하지 않았지만 추후 로고와 메뉴가 있어야 할 공간을 확보하고, 기본적으로 디자인 컨셉을 정돈되게 보이도록 하단에 폰트를 배치하기 위해서 입니다.

이렇게 헤더 섹션에서 슬라이더 이미지를 디자인 했습니다.

이번 병원 홈페이지 디자인 과정에는 심플함과 함께 방문자 동선을 고려한 콘텐츠 배치를 위주로 알려드릴 예정인데요, 슬라이더 안에 들어간 텍스트 디자인 과정까지 확인한 후에 웹사이트 이미지를 선명하게 하는 간단한 방법도 알려 드리도록 하겠습니다.

 

폰트 디자인, 두 가지 컬러 타이틀 만드는 법

메인 헤더이기 때문에 메인 타이틀을 강조하기 위해 두 가지 컬러를 이용한 디자인을 해 보았습니다. 워드프레스 엘리멘터 기능에도 투 컬러 위젯을 지원하고 있지만 글자 가운데 컬러를 넣은 기능을 지원하지 않습니다.

따라서 해당 패턴으로 폰트 디자인을 하려면 다음과 같은 Html 코드를 참고 바랍니다.

병원 <span style="color:#E7D46A">홈페이지 제작</span> 가이드

---

---

상단에 코드를 제목 타이틀에 입력하면 투톤 컬러의 타이틀이 완성되는데, 이를 응용하면 다양한 위치에 다양한 컬러를 넣어 폰트 디자인을 할 수 있을 것입니다.

이외에 폰트 디자인 과정에서 사용한 폰트 종류는 "프리텐다드" 한글 폰트이며, 필요에 따라 병원 홈페이지 디자인에서는 명조체를 사용하셔도 좋습니다.

텍스트와 폰트 컬러는 계층 구조를 위해 조금 차이를 두었지만 실제 폰트 크기와 두께에서 차이가 있기에 동일한 화이트 컬러로 사용해도 무방합니다.

 

이미지 선명도와 압축을 위한 포토샵 사용

몇 분이 이미지 관련 질문에서 선명한 이미지를 저용량으로 사용하는 방법을 물어보셔서 오늘 디자인 팁으로 포토샵 "하이패스" 기능을 알려 드리려고 합니다.



포토샵이 지원하는 이미지 저장 방식에는 웹 전용 "레거시" 저장 방식이 있습니다. 이와 함께 이미지를 포토샵에 올리고 하이패스 기능을 이용해 선명도를 높이고 웹사이트에 사용하는 방법이 있는데요, 자세한 설명은 유튜브 검색에서 "하이패스" 기능 사용법을 검색하면 쉽게 배울 수 있습니다.

여기까지 병원 홈페이지 디자인 첫 번째 시간으로 메인 헤더 디자인 과정을 설명해 드렸습니다. 앞으로도 계속 단계별로 웹사이트 하나를 디자인하는 과정을 설명해 드릴테니 기대해 주세요.

관련 문의는 댓글이나 카카오 채널을 이용하시면 친절히 설명해 드리겠습니다.

실제 디자인 확인하기