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

 

포토샵 파일을 HTML/CSS로 변환하는 강좌 모음

 

 

웹디자이너와 그래픽디자이너는 유사한 툴을 사용하여 컴퓨터로 창작물을 만드는건 비슷하지만 HTML과 CSS에 대한 퍼블리싱 능력에서 가장 큰 차이점을 보입니다. 그만큼 웹디자이너에게 HTML은 필수이자 항시 노력해야하는 요소인데요. 자신이 만든 디자인을 실제로 구현을 못한다면 그것만큼 난감한 경우도 없지요.

 

오늘은 웹디자이너가 포토샵으로 만든 디자인을 HTML이나 CSS로 변환하는 강좌를 소개해 드리겠습니다. 강좌를 통해 좀더 효율적으로 코딩하고 레이아웃을 실현하는 방법을 배울수 있습니다.

 

모든 강좌는 영어로 제작되어 있어서 조금 난감한 부분이 있는데요. 구글 크롬을 설치하여 자동 번역 기능을 사용하면 어렵지 않게 강좌를 보실수 있습니다.

 

 

 

 


 

 

Convert Your Product Landing Page From PSD to HTML

 

이 강좌에서는 PSD를 HTML, CSS 프레임 워크, 자바스크립트를 사용하여 변환하는 방법을 배울수 있습니다.

 

 

 

 

 

 

 

 

Sleek Coming Soon Page Design

 

이 강좌는 홈페이지 오픈 예정을 알리는 페이지를 만드는 내용입니다. 1부. 2부로 나눠져 있으며 1부는 포토샵을 이용하여 디자인을 만드는 과정을 배울수 있으며 2부에서는 만들어진 PSD를 이용하여 HTML로 변환하는 방법을 알수 있습니다.

 

 

 

 

 

 

 

Converting a clean magazine-style PSD template to HTML/CSS

 

이 강좌는 PSD를 HTML로 변환하는 방법에 대해 몇가지 팁과 조언을 담고 있습니다. 구체적인 설명 보다는 전반적인 흐름을 배우기 좋은 내용입니다.

 

 

 

 

 

 

 

 

Designing a highly-professional website, from the sketch to the code

 

이 강좌는 기업형 비지니스 홈페이지를 제작하는 방법에 대한 강좌입니다. 포토샵 과정과 HTML 변환 과정으로 나눠서 설명해주고 있습니다. 강좌를 위해 PSD + HTML / CSS를 다운 받을수 있어서 쉽게 접근하실 수 있습니다.

 

 

 

 

 

 

 

Code an Awesome Minimal Design from PSD to XHTML & CSS

 

이 강좌는 CSS3와 웹 개발자에 제공하는 새로운 기능을 사용하여 웹페이지를 만드는 과정을 담고 있습니다.

 

 

 

 

 

 

 

 

Code a Photoshop File to a Working Website

 

PSD를 HTML로 코딩하는 방법을 배울수 있는 강좌입니다. 빠르고 쉽게 페이지를 코딩하는 방법을 알수 있으며 강좌에 필요한 PSD, CSS 파일을 다운 받을수 있습니다.

 

 

 

 

 

 

 

How to Code a Grunge Web Design from Scratch

 

1부, 2부로 나눠져 있으며 1부는 포토샵을 이용하여 그런지 테마의 웹 레이아웃을 만드는 방법을 설명하고 있으며 2부는 HTML과 CSS로 변환하는 방법을 배울수 있습니다.

 

 

 

 

 

 

 

 

Coding The PSD File Into CSS and HTML

 

이 강좌에서는 HTML / CSS 코딩, PSD 분할 및 웹사이트 성능을 향상시키기 위한 몇가지 팀을 소개하고 있습니다.

 

 

 

 

 

 

 

Code a Modern Design Studio from PSD to HTML

 

현대적인 디자인의 스튜디오 PSD 템플릿을 XHTML / CSS 코드로 변환하는 과정을 담은 강좌입니다.

 

 

 

 

 

 

 

 

Converting Dezign Folio From PSD to HTML

 

이 강좌에서는 단계별로 PSD를 HTML로 변환하는 방법을 알 수 있습니다. CSS 프레임 워크, 자바 스크립트를 사용하여 레이아웃을 생성하는 방식으로 한단계 진보된 과정을 배울수 있습니다.

 

 

 

 

 

 

 

Convert a 3D Portfolio Dark Layout From PSD to HTML

 

크로스 브라우저 호환 및 동적 레이아웃에 일부 CSS 스타일과 자바 스크립트를 사용하여 레이아웃을 생성하는 방법을 배울수 있습니다.

 

 

 

 

 

 

 

Coding a Band Website Created in Photoshop

 

이 강좌에서는 PSD를 깔끔하게 XHTML / CSS 코드로 설정하는 방법을 학습할 수 있습니다.

 

 

 

 

 

 

 

Create a lovely textured web design from Photoshop to HTML/CSS

 

이 강좌에서는 좋은 질감을 사용하여 멋진 웹 사이트 레이아웃을 실현하는 방법을 배울수 있습니다.

 

 

 

 

 

 

 

 

Create a Chalkboard Style WordPress Layout

 

이 강좌에서는 칠판 스타일의 워드프레스 PSD 레이아웃을 XHTML로 변환하는 방법을 학습할 수 있습니다.

 

 

 

 

 

 

 

 

<관련글>

2014/10/10 - 빠르고 효율적인 디자인 작업을 위한 무료 포토샵 브러쉬

2014/10/08 - 시간과 노력을 절약할 수 있는 무료 벡터 자료 모음

2014/08/20 - 웹제작에 유용한 홈페이지 버튼 디자인

2014/07/02 - [일러스트 강좌] 귀여운 앵그리버드 케릭터 만들기

2014/06/23 - 3D 프린터를 위한 무료 모델링 소스 사이트 모음

2014/05/13 - 강력한 기능을 가진 컴퓨터 원격제어 7종 소개

이 글을 공유하기

댓글(2)

  • 아롱복
    2015.06.26 16:50

    영어강좌이겠지요?ㅎㅎ 하지만 한 번 도전해 보겠습니다. 고맙습니다.

    • 2015.06.29 15:54 신고

      ^^ 안녕하세요. 아롱복님 아쉽게도 영어강좌입니다. 시간만되면 전부 풀어서 쓰고 싶지만 차라리 여러자료를 다양하게 소개하는게 나을것 같아 링크로 소개했습니다. 막히는 부분 있으시면 언제든지 댓글주세용~

Designed by JB FACTORY