온라인창업실무교육 상품사진보정하기 Codima Education Program / 강의진행 : 권지현팀장
권지현 現오픈마켓창업교육전문기관 [ 코디마 ] 디자인팀장現 ( 주 ) 이베이코리아판매자교육센터전문강사 여성인력개발센터온라인창업과정강사소상공인지원센터오픈마켓창업과정강사상공회의소전자상거래과정강사제주 YWCA/ 서귀포 YWCA 인터넷쇼핑몰창업과정강사지식경제공무원교육원인터넷쇼핑몰창업경영강사대구매일신문경력단절여성쇼핑몰창업과정강사배제대 / 상명대 / 한성대등 8 개대학온라인쇼핑몰창업특강 오픈마켓상세페이지 / 쇼핑몰 / 브로슈어상품패키지 / 명함 / 로고디자인 온라인상품상세페이지기획, 상세페이지제작실무, 기초 HTML 및상세페이지구성, 오픈마켓창업디자인과정등강의 본교재는저작권법에의하여보호받으며, 코디마 의사전동의없이무단사용, 복제, 배포를원칙적으로금합니다. 1
상품사진보정하기 1. 상세페이지영역별필수상품사진고르는방법 2. 기본으로알고있어야할상품사진보정방법 3. 카테고리별상품사진보정노하우 4. 색상과명암보정 5. 다양한툴을활용한누끼작업으로깔끔한상품이미지만들기 본교재는저작권법에의하여보호받으며, 코디마 의사전동의없이무단사용, 복제, 배포를원칙적으로금합니다. 2
01 상세페이지영역별필수상품사진고르는방법 고객이처음보는사진은? 본교재는저작권법에의하여보호받으며, 코디마 의사전동의없이무단사용, 복제, 배포를원칙적으로금합니다. 3
고객이처음보는사진은? 팩트 4
고객의선택은? VS VS 5
어떤상품일까? 6
상세페이지영역별필수상품사진고르는방법 한눈에알아볼수있게 대표이미지 공지사항 브랜드이미지 or 대표상품 인트로 주문옵션 상품설명 구매안내 7
상세페이지영역별필수상품사진고르는방법 공지사항 주문선택이쉬운이미지배치 인트로 주문옵션 상품설명 구매안내 공지사항 생활속연출이미지 인트로 주문옵션 상품설명 구매안내 8
상세페이지영역별필수상품사진고르는방법 공지사항 제품전체구성을한번에 인트로 주문옵션 상품설명 구매안내 공지사항 특징이부각될수있는이미지 인트로 주문옵션 상품설명 구매안내 9
상세페이지영역별필수상품사진고르는방법 < 연출이미지 > < 소재및재질 > < 연출이미지 > < 조리예시 > 10
상세페이지영역별필수상품사진고르는방법 < 설치이미지 > < 활용및조립 > < 사용이미지 > < 컬러및제형비교 > 11
상세페이지영역별필수상품사진고르는방법 < 제품차별성 > < 기능설명 > 12
02 기본으로알고있어야할상품사진보정방법 포토샵화면구성 툴박스 포토샵단축키 포토샵환경설정 포토샵에이용되는파일형식 기본보정방법익히기 본교재는저작권법에의하여보호받으며, 코디마 의사전동의없이무단사용, 복제, 배포를원칙적으로금합니다. 13
포토샵화면구성 2 1 3 7 4 5 6 1 메뉴바 2 옵션바 3 툴박스 4 팔레트 5 화면구성선택 6 최소화 / 이전크기 / 닫기 7 작업도큐먼트 14
포토샵단축키 Ctrl K 환경설정 * 메뉴단축키 * 보기관련단축키 Ctrl N 새로만들기 Ctrl + 확대하기 Ctrl O 파일불러오기 Ctrl - 축소하기 Ctrl S 저장하기 Space Bar 핸드툴 Ctrl Shift S 다른이름으로저장 Ctrl Alt Z 실행취소 * 편집관련단축키 * 선택관련단축키 Ctrl T 자유변형 Ctrl A 전체선택 Alt 드래그 레이어복사 Ctrl D 선택해제 Alt Delete 전경색채우기 Ctrl Shift I 선택영역반전 Shift 드래그 정원 / 정사각형 / 직선 / 정비율 Ctrl 레이어클릭 레이어선택영역부르기 Ctrl C 복사하기 Ctrl V 붙여넣기 Ctrl X 잘라내기 * 이미지보정단축키 Ctrl L 레벨 Ctrl M 커브 15
툴박스 무브툴마퀴툴라쏘툴퀵셀렉션툴크롭툴아이드로퍼툴 16
툴박스 힐링브러시툴브러시툴클론스템프툴히스토리브러시툴이레이져툴그라디언트툴블러툴닷지툴 17
툴박스 펜툴타입툴패스셀렉션툴쉐이프툴핸드툴줌툴 전경색 / 배경색 표준모드 / 마스크모드 스크린모드 18
포토샵환경설정 [ 메뉴바 ] Edit > Preferences 클릭 Performance > History States : 300 Units & Rulers > Rulers : Pixels 19
레이어패널구성 안보이는일반레이어 선택한레이어 보이는일반레이어 모양레이어 문자레이어 1 2 3 4 5 6 7 1 레이어묶음 2 레이어스타일 3 레이어마스크 4 조정레이어 5 그룹 6 새레이어생성 7 레이어삭제 20
포토샵에이용되는이미지파일형식 파일명 파일이름 ( 숫자와영문소문자 ). 확장자명한글, 특수기호, 공백을제외한영문또는숫자로지정, 대 / 소문자구분 ( 예 ) photo.jpg photo_shop.jpg Photo-1.jpg PhotoShop.jpg PSD Photoshop에서기본적으로사용되는파일포맷 비트맵과벡터방식의혼합형으로포토샵에서다루는모든레이어, 채널, 패스등을저장 이미지의압축률높음 포토샵에서만다룰수있는파일포맷 21
포토샵에이용되는이미지파일형식 Joint Photographic Experts Group (*.JPG) 웹상에서사진등의정지화상을보관하고전송하는데사용되는파일형식 RGB모드와 CMYK모드를지원 트루칼라를지원하며이미지의압축률높음 섬세한색상표현가능 Compuserve GIF(*.GIF) 8비트 256컬러로제한되는 Indexed 모드지원 인터넷홈페이지제작에서많이사용 여러장의이미지를하나로합쳐움직이는효과 정밀한사진파일에는부적합 Portable Network Graphics (*.PNG) JPG와 GIF의단점을보완하기위해만들어진포멧 트루칼라지원및우명이미지지원 비손실압축방식을사용 22
기본보정방법익히기 [ 메뉴바 ] Layer > New Adjustment Layer > Curves Solid Color Gradient Pattern Brightness/Contrast Lavels Curves Exposure 선택 Vibrance Hue/Saturation Color Balance Black & White Photo Filter Channel Mixer Color Lookup Invert Posterize Threshold Gradient Map Selective Color 클릭 New Adjustment Layer 메뉴를이용하여 Curves 레이어를추가한다. 23
기본보정방법익히기 [ 메뉴바 ] Layer > New Adjustment Layer > Curves 조절 Properties 패널에서 Curves 값을조절하여적당한명암으로조절한다. 24
기본보정방법익히기 [ 메뉴바 ] Layer 패널 > blend Mode Normal Dissolve Darken Multiply Color Burn Linear Burn Darker Color Lighten Screen Color Dodge Linear Dodge(Add) Lighter Color 클릭 Overlay Soft Light Hard Light Vivid Light Linear Light Pin Light Hard Mix Difference Exclusion Subtract Divide Hue Saturation Color Luminosity 선택 Layer 패널에서 Blend Mode 값을 Luminosity 로변경한다. 25
색감보정하기 [ 메뉴바 ] Layer > New Adjustment Layer > Color Balance Solid Color Gradient Pattern Brightness/Contrast Lavels Curves Exposure Vibrance Hue/Saturation Color Balance Black & White Photo Filter Channel Mixer Color Lookup 선택 Invert Posterize Threshold Gradient Map Selective Color 클릭 New Adjustment Layer 메뉴를이용하여 Color Balance 레이어를추가한다. 26
색감보정하기 [ 메뉴바 ] Layer > New Adjustment Layer > Color Balance 조절 Properties 패널에서 Color Balance 의 Red 값과 Yellow 값을조절하여붉은빛과노란빛을추가한다. 27
색감보정하기 [ 메뉴바 ] Layer > New Adjustment Layer > Selective Color 조절 Properties 패널에서 Selective Color 의 Colors 를 White 로변경후 Black 값을마이너스수치로조절해이미지의흰색영역을밝게한다. 29
특정부분의색상변경하기 [ 메뉴바 ] Layer > New Adjustment Layer > Solid Color 선택 Solid Color Gradient Pattern Brightness/Contrast Lavels Curves Exposure Vibrance Hue/Saturation Color Balance Black & White Photo Filter Channel Mixer Color Lookup Invert Posterize Threshold Gradient Map Selective Color 클릭 New Adjustment Layer 메뉴를이용하여 Solid Color 레이어를추가한다. 30
특정부분의색상변경하기 [ 메뉴바 ] Layer > New Adjustment Layer > Solid Color 클릭 Layer 패널에서 Solid Color 레이어의마스크색상을검은색으로변경한다. 색상반전 ( 단축키 : Ctrl + I) 또는전경색을검은색으로변경한후전경색채우기 ( 단축키 : Alt + Delete) 를한다. 31
특정부분의색상변경하기 [ 메뉴바 ] Layer > New Adjustment Layer > Solid Color 선택 채색 Tools Bar 에서 Brush Tool 을선택하여변경하고자하는영역 ( 예 : 입술 ) 을흰색으로칠한다. 32
특정부분의색상변경하기 [ 메뉴바 ] Layer 패널 > blend Mode Normal Dissolve Darken Multiply Color Burn Linear Burn Darker Color Lighten Screen Color Dodge Linear Dodge(Add) Lighter Color Overlay Soft Light Hard Light Vivid Light Linear Light Pin Light Hard Mix Difference Exclusion Subtract Divide Hue Saturation Color Luminosity 선택 클릭 Layer 패널에서 Blend Mode 값을 Soft Light 로변경한다. 33
마스크를이용하여배경없애기 [ 메뉴바 ] Layer > New > Layer Via Copy Background 레이어를복사한다. ( 단축키 : Ctrl + J) 34
마스크를이용하여배경없애기 [ 메뉴바 ] Layer > New Adjustment Layer > Solid Color Layer 패널에서 Solid Color 레이어를추가하면배경이분리되는것을확인하며작업할수있다. 35
마스크를이용하여배경없애기 [ 툴바 ] Magic Wand Tool 선택 클릭 Tools Bar 에서 Magic Wand Tool 을선택하여이미지의배경을클릭한다. 36
마스크를이용하여배경없애기 Quick Mode 적용 선택 Edit in Quick Mask Mode 버튼을선택해 Standard Mode 에서 Quick Mask Mode 로변경한다. 37
마스크를이용하여배경없애기 [ 툴바 ] Brush Tool 클릭 선택 Brush Tool 을선택후브러시옵션을변경한다. - Hardness : 100% - Spacing : 1% 38
마스크를이용하여배경없애기 [ 툴바 ] Brush Tool 채색 이미지의빠진부분을검은색으로채색한다. 39
마스크를이용하여배경없애기 Standard Mode 적용 선택 Edit in Standard Mode 버튼을선택해 Quick Mask Mode 에서 Standard Mode 로변경한다. 붉은색으로채색한부분이영역으로지정되는것을확인할수있다. 40
마스크를이용하여배경없애기 [ 메뉴바 ] Layer > Layer Mask > Reveal Selection 클릭 레이어패널하단에 Add Layer Mask 버튼을클릭해선택영역으로지정된영역에마스크를씌워준다. 41
마스크를이용하여배경없애기 Layer Mask 반전 선택 Layer Mask 를선택후색상반전을한다. ( 단축키 : Ctrl + I) 42
마스크를이용하여배경없애기 Layer Mask 편집 더블클릭 레이어마스크영역을더블클릭하여 Properties 패널을연다. 43
마스크를이용하여배경없애기 Layer Mask 편집 클릭 Mask Edge 버튼을클릭해 Refine Mask 패널을연다. 이때, 모든값은 0 으로둔다. 44
마스크를이용하여배경없애기 Refine Edge 적용 채색 마우스커서를이미지화면으로옮겨머리카락주변을칠한다. 세밀하게작업할필요는없다. 45
마스크를이용하여배경없애기 Refine Edge 적용후 46
마스크를이용하여배경없애기 [ 메뉴바 ] Filter > Blur > Gaussian Blur 레이어마스크영역에가우시안블러효과를적용해거친경계선을부드럽게만든다. 이때, 수치는이미지의사이즈에따라적당한수치로조절한다. ( 이미지사이즈가클수록큰수치 ) 예제이미지의경우는 1.0~1.5 Pixels 를적용한다. 47
마스크를이용하여배경없애기 [ 툴바 ] Burn Tool 채색 선택 Burn Tool 을선택후브러시옵션을변경한다. - Range : Shadow - Exposure : 20% ~ 30% 이미지경계부분에남아있는지저분한부분을채색하듯문질러잔여배경을없애준다. 48
마스크를이용하여배경없애기 Burn Tool 적용후 49
Pen Tool ( 펜 /Path 활용 ) 클릭 + 드래그 클릭 클릭 펜툴은디테일한이미지를선택할때적합한툴이다. 사용할때옵션이 Path 인지확인! 곡선은마우스를클릭한채드래그하여이미지의형태에맞춘다. 이때양방향으로생기는핸들의중간지점을 Alt 키를누른채클릭하여핸들의한쪽방향만남도록한후다음지점을연결한다. 50
이미지따기 ( 펜 /Path 활용 ) 클릭 클릭 펜툴작업이마무리되면 Direct Selection Tool ( 직접선택도구 ) 을선택하여포인트및곡선의형대를다듬는다. Path 팔레트를선택하여영역으로만들어준다. 51
온라인창업실무교육 Thank You!