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




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


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

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번정도 때려치울까 했지만 다시 마음을 잡고 만들습니다.
비록 이 강좌가 별내용이 없더라도 처음 시작하시는 분들에게 조금이라도 도움이 되었으면 좋겠습니다.

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


 




신고
크리에이티브 커먼즈 라이선스
Creative Commons License
웹통 꼴랑모
웹싸이트 디자인강좌 2011.12.28 16:53

댓글을 달아 주세요

  1. Wallet 2012.09.13 15:38 신고  수정/삭제  댓글쓰기

    아주 잘 서면, 난 정말이 기사처럼, 감사합니다!

  2. 이야 2012.10.17 19:19 신고  수정/삭제  댓글쓰기

    정말 유용해요 감사합니다. 도움이 되었습니다

  3. ㄴㄴ 2013.01.26 03:10 신고  수정/삭제  댓글쓰기

    오. 라인이 저렇게 멋지다니요.. 감탄.. 감사합니당

  4. 크리스 2013.11.12 15:15 신고  수정/삭제  댓글쓰기

    저렇게 효과를 주는거군요! 좋은거 배워갑니다!

  5. 은주언니 2013.12.23 16:28 신고  수정/삭제  댓글쓰기

    큰 도움이 되었습니다^^ 이런 유용한 강좌가 몇개 없어서 아쉬울 뿐입니다..ㅠ

    • 웹통 꼴랑모 2013.12.24 15:12 신고  수정/삭제

      ^^ 내년에 강좌를 조금 보강할 계획입니다. 계힉되로 될지는 모르겠지만 좀더 노력해볼게요~ 2014년 항상 행복하고 건강하셔요

  6. 우와! 2014.01.07 11:16 신고  수정/삭제  댓글쓰기

    맨 위에분은 외국인인데 구글로 한국어 돌려서 댓글 단것이 아닐까요?ㅎㅎㅎ
    매우 유익한 강좌 잘 보고갑니다^^!!! 다음 강좌도 기대가 되요~
    오늘 꼴랑모님 티스토리와서 함 둘러보니 좋은 자료들 아주 많네요^0^//

    • 웹통 꼴랑모 2014.01.08 08:41 신고  수정/삭제

      ^^ 저도 나중에야 알게되었는데요. 저분 아이디를 클릭하면 광고페이지로 이동하더군요. 구글 번역기로 대충 댓글달고 무작위로 광고하는 방식이라 .... 요즘엔 이런글 올라오면 댓글 삭제하고있습니다.
      우와님~ 2014년 항상 좋은일만 가득하세요

  7. 2014.02.09 22:03 신고  수정/삭제  댓글쓰기

    우와 좋은 정보 감사합니다~~

    • 웹통 꼴랑모 2014.02.10 08:42 신고  수정/삭제

      안녕하세요.!~ 간단한 강좌였는데... 도움되셨다니 다행이네요. 좋은 자료들도 많으니 종종 놀러와주세요.~

  8. 류카 2014.07.07 20:51 신고  수정/삭제  댓글쓰기

    막막하기만 했는데 이런 방법이 있었군요 정말 감사합니다 유용하게 잘 쓸수 있을것 같아요^^

  9. 2015.04.23 11:38 신고  수정/삭제  댓글쓰기

    선을 저렇게 쉽게 만드는 거였다니! 유용한 정보가 많아 자주 올 것 같습니다^^

  10. 2015.08.06 13:21 신고  수정/삭제  댓글쓰기

    유용한 정보네요. 정말 감사합니다. 제 개인 연습용으로 사용하기 위해 원본 다운로드 받아가요.

  11. 이동완 2016.05.06 12:23 신고  수정/삭제  댓글쓰기

    학교 과제때문에 막막했는데 큰 도움이 되었습니다. 다운받아갑니다. 감사합니다

  12. 무뇨옹 2016.05.21 02:17 신고  수정/삭제  댓글쓰기

    형님 고맙습니다 사랑합니다

  13. 초보감자 2016.12.23 12:24 신고  수정/삭제  댓글쓰기

    본문 한참 찾다가 겨우 댓글다네요^^: 이렇게 좋은 설명을 다운받아 볼수 있게 해주셔서 넘 감사합니다.

    • 웹통 꼴랑모 2016.12.23 16:05 신고  수정/삭제

      ^^ 다운소스를 한참 찾으셨나 보네요. 찾으셨다니 다행입니다. 유용하게 사용해 주시구요.~~ 메리 크리스마스입니다.

  14. 사랑해요 웹통 2017.03.15 11:05 신고  수정/삭제  댓글쓰기

    너무 너무 좋은 정보 감사합니다! 오늘 처음 방문했는데 유용한 자료들이 너무 많네요. 감사히 활용하겠습니다 ^^

    • 웹통 꼴랑모 2017.03.15 17:57 신고  수정/삭제

      ^^ 안녕하세요. 닉네임이 인상적이시네요. 앞으로도 웹통 많이 사랑해 주시구요.~~ 자주 놀러와 주세요.~

Powerd by Tistory, designed by criuce
rss