심플하고 고급스러운 여성의 느낌을 강조한 꽃 일러스트 이미지와 부드러운 패턴 이미지 및 빛 효과를 조합하여 제작한 병원 홈페이지입니다. 전체적으로 딱딱하고 획일적인 콘셉트를 탈피하여 차분함과 함께 세련미가 더욱 강조되었습니다.

[메인 페이지]

① 메뉴(Menu, Navigation) 만들기

- 해상도 1024*768에 맞춰서 제작할 새로운 문서(document)를 엽니다.

- 먼저 색상 값을 적절히 혼합한 전체 디자인 시안의 배경 이미지를 제작한 후 배치합니다.

- 로고(logo)는 병원(성형외과) 시안의 특성에 맞는 심볼 이미지와 적절한 서체를 사용하여 제작하여 왼쪽 상단에 배치합니다. 현재 시안 로고에 사용된 국문 서체는 Rix비타민 L체입니다. 로고의 특성에 따라 색상 및 효과를 조절하여 자칫 밋밋할 수 있는 디자인을 다듬어 줍니다.

- 오른쪽 상단에 전체적인 콘셉트와 어울리는 색상으로 블럭(block)을 만들고 HOME, SITEMAP, CONTACT US 등의 텍스트 메뉴(text menu)를 배치합니다.

- 병원(성형외과) 시안의 상단 메뉴의 텍스트(ABOUT CLINIC, BEAUTY CLINIC, COUNSELING, RESERVATION, DATAROOM)를 배치합니다. 현재 시안 메뉴에 쓰인 국문서체는 Rix고딕 B 서체이며, 영문 서체는 Microsoft Yi Baiti 서체입니다.

- ‘ABOUT CLINIC’ 클릭 시 나타나는 서브메뉴(인사말, 의료진소개, 원장약력, 둘러보기, 진료안내, 오시는길)를 배치합니다.

② 메인비주얼(Main Visual) 만들기

- 메인비주얼에 사용될 병원(성형외과)과 관련된 꽃, 나비, 패턴 일러스트 이미지와 반짝이 효과를 추가할 일러스트 이미지를 준비합니다.

- 중앙에 일러스트 패턴 이미지를 배치한 후 비주얼 좌측에 꽃과 나비 일러스트 이미지를 배치합니다.

- 배치된 일러스트 이미지 위에 빛과 반짝이 효과를 추가하여 부드럽고 화사한 느낌을 더해줍니다.

- 효과 레이어의 속성을 Screen으로 설정하고 Opacity 값을 75%로 적용합니다.

- 우측 하단 부분에 병원 시술 분야와 관련된 배너(턱수술, 눈수술, 코수술 등)를 제작하여 배치합니다. 이미지를 누를 때마다 다른 이미지로 교체되도록 플래시로 제작할 배너입니다.

- 비활성화된 이미지 부분의 레이어 속성을 Luminosity로 설정하고 Opacity 값을 100%로 적용합니다.

- 우측 배너 상단에 전체적인 비주얼 콘셉트와 어울리는 색상 값을 사용하여 슬로건 텍스트를 적절히 배치하여 메인 비주얼 이미지를 완성합니다.

③ 콘텐츠(Contents) 만들기

- 먼저 콘텐츠 영역을 구분시키기 위해 흰 색의 배경 이미지를 적절하게 하단 부분에 추가한 후 자연스러운 조합을 위해 레이어의 속성을 Multiply로 설정하여 적용합니다.

- 게시물이 노출되는 'News&Notice' 게시판을 왼쪽에 배치합니다. 메인 디자인 완성 후 솔루션으로 게시판을 연동해야 하는 부분입니다.

- 'News&Notice' 게시판 하단에 전체적인 콘셉트와 어울리는 색상으로‘아사뷰티 가상성형체험’배너를 제작하여 배치합니다.

- 등록된 이미지 게시물이 노출되는‘명품성형갤러리’게시판을 중앙에 배치합니다. 메인 디자인 완성 후 솔루션으로 게시판을 연동해야 하는 부분입니다.

- 우측 여백 부분에 게시물이 노출되는‘아사뷰티수술후기’와‘아사뷰티상담실’게시판을 배치합니다. 각각의 게시판 타이틀 탭을 누를 때마다 연동되는 게시판이 바뀌도록 타이틀 이미지를 제작합니다. 메인 디자인 완성 후 솔루션으로 게시판을 연동해야 하는 부분입니다.

- 하단에 무게감이 느껴질 수 있도록 적갈색으로 영역을 만들고 카피라이트(Copyright) 내용을 넣어 카피라이트 부분을 완성합니다.