웹디자인

Size: px

Start display at page:

Download "웹디자인"

승신 온
6 years ago
Views:

2 디자인의정의 인간생활의목적에알맞고 실용적이며미적인조형을 계획하고실현하는과정과그에따른결과 미 ( 美 ) 와용 ( 用 ) 을계획하고실현

3 용어의이해

4 1. 인터넷 세계최대의네트워크연동망에서비롯된고유명사 통신망과통신망을연동해놓은망의집합을의미하는 internetwork과구별 1969년미국국방부의군사목적 ARPANET이시초 WWW, FTP, , BBS 등의서비스가있음 다양한서비스와풍부한정보자원때문에정보의바다라고함 출처 : 두산백과

5 2. 웹 (web) 월드와이드웹 (world wide web) 의줄임말 WWW로표기 문자, 음성, 동영상등의멀티미디어환경을갖춘인터넷의정보서비스 하이퍼텍스트방식으로문서를작성 (html) HTTP(Hyper Text Transfer Protocol) 사용 : 하이퍼텍스트전송규약 Ex) : 네이버문서를서비스받을때 http로처리 FTP(File Transfer Protocol) : 인터넷을통해파일을주고받는서비스 Hyper Text : 다른텍스트를참조할수있는연결정보가있는텍스트

6 3. URL Uniform Resource Locator 인터넷서비스와해당파일등자원의위치를기술하는방법 구성 : 인터넷서비스 + 호스트이름 (IP주소) + 포트번호 + 경로 - 인터넷서비스 : http, ftp.. - 호스트이름 : - 포트번호 : 기술할수도있고생략도가능, 웹서비스는 80이기본 - 경로 : /company/info.html ex) ex)

7 4. html hyper text markup language 웹의표준을주관하는 W3C에서발표한프로그래밍언어 웹페이지를제작하기위한기본언어 웹브라우저가해석하여이용자에게보여줌

8 5. CSS casacading style sheet 의줄임말 html 문서의스타일을표현 최근웹사이트에서매우중요 css 적용전 css 적용후

9 6. 웹브라우저 웹에서정보들을볼수있도록해주는프로그램 종류 - 인터넷익스플로러 (Internet Explorer) : 마이크로소프트사에서개발 - 크롬 (Chrome) : 구글에서개발 - 사파리 (Safari) : 애플에서개발 - 파이어폭스 (Firefox) : 모질라프로젝트로개발 Mosaic > Netscape Navigator > Firefox 종류별버전별로지원하는기능이다름

10 7. 기타 메인페이지, 서브페이지 1depth, 2depth 메인 서브 1depth 2depth 사이트구조

11 7. 기타 1depth 2depth 3depth 메인페이지 서브페이지

12 웹사이트제작과정

13 1. 웹사이트제작과정 요구분석 > 기획 > 디자인 > 코딩 > 개발 > 테스트 > open 크게기획 > 디자인 > 코딩 > 개발로이루어짐 프로젝트의규모에따라세분화, 단순화되어짐 한과정이라도소홀하면웹사이트구축은실패할가능성이높음 개별적으로진행되는것보다동시에진행되는경우가일반적임 기획자, 디자이너, 코더 ( 퍼블리셔 ), 개발자가완료시점까지팀웍을발휘

14 1. 웹사이트제작과정 1) 요구분석 구축하고자하는사이트의목적과방향을잡기위한과정 클라이언트의의도를파악 ( 클라이언트와의커뮤니케이션높임 ) 웹사이트구축시가장기초적인참고자료로활용 요구분석단계를성실히시행하면시행착오를최대한줄임 2) 기획 요구분석서를기초로사이트설계 스케줄표제작 사용자조사, 콘텐츠기획 사이트맵제작 ( 정보설계 ) 스토리보드제작 : 웹사이트의모양을구체화 스토리보드예

15 1. 웹사이트제작과정 3) 디자인 사이트의디자인전략및컨셉설정후디자인진행 스토리보드를기준으로콘텐츠를배치시키고구현 웹그래픽, 멀티미디어콘텐츠제작 4) 코딩 코딩 : 웹상에서구현될수있는 html 문서만드는작업 html 태그와 css를활용 프로젝트규모에따라코딩은디자이너혹은코더 (publisher) 가진행

