홈페이지 인터페이스 정말 쉽게 만들어보자

웹통을 개설하고 첫번째 포스팅입니다.~
저도 비록 잘하진 못하지만 이제 시작하시는 웹디분들에게 조금이나마 도움이 되고자 웹통을 만들었습니다.
대부분의 강좌는 해외 유명강좌를 번역하거나 실무에서 사용되는 유용한 팁을 소개해드리는 형식으로 포스팅할 예정입니다.~
많은 관심 부탁드립니다.~


웹통이 전하는 심플한 홈페이지 인터페이스 디자인

STEP 1

먼저  포토샵을 실행후 아래와 같이 설정합니다.

STEP 2

배경이 되는 레이어를 선택후 더블클릭하시면 레이어 스타일이 화면에 나옵니다.

레이어 스타일 좌측에 COLOR OVERLAY 색상을 진한 갈색으로 선택해주세요
 

STEP 3

새로운 레이어를 만든후 상단 적당한 부분에 직사각형 박스를 만들어 줍니다. 

STEP 4

다시 새로운 레이어를 추가한후 원형 선택툴을 이용하여 타원을 만들어줍니다.

STEP 5

타원레이어를 흰색띠레이어 아래로 이동한후 필터-가우시안 블러를 30정도 주면 아래와 같이 그림자 처럼 되요~
왠지 입체감이 느껴지시나요?

STEP 6

자~ 더욱더 입체감이 느껴지도록 흰색띠 레이어를 더블클릭해주세요. 레이어 스타일에 그라데이션 오버레이를 선택하시면
하단그림 처럼 설정화면이 나옵니다. 스타일을 원형을 선택후 원하는 색상을 넣어주세요. 되도록 어두운색이 좋습니다.

STEP 7

움푹들어간 선을 만들어 보겠습니다. 레이어 폴더를 생성후 그안에 2~3픽셀정도의 선을 두개 만들고
위아래로 배치합니다. 하이라이트가 될부분은 밝은 레드로 색을 칠해주고 샤도우부분은 검정색상을
칠하면 입체감이 느껴지는 선이 완성됩니다.

선들이 들어있는 폴더를 선택후 마스크를 씌운후 원형 그라데이션을 이용하여 선 끝부분을 자연스럽게 날려줍니다.
(이부분은 캡쳐를 못했습니다 ㅜㅜ 원본파일을 보고 확인해주세요)
 

STEP 8

동일한 방식으로 새로선을 만드시면 하단과같이 버튼모양이 됩니다. 간단하죠?

STEP 9

이제 버턴칸 안에 원하시는 글자를 넣으신후 레이어 스타일에서 이너샤도우를 하단 수치만큼 입력하면
안쪽으로 살짝 들어간 텍스트가 만들어집니다.

STEP 10

메인 카피부분은 세가지 효과를 줬습니다. 우선 outer glow 선택후 블랙색상으로 자연스럽게 입체효과를 줍니다.
그리고 그라데이션 오버레이를 위에서 아래방향으로 선택해준후 적용 마지막으로 스트로크(선) 을 1정도로 화이트로
지정하시면 하단과 같은 효과가 납니다. 전혀 어렵지 않아요~ ㅜㅡ

STEP 11

그디어 마지막 스탭입니다. 배경이되는 띠박스를 선택후 ctrl+e 을 눌러서 일반레이어로 만들어줍니다.
그리고 다시 더블클릭후 레이어스타일에서 패턴오버레이를 선택합니다. 설정은 블랜드모드는 컬러본으로
패턴은 첨부된 원본파일에 있는 도트패턴을 선택하면 짜잔...완성입니다.

만드는데 꼬박 3시간 걸렸습니다. 하면서 딱 5번정도 때려치울까 했지만 다시 마음을 잡고 만들습니다.
비록 이 강좌가 별내용이 없더라도 처음 시작하시는 분들에게 조금이라도 도움이 되었으면 좋겠습니다.

원본파일을 다운받으시는 분들은 덧글 꼭 남겨주시구요.
강좌를 끝까지 읽어주신분들 하단 다음뷰 추천 꼭 눌러시면 다음강좌 제작할때 많은 힘이 날것같네요

 

인터페이스_소스.psd