디지털콘텐츠 No.1 (주)아사달 디자인센터
내정보 SI 도메인 호스팅 디자인몰 솔루션몰 홈페이지몰 모바일 디자인센터 게임 고객지원
로그인 회원가입 장바구니 주문내역
트렌드뷰 웹강좌 자료실
배경이미지
베스트 키워드
주간 월간 연간
검색  상세검색
이벤트 디자이너를 위한 디자인 세상 아사달이 만들어갑니다.
디자인센터 보유 현황 오늘어제이번달지난달누적
웹기획
HTML 사용법
포토샵 사용법
일러스트 사용법
플래시 사용법
일러스트 만들기
일러스트 배경 만들기
일러스트 아이콘 만들기
일러스트 그래픽 만들기
편집사진 만들기
배경 편집사진 만들기
사물 편집사진 만들기
플래시 모션 만들기
플래시 스크립트 만들기
웹구성 요소 만들기
  - 버튼 만들기
  - 타이틀바 만들기
  - 메뉴 만들기(가로)
  - 메뉴 만들기(세로)
  - 배너 만들기
  - 메인비주얼만들기
  - 팝업만들기1
  - 팝업만들기2
  - 팝업만들기3
  - 팝업만들기4
웹 페이지 만들기
비즈니스 홈페이지 만들기
생활 홈페이지 만들기
쇼핑몰 홈페이지 만들기
타이틀바 만들기
Home > 디자인 센터 > 웹강좌 > 웹구성 요소 만들기 > 타이틀바 만들기
타이틀바 만들기1 타이틀바 만들기2

2. 타이틀바 만들기

* 타이틀바(title bar)란?

- 시안 작업 시 특정영역을 강조하거나 전체 내용의 제목이 되는 이미지입니다. 타이틀바는 제작하고자 하는 시안과 동일한 색상 콘셉트를 바탕으로 적절한 색상과 서체를 조합하여 제작합니다. 


[디자인 예시]


[실전제작]



 먼저 패턴을 제작해 보도록 하겠습니다. File>New(Ctrl+N)하여 투명한 새로운 작업창(10X10)을 엽니다.



 툴박스의 Rectangular Marqee Tool(M)을 이용하여 그림 ①과 같이 가로 5px의 사각틀을 만든 뒤 흰색으로 채워주고 Ctrl+D를 눌러 선택영역을 해제합니다. ②번 Edit>Define Pattern을 선택하여 ③번과 같이 line 이라는 Name을 주어 패턴으로 등록합니다.



 File>New(Ctrl+N)하여 타이틀바가 제작될 새로운 작업창(480X45)을 엽니다.



 전경색을 #A4C900으로 설정해 준 뒤, 툴박스에서 Rounded Rectangle Tool(U)을 선택합니다. Radius 값을 50px로 지정하고 도큐먼트에서 화살표 방향으로 드래그하여 셰이프를 만들어 줍니다.



 Layer>Layer Style>Gradient Overlay를 선택합니다. 두 번째 그림과 같은 대화상자가 나타나면 ①번 부분을 클릭하여 ②번에 #A4C900 ③번에 #A89AC03를 각각 설정해 주고 ②번의 Color Stop을 오른쪽으로 이동해 줍니다.





 이제 패턴을 적용하겠습니다. 일단 New Layer를 생성해준 뒤, Ctrl+A를 눌러 전체영역을 활성화시켜 줍니다. 그런 다음 Edit>Fill을 선택합니다. 아래 그림과 같은 대화상자가 나오면 Pattern을 선택하고, Custom Pattern의 화살표 부분을 눌러서 처음에 제작해 둔 line 패턴을 찾아 선택해 줍니다.



 아래 그림과 같은 결과가 나오면 Ctrl+D를 눌러 선택영역을 해제시켜 줍니다.



 패턴을 사선으로 만들어 주기 위해서 Edit>Free Transform(Ctrl+T)를 선택해준 뒤, ①번 부분에 -30 값을 설정해 주고 Enter를 누릅니다.



 그리고 패턴의 불필요한 부분을 삭제해 주기 위해서 Ctrl+Shape 1 레이어를 클릭하여 선택영역을 활성화 시켜 준 뒤, Select>Inverse를 클릭하여 선택영역을 반전시켜 줍니다. 그런 다음 키보드의 Delete키를 눌러 삭제해 주고 Ctrl+D를 눌러 활성화된 선택영역을 해제시킵니다.



하단 메뉴 배경 이미지
하단 메뉴 배경 이미지 회사소개 사진모음 협력사 오시는길 이용약관 개인정보취급방침 전화상담안내 게시판문의 모바일 한국어 라인 이미지 日本語 라인 이미지 中文 라인 이미지 ENGLISH 라인 이미지 사이트맵 하단 메뉴 배경 이미지
하단 메뉴 배경 이미지
하단 메뉴 배경 이미지 사이트명 : 아사달닷컴 | 회사명 : (주)아사달 | 대표이사 : 서창녕 | 대표전화 : 1544-8442 | 팩스번호 : 02-2026-2008
사업자등록번호 : 206-81-24351 | 법인등록번호 : 110111-1940504 | 통신판매업신고 : 제18-890호 | 벤처확인번호 : 051134532200563
(우편번호 : 08507) 서울시 금천구 가산디지털1로 168 우림라이온스밸리 A동 8층 (주)아사달
(우편번호 : 153-786) 서울시 금천구 가산동 371-28번지 우림라이온스밸리 A동 8층 (주)아사달
Copyright ⓒ asadal.com All rights reserved.
인터넷 익스플로어 구글 크롬 모질라 파이어폭스
애플 사파리 오페라 넷스케이프
맨위로
디지털콘텐츠 No.1 (주)아사달