16 1. 웹사이트제작과정 5) 개발 게시판, 쇼핑몰등의기능구현을위해데이터베이스화와프로그래밍 asp, php, jsp등으로구현 사용자와의상호작용을만들기위한단계 6) 테스트 개발이종료된시점에서시행 기획자, 디자이너, 개발자모두테스트를통해오류사항수정및점검 웹사이트구축의마지막단계

17 2. 인력구성 1) PM (project manager, 프로젝트매니저, 기획자 ) 웹사이트개발총괄진행 기획단계부터마지막마무리단계까지스케줄관리 직접클라이언트 ( 의뢰자 ) 를만나진행상황조율 대규모일경우기획자가두명또는세명인경우도있음 2) creative designer(main designer) 창의력과디자인감각등이필요 실제계약과상관크기때문에중요도높음 메인, 서브페이지의스타일을정함

18 2. 인력구성 3) Sub designer 서브페이지디자인 메인디자이너와업무협의를하며진행 스토리보드와스타일가이드에따라디자인 보통신입에서 3년차정도의디자이너 4) corder(publisher) 디자인다음작업으로 html 를제작 이미지와콘텐츠를활용해서실제웹페이지구현

19 웹저작

20 1. 응용프로그램 1) photoshop( 비트맵이미지처리 ) 4) 3d Max( 입체오브젝트제작 ) 2) illustrator( 벡터이미지처리 ) 5) AfterEffect( 영상효과 ) 3) dreamweaver( 웹에디터 )

21 2. 웹페이지제작 Hard cording WYSIWYG 메모장워드프로세서 Edit plus Sublime text 나모 드림위버 WYSIWYG( 위지윅 ) : What You See Is What You Get 의약어 - 눈으로보면서작업결과를얻을수있다는의미 - 소스코드의내용을작업중에미리보여주는기능

22 2. 웹페이지제작 Hard cording WYSIWYG

23 텍스트 ( 폰트 )

24 1. 텍스트 ( 폰트 ) 질량의크기는부피와비례하지않는다. 질량의크기는부피와비례하지않는다. 제비꽃같이조그마한그계집애가 꽃잎같이하늘거리는그계집애가 지구보다더큰질량으로나를끌어당긴다. 제비꽃같이조그마한그계집애가 꽃잎같이하늘거리는그계집애가 지구보다더큰질량으로나를끌어당긴다. 순간, 나는뉴턴의사과처럼사정없이그녀에게로굴러떨어졌다쿵소리를내며, 쿵쿵소리를내며 순간, 나는뉴턴의사과처럼사정없이그녀에게로굴러떨어졌다쿵소리를내며, 쿵쿵소리를내며 심장이하늘에서땅까지아찔한진자운동을계속하였다첫사랑이었다. 심장이하늘에서땅까지아찔한진자운동을계속하였다첫사랑이었다.

25 2. 웹디자인과텍스트 1) 분류 텍스트기반 - 시스템폰트 ( 사용자컴퓨터의폰트사용 ), 웹폰트 ( 웹서버의폰트사용 ) - 주로콘텐츠 ( 내용 ) 이많을때사용 - 확대해도깨끗하게보임 - 최근웹에서중요 ( 반응형웹 ) - CSS, html tag 사용 ( 코딩으로구현 ) 그래픽기반 ( 이미지 ) : 사용자컴퓨터에없는폰트사용시 - 디자인의한부분으로생각 - 컬러, 배열등의느낌이중요 - 확대하면흐릿하게보임 - 포토샵등의그래픽프로그램으로구현

26 3. 시스템폰트 시스템폰트 : 사용자 pc 에설치된폰트 디자이너가작업한폰트가사용자 pc 에없으면다른폰트로대체해서보임

27 3. 시스템폰트 폰트다운로드 : software.naver.com

28 4. 웹폰트 웹에서폰트정보를다운로드하여사용자에게보여줌 fonts.google.com

29 5. 그래픽기반텍스트 이미지로제작

30 6. 비교 확대 이미지 이미지

