• 로그인하시면 마일리지와
  • e코인 정보를 확인하실수있습니다.

팁&노하우 팁&노하우 사용자 인터페이스 디자인
콘텐츠명 사용자 인터페이스 디자인
작가
getfile
등록일 2012-03-29
조회수 412
라이센스 비상업적라이센스 콘텐츠 라이센스내용보기
결제금액 500
고유코드 T22357
오픈마켓 콘텐츠는 회원과 회원간의 거래입니다. 콘텐츠의 이상유무에 대해서 겟화일은 어떠한 책임도 지지 않습니다.
구매전 궁금하신점은 해당판매자에게 콘텐츠 문의를 하신 후 신중히 구매하시기 바랍니다.
오픈마켓에 등록된 콘텐츠는 개별회원이 등록한 것으로서, 겟화일은 중계시스템만을 제공하며 문제발생시 일체의 책임을 지지 않습니다.
제작툴 포토샵 
구성내용 워드 doc 
검색키워드 튜토리얼, 튜터리얼, 강좌, 포토샵, 버튼, 인터페이스, 사용자 
상세보기
 
콘텐츠 상세설명

버튼 사용자 인터페이스 디자인STRONG>SPAN>


버튼을 만드는 것은 초보자에게 포토샵을 배우는데 가장 쉬운 방법입니다. 오늘, 저희는 Adobe 포토샵을 사용하는 웹 버튼 생성 방법에 대하여 알려드릴 것입니다. 이 튜토리얼은 여러분께 여러분의 웹사이트나 모바일 어플리케이션의 인터페이스에 사용되는 버튼 생성 방법에 대해 알려 드릴 것 입니다. 저는 이 버튼 사용자 인터페이스 디자인의 튜토리얼을 만족하게 되길 바랍니다.P>

 
자 이제 웹 버튼을 만들어 봅시다P>


Step 1STRONG>SPAN>P>


포토샵을 열고 새로운 포토샵 문서를 생성합니다. 새로운 문서는 #ffffff 바탕의 흰색컬러로 된520x520px의 새로운 문서입니다.

P>

 
웹 버튼 튜토리얼P>

 P>


Step 2STRONG>SPAN>P>


Rounded Rectangle Tool의 사용하여 흰색의 직사각형 하나를 생성하고, Base로 레이어의 이름을 짓습니다. 사이즈는 70px, radius 사이즈는 10px로 된 170px의 직사각형입니다. Layer>layer style 메뉴로 이동하고 이전의 기본 레이어에 #b6b1b1의 스트로크를 생성합니다.

 
Rounded Rectangle Tool사용P>

 P>



Step 3STRONG>SPAN>P>


다른 직사각형을 생성하기 위해 #a280a5 색으로 Rounded Rectangle Tool을 사용합니다. 직사각형 사이즈는 60px*60px이고 radius사이즈는 10px입니다.

P>

 
웹버튼 생성하기

이제 저희는 다음 이 스텝에 따르는 이 레이어(안쪽 직사각형)에서 몇 개의 Blending Options를 적용합니다.
 


안쪽 직사각형 레이어 스타일P>



빗금 장식

P>

 


빗금 처리 및 장식(Bevel and Emboss)

P>

 


그라디언트 씌우기


 P>

스트로크

이 블렌딩 옵션을 적용 후 아래와 같이 보여지는 놀라운 효과를 얻을 수 있습니다.

P>

 P>

블렌딩 옵션 적용P>




Step 4STRONG>SPAN>P>


저희가 선택한 Type tool혹은 Texttool(T)를 선택하고 여러분이 원하는 문자를 입력하는 단계입니다. 저희는 아래와 같이 보여지는 Cabin font로 20폰트사이즈인Home 텍스트를 썼습니다.


 
Home 텍스트 입력P>

 P>


Step 5STRONG>SPAN>P>


자 우리는 Drop Shadow를 이 텍스트에 적용할 것입니다. Layer > Layer style로 이동하고 #6e3972색으로 drop shadow를 추가합니다.

 
드랍 쉐도우P>


자 마침내 우리는 성공적인 웹 버튼을 얻었습니다.P>

최종 이미지

 P>

 P>


 P>

댓글달기
getfile 님의 다른 작품보기