개발팀과 코웍 할때 필요한 포토샵 제작 기법 강의 시작 합니다.
포토샵 폴더/레이어 네이밍을 HTML 마크업 문법으로 네이밍하여 개발팀과 코워킹에서 업무 효율을 높이는 스킬 가이드 입니다.
실무에 도움이 된다면 좋겠습니다.
완성 프로젝트 미리보기
완성본 psd 파일 체크 합니다.
파일은 아래 소스파일 다운로드 안에
psd.psd
파일 다운로드 하면 됩니다.
이 포스팅은 파일 업로드 제한이 걸려 있으니 아래 소스 파일 다운로드로 받아야 합니다.
소스 파일 다운로드
아래 유알엘에서 본 프로젝트에 필요한 파일을 다운로드 받을 수 있습니다.
material-psd
뚱스님이 공유한 폴더를 확인하세요.
mybox.naver.com
1 프로젝트 파일생성하고 가이드 만들기
아래 파일이 완성본 입니다.
이런 방식으로 만들면 됩니다.
왠만하면 이 가이드를 설치하고 유아이 작업 시작하는 것을 추천 합니다.
디자이너가 개발자와 협업할 때는 포토샵 폴더/레이어 네임을 시맨틱태그를 위주로 지정하면 효과적입니다.
뉴 파일 생성
윗스 1920
하이트 1080
레졸루션 72
가이드 생성
룰러를 보이게 합니다.
윗스 1366
윗스 1200
하이트 800
3개의 가이드를 만듭니다.
세이브 합니다.
https://www.youtube.com/watch?v=w5jNg-BcWPg&list=PLpK-F7ihqVc1o2aWM8GSmMDGKRqDqQ_SK&index=1
2 레퍼런스 배치하고 헤더 만들기
포토샵 폴더와 레이어를 HTML 마크업 문법으로 네이밍 합니다.
레퍼런스
레퍼런스를 바닥에 배치 합니다.
레퍼런스를 이렇게 바닥에 배치하고 디자인 하면 좀 편합니다.
레퍼런스 위스를 1200으로 변경 합니다.
캔버스를 크롭으로 레퍼런스에 맞게 늘립니다.
헤더
포토샵 헤더 폴더/레이어를 HTML 마크업 문법으로 네이밍 합니다.
위 텍스트 파일을 다운로드 받습니다.
헤더 텍스트를 추가 합니다.
https://www.youtube.com/watch?v=nWgY0DRMEho&list=PLpK-F7ihqVc1o2aWM8GSmMDGKRqDqQ_SK&index=2
3 헤더완성 / 메인 텍스트와 버튼 추가
텍스트와 도형 칼라를 레이어 스타일로 지정하면 효율적 입니다.
헤더
헤더를 완성 합니다.
메인
메인 폴더 만듭니다.
메인은 하이트800 안에서 완성하는 것이 좋습니다.
레이어 순서는 왼쪽상단부터 시작합니다.
텍스트와 버튼을 추가 합니다.
https://www.youtube.com/watch?v=pC0dOtG89jo&list=PLpK-F7ihqVc1o2aWM8GSmMDGKRqDqQ_SK&index=3
4 메인 이미지를 코딩에 최적화 합니다.
이미지를 디자인 단계에서 미리 코딩에 최적화 시키면 훌륭 합니다.
메인
마스크 세팅 합니다.
메인 비쥬얼을 코딩에 적합하게 디자인 합니다.
위스 1200 픽셀을 넘어가는 부분은 백그라운드 코드로 세팅 합니다.
이미지를 이레이저툴로 배경과 어울리게 조절 합니다.
브러쉬크기는 브라켓으로 조절 가능 합니다.
당연히 누끼로 하는 것이 정석 입니다.
https://www.youtube.com/watch?v=yJn8lsPATLY&list=PLpK-F7ihqVc1o2aWM8GSmMDGKRqDqQ_SK&index=4
5 아티클1 디자인 합니다.
마크업 문법인 아티클/섹션/디브 로 구분지어 네이밍 합니다.
아티클1
아티클1 추가 합니다.
아티클1 타이틀이 800세이프 라인에 노출되도록 디자인 합니다.
아티클1 섹션1을 추가 합니다.
260
섹션 - 위스 270 하이트 360 - 세팅 합니다.
섹션1을 복사해서 섹션 3개 더 추가 합니다.
콘텐츠를 수정 합니다.
섹션을 포토샵 상단 정렬메뉴로 정렬 합니다.
https://www.youtube.com/watch?v=G5QpSJKnme4&list=PLpK-F7ihqVc1o2aWM8GSmMDGKRqDqQ_SK&index=5
6 전체 완성
포토샵 작업 시 폴더/레이어 네이밍을 마크업 문법에 맞게 네이밍 합니다.
레이어 순서는 왼쪽상단에서 오른쪽하단 방향으로 합니다.
이렇게 디자인 하면 개발팀과 훌륭한 팀웍을 만들어 갈 수 있습니다.
아티클1
아티클1 완성 합니다.
아티클2
섹션 - 위스 380 하이트 530 - 세팅 합니다.
버튼을 도형툴로 그립니다.
아티클1 방식으로 아티클 2 완성 합니다.
이벤트
이벤트 완성 합니다.
아티클 3
완성 합니다.
아래 콘텐츠도 모두 완성 합니다.
동영상 전체 강의 리스트
https://www.youtube.com/playlist?list=PLpK-F7ihqVc1o2aWM8GSmMDGKRqDqQ_SK
개발팀과 코웍을 위한 PSD 만들기
개발팀과 코웍을 위한 psd
www.youtube.com
'Graphic tool manual' 카테고리의 다른 글
| GTQ 포토샵 1급 문제풀이 20190727 A안 (0) | 2025.11.28 |
|---|---|
| GTQi 일러스트 2급 문제풀이 2020 06 27 기출문제 (1) | 2025.11.28 |
| GTQi 일러스트 1급 문제풀이 2020년 2월 기출문제 (0) | 2025.11.28 |
| GTQ Photoshop 시험 요강 (0) | 2025.11.28 |
| Photoshop - Retouching (0) | 2025.11.26 |