31 7. 반응형웹 화면사이즈에따라비율이바뀜

32 웹포멧 ( 확장자 )

33 1. 이미지 1) gif 미국 compuserve 사에서저속모뎀의통신을목적으로개발 적은수의색상지원 : 256가지의컬러표현 무손실압축기법사용 (LZW) 투명 ( 이미지테두리 ) 과애니메이션표현이가능 크기가작은버튼이나선, 웹페이지배경이미지등에사용 컬러사용이적은캐릭터, 로고등에사용 투명 Fie > Save For Web( 웹용으로저장 ) Gif 포맷은투명 (opacity) 표현이가능합니다.

34 1. 이미지 2) jpg 이미지를압축 ( 손실압축기법 ) 24bit, 트루컬러를사용하여많은수의색상을표현 컬러표현이많기때문에섬세한이미지에적합 ( 사진 ) 이미지의품질조정가능 ( 품질낮추면용량줄어듦 )

35 1. 이미지 3) png Portable Network Graphic 약자 24bit 풀컬러사용할수있어서섬세한이미지표현가능 jpg 파일보다파일용량이늘어남 투명한이미지표현가능 투명 Gif 포맷은 투명 (opacity) 표현이가능합니다.

36 1. 이미지 4) jpg vs gif jpg 파일 Zoom in 100% view gif 파일

37 2. 동영상 mp4 - 적은용량으로도고품질의영상과음성을구현 - 실시간재생이가능해지고파일용량도적어서휴대용기기에적합 avi - 가장폭넓게사용 - Microsoft사에서만든동영상포멧 - 압축률이좋지않아파일용량큼 mov - 애플 (apple) 사에서만들었으며매킨토시및윈도환경에서재생가능 - 최근에는 mov 대신 mp4 많이사용 mkv - 화질은좋으나하드웨어의성능에영향을많이받음 - 고화질의영상에많이사용되고있으며최근 4K 영상에서주로활용

38 3. 사운드 wav - Microsoft사에서만든컴퓨터용오디오파일 - 음질이뛰어남 - 파일크기가큼 mp3 - motion picture expert group 3 의약자 - wave 파일을압축시킨것으로음질이좋음 aif - Audio interchange file format - 애플 (apple) 에서만들었으며매킨토시컴퓨터에서실행

39 3. 분석

40 이미지처리방식

41 1. 이미지처리방식 1) Bitmap 방식 픽셀 (pixel) 로구성 : 픽셀은이미지를구성하는점 확대해서보면픽셀의형태가보여깨져보이는현상이일어남 자연스럽고사실적인표현이가능 고품질의이미지를만들기위해해상도를올려야함 해상도를올릴수록파일의용량이커지는단점 대표적인프로그램 : photoshop, painter

42 1. 이미지처리방식 2) Vector 방식 수학적인계산에의해선과곡선으로구성되는이미지 점과선의개수로파일의용량이결정 간단한이미지에서는같은크기의비트맵파일보다훨씬적은용량 단점 : 자연스러운이미지와색상표현은한계 logo 제작이나캐릭터등비교적간단한이미지제작에쓰임 대표적인프로그램으로는 Illustrator, flash 등

43 1. 이미지처리방식 3) 비교 벡터방식 확대 원본 픽셀 비트맵방식

44 2. 해상도 디스플레이장치나인쇄물에서이미지의정밀도 해상도가높을수록이미지가세밀함 단위 : 1인치당들어가는픽셀의수 dpi(dot per inch인쇄용 ), ppi(pixel per inch디스플레이용 ) 단위사용 1 inch 1 inch 10dpi 5dpi

45 2. 해상도 10dpi 5dpi

46 2. 해상도 iphone X iphone 8plus iphone 8

47 3. 계단현상 계단현상 : 비트맵이미지에서픽셀이사각형이기때문에나타남 anti-alias - 계단현상을최소화하기위한옵션 - 곡선부분에서거칠게나타나는것을완화 - 가장자리픽셀과바탕픽셀사이의중간색상사용 anti-alias(o) anti-alias(x)

