워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

블로그 인기글

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그

어도비 뮤즈 베타의 장점은 몇번의 클릭만으로 이미지에 그림자를 만들 수 있고 포토샵 PSD 파일을 지원하여 레이어형태의 이미지를 삽입할 수 있습니다. 또한 도형에 베벨효과와 글로우 효과 등 포토샵에서 사용되는 레이어스타일 효과를 줄 수도 있습니다. 사각형의 모서리를 둥글게 할 수도 있는데 이러한 효과는 CSS3에서만 가능하여 코딩을 하자면 한참 걸립니다. CSS3는 일부 브라우저는 지원하지 않기 때문에 현재로서는 사용하기 어렵지만 어도비 뮤즈 베타로 작업하면 인터넷익스플로러 7버전까지 지원하게 됩니다. IE는 웹개발자들에겐 참 난감한 브라우저입니다. 다른 브라우저는 다 지원하는데 유독 IE만 지원하지 않는 것이 많습니다. 그것을 가능하게 할 수 있는 것이 어도비 뮤즈 베타입니다. 이번 글에서는 이러한 효과와 메뉴바 디자인 하는 방법을 알아봅니다.

 
이전 글에 이어서 진행합니다 헤더영역을 작업하므로 매스터페이지를 더블클릭하여 디자인뷰에 불러옵니다. 상단의 로고이미지를 선택툴로 선택하고 콘트롤패널에서 Effects를 클릭하면 3가지 메뉴가 나옵니다. 섀도우를 선택하고 On에 체크해서 그림자 색상을 선택하고 여러가지 수치를 조정합니다. 포토샵처럼 글자위에 마우스를 올리면 양쪽화살표가 나와서 클릭드래그하는 기능은 없고 두개의 세모를 클릭하거나 수치를 직접입력하거나 또는 수치입력란을 클릭하고 상하방향키를 누르면 수치가 변동됩니다. 베벨효과도 마찬가지로 입력해주고 필요에 따라 글로우 효과도 줄 수 있습니다.


이미지를 두개를 한꺼번에 선택해서 효과를 주는 것도 가능합니다. 1과 2의 이미지는 한쌍이므로 Shift키를 누른채 두개의 이미지를 클릭하면 둘다 선택이 됩니다. 그림자효과를 주고 베벨효과를 줍니다. 베벨효과는 두 이미지의 경계선인 5에 효과가 나타나므로 좋지 않습니다. 시험삼아 해봤습니다.


메뉴에서 파일-Place Photoshop Button을 선택하면 브라우저 창이 나옵니다. btn-share.psd 이미지를 선택하면 포토샵 옵션창이 뜹니다. 버튼은 4가지 상태(State)가 있는데 평상시의 이미지, 마우스 오버시, 마우스 다운시, 활성 상태 등 4가지 상태에 따라 버튼효과를 달리할 수 있습니다. 여기서는 3가지 이미지만 있습니다. OK를 클릭하면 커서에 이미지가 따라다닙니다. 2처럼 이미지를 보면 테두리가 보이지만 클릭하면 없어집니다. 2의 위치에 클릭하고 프리뷰모드로 가서 마우스 오버하면 이미지가 변합니다.


코너를 둥글게 하려면 사각형툴로 이미지를 만들고 3의 아이콘을 클릭합니다. 모서리마다 4개의 아이콘이 있는데 원하는대로 선택해서 4의 수치를 변화시키면 됩니다. 시험삼아 해봤으니 Delete키를 눌러 제거하고 메뉴작업으로 들어갑니다.


메뉴에서 윈도우-위젯을 선택하면 위젯패널이 나옵니다. 메뉴의 작은 세모를 클릭해서 트리를 열면 3가지 메뉴형태가 나옵니다. 이미 메뉴바가 있으니 4의 Horizontal을 선택하고 클릭드래그해서 화면에 놓으면 3가지 메뉴가 나옵니다. 플랜뷰를 클릭해서 보면 3가지 메뉴밖에 없으므로 하나를 더 추가하여 About라는 이름을 입력하고 다시 마스터탭을 클릭하면 6처럼 새로운 메뉴가 만들어집니다. 클릭드래그해서 7의 메뉴바 위에 올려놓습니다.


텍스트패널을 열고 2를 클릭하면 폰트 리스트가 나옵니다. 상단에 웹세이프(Web Safe) 폰트 목록이 나오고 그 다음에 시스템폰트가 나옵니다. 웹세이프 폰트는 거의 모든 컴퓨터에 공통적으로 설치되어있는 폰트라서 이 폰트를 사용하면 어떤 컴퓨터라도 같은 모양으로 나오게 됩니다. 스크롤바를 내려서 시스템폰트를 사용한 경우 어도비 뮤즈 베타는 이를 이미지화 시키고 HTML 코드에 alt text로 모든 글자를 첨부하게 해서 인터넷검색시 검색되도록 하고 있습니다. 메뉴얼에는 이렇게 나오는데 린다닷컴 강좌는 이미지화 된다는 말만 있고 주의하라는 내용뿐인데 아직 확인은 안해봤습니다. 나중에 텍스트부분 입력할때 자세한 설명이 이어집니다. 어쨋든 시스템 폰트를 사용하면 이미지화 되고 하단에 이미지화됐다는 의미로 T라는 큰 글자와 이미지 아이콘이 만들어집니다.
5에서 글자의 크기를 높이고 6을 클릭하여 볼드체로 바꿉니다. 7을 클릭하여 흰색을 선택한 다음 스페이싱패널을 열고 거터부분에서 수치를 올려 단어간의 간격을 벌려줍니다.


프리뷰모드를 선택하여 웹상에서 어떻게 보여지는지 확인해봅니다. 메뉴에 마우스를 오버하면 배경이 1처럼 회색으로 나옵니다. 이를 투명하게 수정해줘야합니다. 다시 디자인 모드로 와서 홈버튼부분만 선택합니다. 다른 곳을 클릭한 다음 홈버튼 부분을 한번 클릭하고 좀 기다렸다가 다시 클릭하면 선택됩니다. 하나의 버튼만 수정하면 다른 버튼도 다 수정이 되는데 이것이 가능한 것은 3의 아이콘을 클릭하면 옵션메뉴가 나옵니다. 4의 Edit Together에 체크가 되어있어야 합니다. 

States패널을 열고 롤오버를 선택한 다음 Fill패널을 열어 컬러를 클릭하여 사선아이콘을 선택하면 9의 배경이미지가 사라집니다. 10도 마찬가지 방법으로 배경을 없애줍니다. 11은 액티브상태인데 다른 이미지를 넣어봅니다. 11을 선택하고 마찬가지로 배경색상을 없애준 다음 12의 폴더아이콘을 클릭해서 브라우저에서 top-nav-over.png파일을 선택합니다.


Fitting 은 Original Size로 선택하고 포지션은 중앙점을 클릭합니다. 이미지가 커서 다 보이지 않으니 2의 조절점을 클릭드래그해서 아래로 늘려줍니다. 상방향키를 여러번 눌러서 글자가 메뉴바의 중간에 오도록 재배치합니다. 프리뷰 버튼을 클릭하여 웹상에서 어떻게 보이는지 확인해봅니다. 두번째 메뉴를 클릭하니 이미지가 잘 나옵니다.

어도비 뮤즈 베타의 세부 디자인 과정은 다음 글로 계속 됩니다.