'에어로'에 해당되는 글 1건

  1. 2007.12.12 쉽게 비스타 스타일을 적용해 봅시다. (5)

쉽게 비스타 스타일을 적용해 봅시다.

View Comments

비스타 그라데이션 스타일 만들기

XP에서 윈도우 비스타(Windows Vista)로 넘어오게 되면서, 눈에 확들어오는 변화는, 참으로 이뻐진(?) 그래픽 입니다.
좀더 아기자기하고 세밀해진 아이콘과, 테두리에 투명창을 적용한 것들...이쁜것을 좋아하는 사람들에게는 혹~하는 부분입니다.
이런 그래픽적 요소 중의 하나가, 비스타만의 그라데이션(Gradation)을 사용하는 것입니다.

그라데이션이 뭐지?..라는 분들은 마이크로소프트 윈도우즈 홈페이지를 한번 방분해 보시기 바랍니다.
윗 쪽에 메인 메뉴를 고르는 부분이 검은색 계열의 그라데이션으로 표시되어 있죠?
이러한 그라데이션이 통일성 있게, 비스타 내부에도 적용되어 있습니다.

그래서 오늘은 이러한 그라데이션 이미지를 만드는 것을 한번 알아 보겠습니다.
완성작은 바로 이것~! 입니다.
사용자 삽입 이미지

이러한 이미지 파일은, 실제로 사이드바 가젯을 제작 할때, 배경이미지로 훌륭하게 활용될 수 있습니다.
또한 블로그나 홈페이지를 만들때도, 버튼이나 메뉴바 제작시에 잘 활용 될 수 있겠죠.
제 블로그의 스킨도, 이러한 그라데이션을 기본요소로 사용하여 만들어진 것 입니다.

시작하기 전에, 이 방법은 Talk Mania.com의 튜토리얼을 기본으로 해서, 제가 간단한 부분만 뽑아서 만든 것입니다.
사용법은 간단하게 푸른색 계열로 제작 되었으니, 용도에 맞게 크기나 색깔은 응용하셔서 사용하시면 됩니다.
마지막으로 준비물은, 포토샵~! 입니다.

일단 포토샵에서 아래와 같이 300X200 픽셀짜리의 새로운 파일을 하나 만듭니다.
사용자 삽입 이미지


만들어진 바탕에 푸른색으로 된 색을 칠해 봅시다.
색을 칠하는 것은 포토샵의 페인트통 툴을 사용하시면 됩니다.
사용자 삽입 이미지


그리고, 새로운 레이어를 하나 추가 한 뒤에, 사각형 툴을 이용해서 사각형을 그려 줍니다.
그냥 사작형이 아니라, 모서리가 둥근 직사각형 도구 툴로 해줍니다.
이 툴은 사각형 툴을 길게 클릭하면, 추가 메뉴로 확인 할 수 있습니다.
사용자 삽입 이미지


그리고 둥근 모서리의 반경은 5 픽셀, 색상은 흰색으로 설정 하시면 됩니다.
사용자 삽입 이미지


원하는 크기로 죽~드래그를 해서 사각형을 그립니다.
사용자 삽입 이미지


레이어아리콘을 더블 클릭하여 테두리 선을 만들어 줍니다.
레이어 스타일 창에서 "선"을 클릭한 다음에, 아래와 같이 설정 값들을 넣어 줍니다.
또한 색상에서 색이 있는 부분을 클릭하면, 테두리의 색을 결정할 수 있으며, 아래의 그림과 같이 색상코드"#a9e0ff"를 넣어 줍니다.
사용자 삽입 이미지



레이어가 있는 곳에서, 우측상단의 "칠" 항목을 0%로 바꾸어 줍니다.
사용자 삽입 이미지


테두리를 그린, 모서리가 둥근 사각형 만을 선택 합니다.
선택은, Ctrl키를 누른 상태에서 레이어 아이콘을 선택하면 됩니다.
그리고 Ctrl+Shift+Alt+N을 누르면, 아래와 같이 우리가 그린 사각형 위에 새로운 레이어가 생성됩니다.
첫번째 레이어는 단지 테두리를 설정하는 레이어이고, 마지막 이 레이어의 속성을 조절해서 최종적으로 그라데이션을 주게 됩니다.
사용자 삽입 이미지


사각형이 선택되어진 마지막 레이어에 흰색으로 칠해 줍니다.
사용자 삽입 이미지


자~! 이제 마지막 레이어의 속성을 조절해 봅시다!
첫번째로, 레이어 스타일 중 내부그림자 항목을 아래의 설정값으로 맞추어 줍니다.
구조 에서의 거리는, 사각형 윗부분의 흐린 것의 높이를 정해주는 것이므로, 자신의 사각형 크기에 맞게 조절해 주시면 됩니다.
사용자 삽입 이미지


두번째로 조절할 스타일은, 내부광선 입니다.
마찬가지로 아래의 이미지와 똑같이, 설정값을 조절해 줍니다.
사용자 삽입 이미지


세번째는 색상오버레이 입니다.
선택하는 색상의 색상 코드는 "#50a0f5"입니다.
사용자 삽입 이미지


그라디언트 오버레이 입니다.
역시 아래의 설정 값으로 설정해 줍니다.
그러나, 기존에 포토샵에 있는 그라디언트를 사용하는 것이 아니기 때문에, 그라디언트의 종류를 고르기 위해서는 다음 이미지의 설명을 따라 하시면 됩니다.
사용자 삽입 이미지


그라디언트 옆의 그라디언트 패턴을 누르면, 그라디언트 편집기라는 팝업창이 뜹니다.
여기서 설정값은 아래와 같이 맞추어 주고, 좌측의 색깔도 아래와 같이 넣어 줍니다.
색상코드는 "#72c7ff"입니다.
사용자 삽입 이미지


마찬가지로 우측의 색상도 아래와 같이 설정해 주면 되고, 색상코드는 "#92d2ff"입니다.
사용자 삽입 이미지


그리고, 나중에 사용하실 것을 대비해서, 그라디언트를 저장해 놓는것이 좋을 듯합니다.^^
사용자 삽입 이미지


마지막으로 테두리의 색상과 설정을 조절해 줍니다.
색상코드는 "#1666C5"입니다.
사용자 삽입 이미지



자~! 완성이 되었습니다.
그리고, 홈페이지나, 다른 용도로 사용하기 위해 다른이름으로 저장해 줍니다.
사용자 삽입 이미지



다른 이름으로 저장된, 파일을 불러온 뒤에, 적절한 크기로 늘이거나 줄이거나 해서 사용하시면 됩니다.
혹시, 참고하시라고 수정가능한 포토샵 파일을 올려 드립니다.
사용자 삽입 이미지



이상으로 비스타 그라데이션을 만드는 법을 알아 보았습니다.
자신의 용도에 따라, 색깔이나 크기 혹은 세부설정을 바꿔가며 사용해 본다면 아주 이쁜(?) 재료거리가 될 수 있을 듯 합니다~!!

Daum 블로거뉴스
블로거뉴스에서 이 포스트를 추천해주세요.
신고

5 Comments (+add yours?)

트랙백0 Tracbacks (+view to the desc.)

Newer Entries Older Entries

티스토리 툴바