48 4. Media Digital media 웹, 동영상, 모바일등해상도 : 72dpi(96dpi) 단위 : px 컬러체계 : RGB vs Print media 책, 잡지, 포스터, 명함등해상도 : 300dpi( 최소150이상 ) 단위 : Cm(mm) 컬러체계 : CMYK

49 5. 색상체계 색상 (color) - 빛의파장에따라다르게구별되는것 - 사물을봤을때나타나는빛깔이나특징적인색채 명도 (value, lightness, brightness) - 색의밝고어두운정도 (grayscale) - 유채색, 무채색은모두명도가있음 채도 (saturation, chroma) - 색의선명도를의미하는말로순도를의미 - 색상과무채색을혼합하면채도는낮아짐 - 순색 (pure color) : 채도가높은색 - 명청색 ( 순색 + 흰색 ), 암청색 ( 순색 + 검정 ), 탁색 ( 순색 + 회색 )

50 5. 색상체계 1) RGB red, green, blue로이루어지는색상체계 모니터, 프로젝터등빛을사용 가산혼합 : 빛을더할수록밝은색상으로표현 24bit일경우약 1670만가지색상표현

51 5. 색상체계 2) CMYK cyan, magenta, yellow, black로이루어지는색상체계 인쇄 ( 프린트 ) 시사용 감산혼합 : 잉크 ( 물감 ) 이더해질수록색상이어두워짐 K는 black을의미

52 You can see as much as you know.

53 웹그래픽스

