Adobe PHOTOSHOP Working Level 3

안녕하세요. 씨앤텍시스템즈 홍정화 연구원입니다.

 

이번 포스트에서는 Adobe Photoshop에서 실무에서 주료 사용하는 기능들에 대하여 정리해 보았습니다.

 

Adobe Photoshop cc 2019

Adobe Photoshop cc 2019 (한글판) 기준으로 작성되며, 
버전이 달라도 화면 요소들과 작업 방식은 동일함으로 진행하는데 문제가 없습니다.

 

지난 포스트  Adobe PHOTOSHOP Working Level 2에서 선택과 도형, 색보정에 대해 이해하셨다면

이번 포스트에서는 실무에서 많이 활용하는 기능들에 대해 알아보겠습니다.

 

 

Adobe PHOTOSHOP Working Level 1을 아직 못 보셨다면 아래 링크를 클릭해주세요!

https://cntechsystems.tistory.com/65

Adobe PHOTOSHOP Working Level 1

Adobe PHOTOSHOP Working Level 2을 아직 못 보셨다면 아래 링크를 클릭해주세요!

https://cntechsystems.tistory.com/71

Adobe PHOTOSHOP Working Level 2

 

---

1. 배너 디자인

2.  레이아웃 구성 디자인

3.  레이아웃 자르기  & 웹 형식으로 저장

---

1. 배너 디자인

Photoshop에서 도형과 텍스트툴 및 이미지 불러오기 등을 이용하여 광고용 배너를 만들어 봅시다.

 

아래 사진과 같이 간단한 배너 광고를 만들어 보겠습니다.

배너광고 예시1

1) 사각 도형 도구로 2개의 사격형을 만들어 줍니다.

색상 패널에서 다양한 색상으로 변경해보세요.
도형 생성 시 [ Shift ] 키를 누른 채 만드시면 가로 세로 비율이 일정한 도형을 만들수 있습니다.

 

사각형 추가

2) 이미지 추출

아래 사진을 다운로드 한 후 Phtoshop에서 새창에서 열기
자동선택 도구를 사용하여 해당 [ 선물 ] 이미지와 배경을 분리하여 새 레이어에 복사

선물꾸러미.jpg

이미지 추출 후.png

4) 텍스트 입력

텍스트필드를 이용해 텍스트를 아래와 같이 입력
[창]에서 [문자]를 클릭 후 텍스트 크기와 컬러 변경

텍스트 입력

도형을 이용하여 텍스트 입력

4-1) 사용자 정의 도구

사용자 정의 도구에서 도형을 조합하여 장식 제작
도형을 합칠 경우 상단에 옵션바에서 [모양 결합]을 선택

사각형

 

모양 결합

모양 결합 결과화면

4-2) 사용자 정의 도구_2

사용자 정의 도구에서 도형을 조합하여 장식 제작
[번개 모양]을 이용하여 장식을 추가로 꾸며줍니다.

사용자 정의 도구 완성

5) 완성

사용자 정의 도구에서 여러개의 도형을 조합
[눈꽃 장식]을 사용자 정의 도구를 이용하여 만들어 봅시다.

2. 레이아웃 구성

Photoshop에서 웹개발을 하기위한 디자인 기초 레이아웃을 잡아보겠습니다.

 

아래 사진과 같이 간단한 레이아웃를 만들어 보겠습니다.

웹개발에 앞서 아래 Photoshop 파일을 이용해 레이아웃 구성에 대해 알아봅시다

레이아웃 구성은 크게 3가지로 나누어 볼수 있습니다.

Header / Main / Footer 로 기본적인 웹개발 레이아웃입니다.

1) Header

Header에는 CI 와 메뉴가 있습니다.

[사각형 모형]으로 기본 틀을 잡은후 텍스트 필드를 이용하여 메뉴와 로고를 디자인합니다.

2) Main

Main에는 슬라이드와 텍스트 이미지 등이 구현됩니다.

[사용할 이미지]를 불러온 후 위치를 잡아줍니다.

[도형과 텍스트]를 이용하여 텍스트박스와 이미지 박스를 만들어줍니다.

3) Footer

Footer에는 [logo] 와 [address] 를 [텍스트] 입력

3. 웹 형식으로 저장

Photoshop에서 레이아웃을 구성 하셧다면 이번엔 웹 형식으로 저장하는 법을 배워보겠습니다.

 

아래와 같이 레이아웃 디자인을 완성하셧다면 [도구툴] - [ 분할 영역 도구 ] 를 선택

 

레이아웃

분할 영역 도구

1) 분할 영역 도구를 이용해 레이아웃을 순서대로 영역 분할

영역 분할

2) 웹용으로 내보내기

영역 분할 후 해당 이미지를 웹용으로 저장

웹용으로 저장

웹용으로 저장

새폴더에 이미지파일과 html파일로 저장

3) 확인하기

영역 분할 후 해당 이미지를 웹용으로 저장

 

완성

 

---

Adobe PHOTOSHOP Working Level  3 에서는 포토샵을 이용한 웹디자인 기술과

웹개발에 필요한 기본지식에 대해 알아보았습니다.

다음 포스팅에서는 실무에 많이 사용되는 일러스트 기술에 대해 알아보겠습니다.

 

---

감사합니다.

                                                모든 설정 및 환경 구축은 개개인의 취향에 맞춰 설정하시는 것이 가장 좋습니다 :)