웹디자인에서 자주쓰이는 리본만들기 (원본소스 포함)

이번엔 사진이나 리스트노출에 자주 사용하는 리본을 만들어 보겠습니다. 이번강좌도 어김없이 해외강좌를 번역 보강하여
제공드리는점 알려드립니다.

리본 캔버스 설정

500 × 500 픽셀 캔버스을 만들어 리본을 만들어보겠습니다.

 

배경 텍스쳐만들기

배경텍스쳐가 되는레이어을 하나추가하여  색상을 # cccccc로 적용합니다. 이제 필터 이동> 노이즈> 노이즈 추가
를 선택후 10%의 양으로 가우시안을 설정합니다. 그리고 배경 텍스쳐의 레이어 불투명도를 15%로 변경합니다.
이부분은 완성에서 그리 중요한 내용은 아닙니다. 다만 나중에 리본위쪽으로 배치하여 질감을 줄수도 있습니다.

 

이미지 외각틀 만들기

이제 사진이 들어갈 부분의 형태를 만들어 보겠습니다. 캔버스의 중앙에 사각박스를 배치합니다.

 사진외각을 보기좋게 효과를 줘보겠습니다.  하단 설정되로 레이어스타일을 넣어주세요

 

리본만들기

리본을 배치해보겠습니다. 사각형 도구를 사용하여 하단과 같이 35도 각도로 그려줍니다.
회전은 자유 변형 도구 CTRL + T) 또는Transfrom을 편집으로 회전시켜주세요.

리본의 필요없는 부분을 감춰보겠습니다.
다음포탈 사진이 들어간 사각상자 레이어를 CTRL+왼쪽마우스를 누르면 외각부분이 선택이 됩니다.
그상태에서 상단메뉴 select -> modify -> expand를 클릭후 4픽셀로 선택하면 선택된 부분이 조금 늘어납니다.
그리고 리본레이어를 클릭후 오른쪽 마우스을 누른다음에 create clipping mask을 눌러주시면 불필요한 리본의 부분이 감춰지는게 보여지실껍니다.

이제 얼추 형태는 나왔네요. 본격적으로 리본느낌이 나도록 효과를 주겠습니다. 리본레이어를 더블클릭하여
하단 레이어 스타일 설정처럼 입력해 보세요.

 

그림자는 의외로 간단합니다. 최하단 배경레이어 바로위에 새로운 그림자레이어를 만든후
10픽셀의 붙으로 살포시 찍어주세요. 그럼 끝~

 

텍스트 효과넣기

글자폰트는 좀 굵은글자로 원하시는걸로 선택해주시고 리본위에 배치해주세요.
저는 Heineken이라는 폰트를 사용하여 배치했습니다.

 
글자를 배경에 맞게 효과를 줘보겠습니다. (글자색상 : 6c0d00)

 

리본 봉제부분 만들기

텍스트 도구를 이용하여 하이픈을 적당히 입력합니다. 그리고 레이어 스타일에서 샤도우부분에 색상 : 화이트 투명도 : 75
거리 : 1 싸이즈 : 0를 주고 리본위에 배치합니다.

 

마지막으로 리본을 감췄던 방법과 동일하게 사각외각라인에 4픽셀을 확장하여
봉제선부분에 퀵마스크를 씌워주면 완성입니다.~

 

본 제작물은 사용범위에 제한은 없지만 무단 재배포를 금지합니다.
리본 원본소스 다운받기

ribbon.psd

이글이 도움이 많이 되셨다면 하단 추천 꾹 눌러주세요..
댓글은 다음 강좌에 많은 힘이됩니다. ^^

저작자표시변경금지

'웹싸이트 디자인강좌' 카테고리의 다른 글

포토샵과 HTML/CSS을 이용하여 홈페이지를 만드는 강좌 모음  (2)	2014.10.20
[ 이벤트 팝업소스 ] 활용도 높은 웹싸이트 전체화면 레이어 팝업 소스  (31)	2012.08.22
[ 플래쉬 무료 프로그램 ] 1분만에 플래쉬를 제작할수 있는 초간단 플래쉬 무료 프로그램  (0)	2012.05.15
[ 포토샵 타이포그래피 ] 타이포그래피 폰트 조합공식 기초강좌  (14)	2012.03.14
웹디자인에서 자주쓰이는 리본만들기 (원본소스 포함)  (12)	2012.02.07
홈페이지 인터페이스 정말 쉽게 만들어보자  (31)	2011.12.28