54 1. 포토샵의이해 어도비 ( 에서개발 - CS : Adobe Creative Suite 통합패키지 - CC : Adobe Creative Cloud 통합패키지 - 버전 :... > CS6 > CC > CC2014 CC 확장자 *.psd 어도비소프트웨어

55 2. 화면구성 메뉴바 옵션바 툴바 작업화면, 패널 ( 팔레트 ), 툴바, 옵션바 : window 메뉴에서관리 펼침 탭을드래그하면이동 상태표시줄 패널 ( 팔레트 )

3. 컬러선택 3 1 2 4 1 : Foreground Color( 전경색 ) : 브러시, 연필, 텍스트입력등채색시적용색 2 : Background Color( 배경색 )

and Background Colors 옵션 전경색을견본으로저장 Color Picker : 수치를입력하거나클릭해서색상선택 - Only Web Colors : 웹안전색상

56 3. 컬러선택 : Foreground Color( 전경색 ) : 브러시, 연필, 텍스트입력등채색시적용색 2 : Background Color( 배경색 ) : 백그라운드레이어에서지우개등으로삭제하거나지울때색 3 : Default Foreground and Background Colors 4 : Switch Foreground and Background Colors 옵션 전경색을견본으로저장 Color Picker : 수치를입력하거나클릭해서색상선택 - Only Web Colors : 웹안전색상 Swatches( 색상견본 ) : 자주사용하는컬러저장 - 클릭 : 전경색으로지정 - Ctrl+ 클릭 : 배경색으로지정 - Alt+ 클릭 : 삭제 - 옵션 : 다양한견본컬러를선택

57 4. 파일저장 File > Save : 포토샵원본저장 (psd), 레이어남아있음 File > Save for Web : 웹용으로저장 (jpg, gif, png), 레이어하나로합쳐짐

58 5. 기본단축키및기능 ctrl+space(zoom tool) : 확대 ctrl+alt+space(zoom tool) : 축소 spacebar(hand tool) : 화면이동 zoom tool 더블클릭 : 100% hand tool 더블클릭 : 화면크기맞게조정 ctrl+z : undo ctrl+alt+z : step backward ctrl+shift+z : step foreward ctrl+c : edit( 편집 ) > copy( 복사 ) ctrl+v : edit( 편집 ) > paste( 붙여넣기 ) ctrl+r : ruler( 가이드사용시필요 ) shift+tab : hide panel tab : hide panel and tool box edit > fill - 배경색, 전경색, 패턴채우기 edit > stroke - 선택후윤곽선만들기 f12(revert) : 저장된초기화

59 6. select shift alt Shift+alt 선택 - Ctrl+A : All( 전체선택 ) - Feather : 테두리뿌옇게처리 - Anti-alias : 계단현상완화 - Shift : 정형그리기 - Alt : 가운데부터그리기 - Shift+Alt : 정형으로가운데 선택있을때 : 합, 차, 교 - Shift : add( 합 ) - Alt : subtract( 차 ) - Shift + Alt : intersect( 교 ) 선택있을때 - Ctrl+D : deselect( 선택해제 ) - Ctrl : move - Ctrl+Alt : move and copy - Ctrl + Shift + i : inverse( 반전 ) - (shift)arrow key : (10)1px move context menu( 오른쪽클릭 ) - layer via copy : 선택영역복사하며레이어만들기 - layer via cut : 선택영역자르며레이어만들기

60 참고 : context menu Context menu : 오른쪽클릭했을때상황과툴에따라다른메뉴가나옴 선택있을때 브러시툴

61 7. Elliptical Marquee( 원형선택윤곽도구 ) 선택시작부분 Tip! : 선택하다가 space bar 를누르면선택영역이동

62 8. Polygonal Lasso Tool( 다각형올가미도구 ) 다각형올가미도구 : 직선형태로선택 - 배경이복잡한이미지에서오브젝트선택 - 클릭 ~ 클릭하면서오브젝트테두리선택 - 잘못클릭 ( 선택 ) 했을때 backspace 키사용 - 처음클릭과마지막클릭한지점이만나면선택완료 ( 또는더블클릭 )

63 9. Magic Wand Tool( 자동선택도구, 마술봉툴 ) 한번의클릭으로유사한컬러영역을선택 Tolerance( 허용치 ) : 수치가낮을수록유사한컬러만선택 contiguous( 인접 ) : 유사한컬러를사용하는인접영역만선택 contiguous : O contiguous : X

64 10. Layer Layer : 포토샵이미지를구성하는투명한층 블렌딩 ( 혼합 ) 모드레이어그룹현재선택된레이어레이어보기 레이어옵션불투명도조절 Fx 제외한불투명도레이어스타일레이어스타일보기 1 : Layer style(fx) 2 : Layer mask 3 : Adjustment layer 4 : New layer group 5 : New layer 6 : Delete layer

65 11. Layer 레이어복제 : alt 사용또는 New layer 아이콘으로드래그또는 move tool + alt 레이어다중선택 : 레이어이름을 shift, ctrl 사용하여클릭 Shift Ctrl 레이어다중선택

66 12. Free Transform( 자유변형 ) edit( 편집 ) > free transform( 자유변형 ) : ctrl + t 변형시 shift 사용 : 비율유지, alt 사용 : 가운데기준으로변형 적용 : 이미지더블클릭 종류 (context menu) - scale : 크기 ( 비율 ) - rotate : 회전 - distort : 왜곡 (ctrl 사용 ), 꼭지점하나씩변형 - flip vertical : 수직으로반전 - flip horizontal : 수평으로반전 조절점 중심점

67 13. Move Tool( 이동도구 ) Align( 정렬 ) Distribute( 분배, 간격 ) 이미지클릭했을때해당이미지가속해있는레이어 ( 그룹 ) 선택 - ctrl + move tool 로이미지클릭 - 옵션 : Layer 선택또는 Group 선택 Align( 정렬 ) ctrl + move tool 로이미지클릭하면 Distribute( 분배, 간격 ) 해당이미지가속해있는레이어 ( 그룹 ) 선택

68 14. Crop Tool 이미지의필요한부분만남기고자름 ( 영역선택후더블클릭 ) 캔버스크기조절또는이미지의수평수직을맞출때도사용 1. 이미지의배경컬러와백그라운드컬러를동일하게맞춤 2. 크롭툴로선택 3. 늘이고싶은만큼 ( 줄이고싶은만큼 ) 영역설정후더블클릭 4. 캔버스사이즈변경

69 15. Canvas Size image( 이미지 ) > canvas size( 캔버스크기 ) 기준점 상대치 : 현재캔버스크기기준 캔버스가확장되었을때색상지정

70 16. Image Size image( 이미지 ) > image size( 이미지크기 ) 이미지크기, 해상도확인및조절 크기조절 해상도조절 가로세로비율유지 Resample : 이미지의픽셀이나해상도를변경할때이미지데이터양을변경하는것

character 패널 1 2 5 1. 폰트종류 2. 크기 3. 행간 4. 자간 5.

71 17. Type Tool 클릭하여글자입력 Enter : 줄바꿈, ctrl+enter 또는 Enter( 숫자키패드 ) : 입력완료 수정 : 블록지정후 option bar 또는 character 패널 폰트종류 2. 크기 3. 행간 4. 자간 5. 컬러 블록지정 1 : 텍스트레이어더블클릭 블록지정 2 : Type 툴로블록지정

18. Brush Tool & Pencil Tool Brush Tool(

72 18. Brush Tool & Pencil Tool Brush Tool( 브러시도구 ) : 원하는모양으로드래그하여그림을그리거나채색 - Opacity( 불투명도 ) : 투명도조절, 수치가높을수록불투명 - Flow( 흐름 ) : 브러시한점에대한농도 Pencil Tool( 연필도구 ) : anti-alias 없음 - pixel 작업, 웹디자인등해상도가낮은결과물에서버튼등작은이미지작업 Pixel 작업 옵션 Hardness : 100% Hardness : 0% Opacity : 50%, Flow : 100% Opacity : 50%, Flow : 50% Opacity : 100%, Flow : 50%

18. Brush Tool & Pencil Tool 브러시크기변경 : [, ]

73 18. Brush Tool & Pencil Tool 브러시크기변경 : [, ] 브러시커서변경 : Caps Lock 이미지의컬러추출 : Alt + 클릭 OK : 대체, Append : 현재브러시모음에덧붙임 썸네일보기방식 Grunge 느낌의외부브러시 브러시파일관리 - Reset Brushes : 브러시초기화 - Load Brushes : 외부브러시파일 (*.abr) 불러오기 - Save Brushes : 현재브러시파일로저장 - Replace Brushes : 현재브러시를다른브러시로대체 기본제공브러시

74 19. Gradient Tool( 그레이디언트도구 ) Gradient Tool( 그레이디언트도구 ) : 여러색상을자연스럽게변화줄때사용 - 선형과원형그레이디언트가많이사용 - Transparency : 투명적용 옵션 격자는 opacity 를의미 드래그시작 드래그끝 드래그 드래그하는방향과길이에따라서결과다름

75 20. Clone Stamp Tool( 복제도장도구 ) Clone Stamp Tool( 복제도장도구 ) : 이미지의특정부분을다른곳에복제 - 사용법 : 복제할부분을 alt 누르고지정후, 다른곳에드래그하면 + 부분이복제됨 - Aligned( 정렬 ) : 복제할지점을지속적으로기억 aligned : X aligned : O Healing Brush Tool( 복구브러시도구 ) - 사용법은 Clone Stamp Tool 과같으나이미지의채도, 질감등을자동으로보정

76 21. Shape Tool Pick Tool Mode Shape Tool( 도형도구 ) : 사각형, 원, 선등의도형을제작 - Radius : 꼭지점의반지름 - Sides : 꼭지점수 - Weight : 선의두께 - Shape : 다양한모양선택 Pick Tool Mode : 벡터 (Shape, Path) 와레스터 (Pixel) 이미지로설정 ( 참고 : 레스터 = 비트맵 ) - Shape : 패스로기본제작이되며면 (fill) 과선 (stroke) 설정가능, 크기조절시이미지손실없음 - Path : 패스만제작 - Pixel : 레스터이미지로제작, 면으로만구성되며크기조절시이미지손실

77 22. Pattern Pattern : 사각형영역내의모양이반복 - 제작할때사각형선택툴사용 - 적용 : Edit > Fill : Pattern - 외부패턴파일사용 : Load Patterns Load Patterns 1. 패턴이될모양제작 ( 투명주의 ) 3. Edit > Define Pattern 2. 사각형선택툴로반복될부분지정

78 23. Clipping Mask Clipping Mask( 클리핑마스크 ) : 아래레이어의영역만큼만 (mask) 위의레이어이미지가보임 - Layer > Create Clipping Mask( 또는레이어옵션, 적용할레이어와레이어사이에서 Alt + 클릭 ) - 해제 : Release Clipping Mask( 또는레이어옵션, 적용할레이어와레이어사이에서 Alt + 클릭 ) - 두개이상의레이어가필요 A ㅣ t + 클릭 적용

79 24. Layer Mask Layer Mask( 레이어마스크 ) : grayscale 에따라서이미지 mask - 레이어마스크에서검은색은이미지가림 (mask), 흰색은이미지보임 - 레이어마스크에서회색은 opacity 라고생각하면됨, 색상없이명도값인식 레이어마스크적용 흰색 : 보임 ( 변화없음 ) 흰색 : 보임 ( 변화없음 ) 검은색 : 가림

25. Layer Style(fx) Layer Style : 레이어에효과 ( 스타일 ) 주는것 2개이상의효과를동시에줄수있음 Layer > Layer Style > Copy Layer Style : 레이어스타일복사 ( 또는 context menu) Layer > Layer Style > Paste Layer Style : 레이어스타일붙여넣기 ( 또는

80 25. Layer Style(fx) Layer Style : 레이어에효과 ( 스타일 ) 주는것 2개이상의효과를동시에줄수있음 Layer > Layer Style > Copy Layer Style : 레이어스타일복사 ( 또는 context menu) Layer > Layer Style > Paste Layer Style : 레이어스타일붙여넣기 ( 또는 context menu) 종류 - Bevel&Emboss : 경사와엠보스 - Stroke : 선 - Inner Shadow : 내부그림자 - Inner Glow : 내부광선 - Satin : 새틴 - Color Overlay : 색상오버레이 - Gradient Overlay : 그레이디언트오버레이 - Pattern Overlay : 패턴오버레이 - Outer Glow : 외부광선 - Drop Shadow : 그림자 레이어스타일보기 레이어스타일펼치기 ( 닫기 ) 레이어스타일

81 26. Layer Style(fx) > Stroke( 선 ) Stroke : 레이어에외곽선제작 / ( 참고 ) Edit > Stroke : 선택영역있을때적용 - Size : 선두께 - Position : 선위치 (Outside, Inside, Center) - Opacity : 불투명도 - Fill Type : 선종류 (Color, Gradient, Pattern) - Color : 색상 - Reset to Default : 초기화

82 27. Layer Style(fx) > Color Overlay( 색상오버레이 ) Color Overlay : 레이어의색상변경 - Color : 색상선택 - Opacity : 불투명도

83 28. Layer Style(fx) > Drop Shadow( 그림자 ) Drop Shadow : 레이어외부에그림자효과 - Opacity : 불투명도 - Angel : 그림자방향조절 - Distance : 레이어와그림자의거리조절 - Size : 그림자의크기조절

84 29. Fill Opacity : 불투명도 Fill : Fx 제외한불투명도

85 30. Brightness/Contrast Image( 이미지 ) > Adjustments( 조정 ) > Brightness/Contrast( 명도 / 대비 ) - Brightness( 명도 ) : 이미지밝기 - Contrast( 대비 ) : 이미지대조도 Tip) 설정값초기화 : alt 누르고 Reset 버튼활성화되었을때클릭 Brightness + Brightness - 원본 Contrast + Contrast -

86 31. Hue/Saturation Image( 이미지 ) > Adjustments( 조정 ) > Hue/Saturation( 색조 / 채도 ) - Hue( 색조 ), Saturation( 채도 ), Lightness( 밝기 ) 조정 Colorize( 색상화 ) : 흑백이미지 + Hue, Saturation, Lightness 원본 원래색상 조절후색상 Saturation 조절 Colorize 조절

87 32. Adjustments Layer Layer Panel > Adjustments Layer( 조정레이어 ) 또는 Adjustments Panel - 적용된조정은언제든지취소가능 ( 비파괴조정 ) - 아래의모든레이어들조정 - 아래의레이어에만조정하려면클리핑마스크적용 더블클릭하면다시조정 흰색은보이고검은색은가림 Adjustments Panel 아래레이어들조정 아래레이어에만조정 ( 클리핑마스크적용 )

88 33. Filter Filter( 필터 ) : 이미지에특수효과설정 - 선택영역이있을경우선택영역에만효과적용 - Smart Filter( 고급필터 ) : Filter > Convert for Smart Filters( 고급필터용으로변환 ) Smart Object Mask 적용된필터 Smart Filter Blending mode opacity 조절 참고 ) Smart Object : 원본의정보를잃어버리지않고이미지에효과적용할수있는오브젝트

89 34. Gaussian Blur Filter > Blur > Gaussian Blur 이미지를흐릿하게만드는필터 원본 필터적용

90 35. Sharpen Filter > Sharpen > Sharpen 이미지를선명하게만드는필터 원본 필터적용

91 Slice & link

92 1. 디자인후작업흐름도 psd jpg(gif, png) html index.psd + html tag index.html 내컴퓨터 서버 메인페이지의파일명은항상 index 로저장!!! info.psd + html tag info.html ftp:// 슬라이스 코딩 Ftp 프로그램 ( 윈도우탐색기 ) 사용 Server jpg(gif,png) 와 html 등 (web hosting) 파일그대로서버에업로드 history.psd + html tag history.html 사용자는브라우저로접속.psd + html tag.html

93 2. 이미지슬라이스 ( 슬라이스툴 ) 이미지슬라이스이유 - 로딩속도향상 - 이미지를기능별로작업 format(file > save for web) - html and images - images only - html only slices - all slice : 모든슬라이스저장 ( 자른영역 + 자동으로생긴영역 ) - all user slice : 직접슬라이스툴로그린영역만저장 - selected slice : 옵션창에서선택된슬라이스만저장

3. Html tag 메모장에서 tag 작성후 파일명.html 로저장 : 하드코딩 - <img src="http://www.inje.ac.

94 3. Html tag 메모장에서 tag 작성후 파일명.html 로저장 : 하드코딩 - <img src=" : 이미지 - <br> : 줄바꾸기 - <a href=" 인제대학교 </a> : 링크

95 4. 경로 ( 링크 ) 절대경로 - 를포함하여완전한 url 주소로링크 - 다른서버상에있는문서에링크할때사용 ex01) ex02) ex03) 상대경로 : 가장많이쓰이는링크경로방식 - 경로를정의하고자하는문서가기준이되는방법 - 현재문서와링크된문서가같은사이트 ( 서버 ) 에있고계속같은사이트에있을경우 - 전체폴더를이동하여동일한상대경로를유지하는경우는업데이트가필요가없음 - 경로이동이나파일이름을변경할경우는업데이트가필요 ex01) 같은폴더의파일에링크 : <a href= profile02.htm > ex02) 하위폴더의파일에링크 : <a href= resource/resource01.htm > ex03) 상위폴더의파일에링크 : <a href=../index.htm >

