web .
워드프레스 홈페이지 제작 / 반응형 디자인
홈페이지 제작 업체 OMG,
워드프레스 정보 게시판 입니다.
반응형 웹사이트 제작 관련 이야기와 워드프레스 검색엔진 최적화에 대한 인사이트를 공유하는 곳입니다. 여러분은 이곳에서 혼자서 워드프레스 홈페이지 만들기에 필요한 다양한 정보를 검색할 수 있습니다.
병원 홈페이지 디자인 메인 헤더 엘리멘터 슬라이더 배경으로 제작
웹디자인
작성자
Omg Design
작성일
2023-12-11 01:32
조회
1507
병원 홈페이지 디자인 과정을 소개하기 위한 첫 번째 시간입니다. 약속대로 메인 헤더는 슬라이더 섹션을 통해 완성 하였고, 엘리멘터 프로 기능이 필요합니다. 가장 보편적인 방식이며 실제 병원 웹사이트 느낌이 들도록 이미지를 넣었습니다.
이외에도 폰트에 대한 설명까지 준비했으니 참고해서 디자인에 활용해 보세요.
이때 몇 가지 요소만 제어 한다면 여러분도 누구나 웹사이트 헤더 배경을 멋진 슬라이더로 디자인 할 수 있죠. 이번 병원 홈페이지 제작 과정에서 헤더 디자인은 최대한 심플하게 표현하려고, 타이틀과 텍스트는 슬라이더 되지 않도록 설정했습니다.
이제 부터 이미지와 함께 슬라이더 디자인 과정을 보여 드릴게요.
완성된 헤더 이미지 입니다.
우측은 포토샵에서 그라디언트 효과를 주어 폰트가 잘 보이도록 이미지를 변형해 올렸습니다. 물론 모든 이미지가 마찬가지 입니다.
슬라이더 섹션 세팅 값인데 지속시간은 하나의 이미지가 보여지는 시간이며, 전환 기간이란 슬라이더가 변하는 걸 의미합니다. 아래 켄번즈 효과는 이미지가 확장하면서 변경되는 효과를 만듭니다.
이렇게 슬라이더 배경을 디자인할 때 전환 기간을 크게 잡으면 이미지가 바뀔때 오버레이 되는 효과를 만들 수 있다는 것도 확인해 보시면 도움이 됩니다.
다음은 해당 섹션의 기본 셋팅 값입니다. 웹사이트 사이즈를 좌우 1300px로 잡기 위해 섹션 최대값을 1500으로 잡고 좌우 마진을 100px로 잡아 1300px을 맞췄습니다.
배경 화면은 전체 화면으로 디자인 하기 위에서 스크레치 섹션을 선택한 상태란 걸 확인할 수 있습니다.
앞서 이야기 한 것 처럼 좌우 여백을 100으로 잡았고, 섹션 상단 여백을 250, 하단을 50으로 잡았는데, 그 이유는 현재는 디자인하지 않았지만 추후 로고와 메뉴가 있어야 할 공간을 확보하고, 기본적으로 디자인 컨셉을 정돈되게 보이도록 하단에 폰트를 배치하기 위해서 입니다.
이렇게 헤더 섹션에서 슬라이더 이미지를 디자인 했습니다.
이번 병원 홈페이지 디자인 과정에는 심플함과 함께 방문자 동선을 고려한 콘텐츠 배치를 위주로 알려드릴 예정인데요, 슬라이더 안에 들어간 텍스트 디자인 과정까지 확인한 후에 웹사이트 이미지를 선명하게 하는 간단한 방법도 알려 드리도록 하겠습니다.
따라서 해당 패턴으로 폰트 디자인을 하려면 다음과 같은 Html 코드를 참고 바랍니다.
병원 <span style="color:#E7D46A">홈페이지 제작</span> 가이드
상단에 코드를 제목 타이틀에 입력하면 투톤 컬러의 타이틀이 완성되는데, 이를 응용하면 다양한 위치에 다양한 컬러를 넣어 폰트 디자인을 할 수 있을 것입니다.
이외에 폰트 디자인 과정에서 사용한 폰트 종류는 "프리텐다드" 한글 폰트이며, 필요에 따라 병원 홈페이지 디자인에서는 명조체를 사용하셔도 좋습니다.
텍스트와 폰트 컬러는 계층 구조를 위해 조금 차이를 두었지만 실제 폰트 크기와 두께에서 차이가 있기에 동일한 화이트 컬러로 사용해도 무방합니다.
포토샵이 지원하는 이미지 저장 방식에는 웹 전용 "레거시" 저장 방식이 있습니다. 이와 함께 이미지를 포토샵에 올리고 하이패스 기능을 이용해 선명도를 높이고 웹사이트에 사용하는 방법이 있는데요, 자세한 설명은 유튜브 검색에서 "하이패스" 기능 사용법을 검색하면 쉽게 배울 수 있습니다.
여기까지 병원 홈페이지 디자인 첫 번째 시간으로 메인 헤더 디자인 과정을 설명해 드렸습니다. 앞으로도 계속 단계별로 웹사이트 하나를 디자인하는 과정을 설명해 드릴테니 기대해 주세요.
관련 문의는 댓글이나 카카오 채널을 이용하시면 친절히 설명해 드리겠습니다.
실제 디자인 확인하기
이외에도 폰트에 대한 설명까지 준비했으니 참고해서 디자인에 활용해 보세요.
엘리멘터 섹션 배경 설정과 슬라이더 만들기
엘리멘터 페이지빌더 프로 기능에는 섹션 배경 화면을 슬라이더로 설정할 수 있는 기능을 제공하기 때문에 추가 위젯을 사용할 필요 없이 원하는 이미지를 갤러리 형식으로 슬라이더로 표현할 수 있습니다.이때 몇 가지 요소만 제어 한다면 여러분도 누구나 웹사이트 헤더 배경을 멋진 슬라이더로 디자인 할 수 있죠. 이번 병원 홈페이지 제작 과정에서 헤더 디자인은 최대한 심플하게 표현하려고, 타이틀과 텍스트는 슬라이더 되지 않도록 설정했습니다.
이제 부터 이미지와 함께 슬라이더 디자인 과정을 보여 드릴게요.
완성된 헤더 이미지 입니다.
우측은 포토샵에서 그라디언트 효과를 주어 폰트가 잘 보이도록 이미지를 변형해 올렸습니다. 물론 모든 이미지가 마찬가지 입니다.
슬라이더 섹션 세팅 값인데 지속시간은 하나의 이미지가 보여지는 시간이며, 전환 기간이란 슬라이더가 변하는 걸 의미합니다. 아래 켄번즈 효과는 이미지가 확장하면서 변경되는 효과를 만듭니다.
이렇게 슬라이더 배경을 디자인할 때 전환 기간을 크게 잡으면 이미지가 바뀔때 오버레이 되는 효과를 만들 수 있다는 것도 확인해 보시면 도움이 됩니다.
다음은 해당 섹션의 기본 셋팅 값입니다. 웹사이트 사이즈를 좌우 1300px로 잡기 위해 섹션 최대값을 1500으로 잡고 좌우 마진을 100px로 잡아 1300px을 맞췄습니다.
배경 화면은 전체 화면으로 디자인 하기 위에서 스크레치 섹션을 선택한 상태란 걸 확인할 수 있습니다.
앞서 이야기 한 것 처럼 좌우 여백을 100으로 잡았고, 섹션 상단 여백을 250, 하단을 50으로 잡았는데, 그 이유는 현재는 디자인하지 않았지만 추후 로고와 메뉴가 있어야 할 공간을 확보하고, 기본적으로 디자인 컨셉을 정돈되게 보이도록 하단에 폰트를 배치하기 위해서 입니다.
이렇게 헤더 섹션에서 슬라이더 이미지를 디자인 했습니다.
이번 병원 홈페이지 디자인 과정에는 심플함과 함께 방문자 동선을 고려한 콘텐츠 배치를 위주로 알려드릴 예정인데요, 슬라이더 안에 들어간 텍스트 디자인 과정까지 확인한 후에 웹사이트 이미지를 선명하게 하는 간단한 방법도 알려 드리도록 하겠습니다.
폰트 디자인, 두 가지 컬러 타이틀 만드는 법
메인 헤더이기 때문에 메인 타이틀을 강조하기 위해 두 가지 컬러를 이용한 디자인을 해 보았습니다. 워드프레스 엘리멘터 기능에도 투 컬러 위젯을 지원하고 있지만 글자 가운데 컬러를 넣은 기능을 지원하지 않습니다.따라서 해당 패턴으로 폰트 디자인을 하려면 다음과 같은 Html 코드를 참고 바랍니다.
병원 <span style="color:#E7D46A">홈페이지 제작</span> 가이드
상단에 코드를 제목 타이틀에 입력하면 투톤 컬러의 타이틀이 완성되는데, 이를 응용하면 다양한 위치에 다양한 컬러를 넣어 폰트 디자인을 할 수 있을 것입니다.
이외에 폰트 디자인 과정에서 사용한 폰트 종류는 "프리텐다드" 한글 폰트이며, 필요에 따라 병원 홈페이지 디자인에서는 명조체를 사용하셔도 좋습니다.
텍스트와 폰트 컬러는 계층 구조를 위해 조금 차이를 두었지만 실제 폰트 크기와 두께에서 차이가 있기에 동일한 화이트 컬러로 사용해도 무방합니다.
이미지 선명도와 압축을 위한 포토샵 사용
몇 분이 이미지 관련 질문에서 선명한 이미지를 저용량으로 사용하는 방법을 물어보셔서 오늘 디자인 팁으로 포토샵 "하이패스" 기능을 알려 드리려고 합니다.포토샵이 지원하는 이미지 저장 방식에는 웹 전용 "레거시" 저장 방식이 있습니다. 이와 함께 이미지를 포토샵에 올리고 하이패스 기능을 이용해 선명도를 높이고 웹사이트에 사용하는 방법이 있는데요, 자세한 설명은 유튜브 검색에서 "하이패스" 기능 사용법을 검색하면 쉽게 배울 수 있습니다.
여기까지 병원 홈페이지 디자인 첫 번째 시간으로 메인 헤더 디자인 과정을 설명해 드렸습니다. 앞으로도 계속 단계별로 웹사이트 하나를 디자인하는 과정을 설명해 드릴테니 기대해 주세요.
관련 문의는 댓글이나 카카오 채널을 이용하시면 친절히 설명해 드리겠습니다.
실제 디자인 확인하기
전체 0
워드프레스 홈페이지 제작
OMG DESIGN 웹 제작 솔루션에 문의하세요.
혼자서 홈페이지를 만들고 운영할 수 있고
브랜드를 세상과 연결하는 방법을 배우세요
혼자서 홈페이지를 만들고 운영할 수 있고
브랜드를 세상과 연결하는 방법을 배우세요
워드프레스 반응형 디자인
워드프레스 제작 실무에서 핵심은 U/UX 디자인이라 말해요, 하지만 워드프레스가 기본적으로 제공하는 레이 아웃에 고객은 만족하지 않습니다.
반응형 디자인에 필요한 인사이트를 제공합니다.
이젠, 브랜딩 하세요
워드프레스 웹사이트는 온드 미디어로 디자인하고 기능할 때, 가장 효과적인 마케팅 도구가 됩니다. 광고가 아닌 브랜딩을 해야할 때 우리의 이야기가 당신을 도울 수 있습니다.
웹사이트 검색엔진 최적화
구글 상위 노출을 위한 최적화 정보가 도움이 될 수 있지만 실제로 당신이 집중해야 하는 건, 고객을 위한 최적화 웹사이트를 구축하는 것입니다.
우리는 이것에 집중합니다.
오프라인 스터디가 필요한가요?
2024, 워드프레스 강의
OMG DESIGN 2024 RECTURE
인천광역시, 광주광역시 두 곳에서 2024년 워드프레스 기초 및 디자인 강의를 경험할 수 있습니다.
➤ 참가 신청 – 2주 전, 사전 예약
➤ 3인 클래스, 1:1 특강 신청도 가능
➤ 커리큘럼
- 웹 목표 설정, 호스팅, 세팅
- 최적화 페이지 생성과 글쓰기
- 엘리멘터 빌더로 디자인하기
- 반응형 및 UI/UX 디자인
- 결과물 컨펌
