웹통의 웹으로 통하는 세상

웹싸이트 디자인강좌 (6)

포토샵과 HTML/CSS을 이용하여 홈페이지를 만드는 강좌 모음

웹싸이트 디자인강좌 블로그-관리자 2014. 10. 20. 15:39

포토샵 파일을 HTML/CSS로 변환하는 강좌 모음 웹디자이너와 그래픽디자이너는 유사한 툴을 사용하여 컴퓨터로 창작물을 만드는건 비슷하지만 HTML과 CSS에 대한 퍼블리싱 능력에서 가장 큰 차이점을 보입니다. 그만큼 웹디자이너에게 HTML은 필수이자 항시 노력해야하는 요소인데요. 자신이 만든 디자인을 실제로 구현을 못한다면 그것만큼 난감한 경우도 없지요. 오늘은 웹디자이너가 포토샵으로 만든 디자인을 HTML이나 CSS로 변환하는 강좌를 소개해 드리겠습니다. 강좌를 통해 좀더 효율적으로 코딩하고 레이아웃을 실현하는 방법을 배울수 있습니다. 모든 강좌는 영어로 제작되어 있어서 조금 난감한 부분이 있는데요. 구글 크롬을 설치하여 자동 번역 기능을 사용하면 어렵지 않게 강좌를 보실수 있습니다. Convert ..

[ 이벤트 팝업소스 ] 활용도 높은 웹싸이트 전체화면 레이어 팝업 소스

웹싸이트 디자인강좌 블로그-관리자 2012. 8. 22. 11:05

메인화면 위에 겹쳐지는 레이어 팝업 소스 요즘 포탈이나 쇼셜쇼핑에서 보면 팝업창이 보다는 레이어를 이용한 팝업을 많이 보게 되는데요. 본화면을 보기전에 강제적으로 광고나 로그인 화면을 먼저 보이도록 할때 유용한 방법입니다. 전체화면 팝업 관련해서 소스가 없어서 직접 만들게 되었는데요. 저도 프로그램쪽이 아니라 네이버 지식에도 물어보면서 겨우 만들었습니다. ㅜㅜ 혹시 좀더 간단하게 수정해주실분 있으시면 조언 부탁드리며 허접하지만 필요하신분들은 유용하게 사용해주세요. 주요기능 : 엔터키로 팝업 닫기 / 전체화면 레이어 설정 / 하루동안 안보이기 쿠키설정 1단계 레이어 설정 div 레이어 설정을 통해 레이어의 위치와 투명도 크기를 설정하는 부분입니다. left:0px;top:0px : 상단 왼쪽을 기준으로 위..

[ 플래쉬 무료 프로그램 ] 1분만에 플래쉬를 제작할수 있는 초간단 플래쉬 무료 프로그램

웹싸이트 디자인강좌 블로그-관리자 2012. 5. 15. 15:17

1분만에 플래쉬을 제작할수 있는 프로그램 액션스크립트는 커녕 플래쉬에 플짜도 모르는 상황에서 메뉴나 배너를 제작하려면 너무 암담하실꺼에요. 특히 플래쉬 같은 경우엔 퀄리티 높은 무료소스를 구하기가 어려워서 난감하죠. 그런분들을 위해 무료 플래쉬 생성 프로그램을 소개해 드릴까합니다. 간단한 내용만 입력하면 플래쉬가 뚝딱하고 생성되서 참 편리해요. 다만 샘플 틀에 맞쳐서 제작해야 하기 때문에 변형이 어렵고 무료 버전은 플래쉬 하단에 광고 링크가 달려 있습니다. 유료로 전환하려면 29달러정도을 지불하셔야합니다. 급하게 플래쉬를 제작하거나 링크 부분이 상관없으시다면 정말 훌륭한 플래쉬 생성 싸이트입니다. Step 1 싸이트에 들어가 보시면 상단메뉴에 MENUS / TEXTS / BANNERS / BUTTONS ..

[ 포토샵 타이포그래피 ] 타이포그래피 폰트 조합공식 기초강좌

웹싸이트 디자인강좌 블로그-관리자 2012. 3. 14. 13:31

타이포그래피 어떻게 만들면 될까? 여러분들도 기본적인 이론 및 실무 대한 지식이없는 경우 폰트를 결정하고 어떻게 조합해서 배열을 할지 고민을 많이 하셨을꺼에요. 지금도 저는 폰트가 디자인 과정에서 가장 어려운 부분중에 하나라고 생각합니다. 무조건 이쁜글꼴로 캔버스를 채우는것 보다 여러 폰트를 어떻게 사용하느냐에 따라 완성도에서 많은 차이가 날수 있습니다. 이제부터 초보자를 위한 타이포그래피 만드는 방법을 소개하겠습니다. "얼마나 많은 폰트를 사용해야합니까?" 창의적이지 않은 일반적인 디자인 패턴에 많을 많이 사용하는 분들께는 두개 이상의 글꼴을 권장하지 않습니다. 모든 글꼴은 사람의 성격과 유사한 성질을 지니고 있습니다. 전혀 다른 성질의 성격을 지닌 두사람이 같은 업무를 할경우 좋은 시너지효과를 낼수 ..

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

웹싸이트 디자인강좌 블로그-관리자 2012. 2. 7. 12:59

이번엔 사진이나 리스트노출에 자주 사용하는 리본을 만들어 보겠습니다. 이번강좌도 어김없이 해외강좌를 번역 보강하여 제공드리는점 알려드립니다. 리본 캔버스 설정 500 × 500 픽셀 캔버스을 만들어 리본을 만들어보겠습니다. 배경 텍스쳐만들기 배경텍스쳐가 되는레이어을 하나추가하여 색상을 # cccccc로 적용합니다. 이제 필터 이동> 노이즈> 노이즈 추가 를 선택후 10%의 양으로 가우시안을 설정합니다. 그리고 배경 텍스쳐의 레이어 불투명도를 15%로 변경합니다. 이부분은 완성에서 그리 중요한 내용은 아닙니다. 다만 나중에 리본위쪽으로 배치하여 질감을 줄수도 있습니다. 이미지 외각틀 만들기 이제 사진이 들어갈 부분의 형태를 만들어 보겠습니다. 캔버스의 중앙에 사각박스를 배치합니다. 사진외각을 보기좋게 효과..

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

웹싸이트 디자인강좌 블로그-관리자 2011. 12. 28. 16:53

웹통을 개설하고 첫번째 포스팅입니다.~ 저도 비록 잘하진 못하지만 이제 시작하시는 웹디분들에게 조금이나마 도움이 되고자 웹통을 만들었습니다. 대부분의 강좌는 해외 유명강좌를 번역하거나 실무에서 사용되는 유용한 팁을 소개해드리는 형식으로 포스팅할 예정입니다.~ 많은 관심 부탁드립니다.~ 웹통이 전하는 심플한 홈페이지 인터페이스 디자인 STEP 1 먼저 포토샵을 실행후 아래와 같이 설정합니다. STEP 2 배경이 되는 레이어를 선택후 더블클릭하시면 레이어 스타일이 화면에 나옵니다. 레이어 스타일 좌측에 COLOR OVERLAY 색상을 진한 갈색으로 선택해주세요 STEP 3 새로운 레이어를 만든후 상단 적당한 부분에 직사각형 박스를 만들어 줍니다. STEP 4 다시 새로운 레이어를 추가한후 원형 선택툴을 이용..

Copyright © 웹통의 웹으로 통하는 세상 All Rights Reserved
Designed by JB FACTORY

티스토리툴바