96 5. 포토샵에서링크설정 링크걸릴슬라이스이미지오른쪽클릭 > Edit slice options 링크걸릴파일명 ( 사이트주소 )

97 6. publish ftp 통해서서버로파일전송 (ftp 프로그램사용 : 알드라이브 ) 서버의상태

98 웹사이트제작관련서비스

99 1. 무료호스팅및도메인 웹사이트전반적인프로세스 ( 기획 > 디자인 > 코딩 > 개발 ) 연습가능

100 2. 무료웹사이트 - Naver 에서제공하는무료모바일최적화웹사이트 - 코딩을몰라도디자인만 ( 포토샵 ) 알면제작가능 ko.wix.com, 코딩을몰라도디자인만 ( 포토샵 ) 알면제작가능 - 무료버전은기능제한 무료쇼핑몰 - 코딩을몰라도디자인만 ( 포토샵 ) 알면쇼핑몰운영가능

웹디자인

웹디자인 1. 포토샵이해 1. 포토샵이해 어도비 (www.abobe.com) 에서개발 - 포토샵 CS2 버전이후부터 Adobe Creative Suite 라는통합패키지로출시 - 최근버전 CS6 > CC > CC2014 > CC2015 - 확장자 *.psd Adobe Creative Suite 제품군에속한프로그램 - Design Premium - Design Standard