웹 디자인 & 멀티미디어 실습

머리말

첫째마당｜웹 디자인 기초 이론의 이해

01 웹 사이트란 무엇인가?
웹 사이트 관련 용어와 개념
웹 사이트 제작과 관련된 기술

02 웹 디자인의 개념과 실제
웹의 목적 - 정보 전달
정보를 효율적이고 체계적으로 전달할 수 있는 웹 디자인
웹 인터페이스 디자인
웹 디자이너가 알아야할 10가지 웹 디자인 원칙
웹 디자인 작업 프로세스(Process)
웹 디자인과 템플릿 디자인
메뉴 내비게이션 디자인
사용자를 고려한 웹 디자인
웹 페이지의 배경 디자인

03 웹 디자인 컬러와 폰트
웹 디자인과 컬러
웹 디자인과 폰트

04 웹 디자인을 위한 프로그램
웹 브라우저
웹 에디터
그래픽 프로그램
홈페이지 출판 프로그램 - FTP

둘째마당｜포토샵을 이용하여 웹 이미지 만들기

포토샵 CS2의 인터페이스와 화면 구성 요소
메뉴
툴박스
팔레트

01 버튼 만들기 Ⅰ- 빛이 반사되는 알약 버튼 만들기
작업 도큐먼트 준비하기
‘선택(Marquee) 툴’로 버튼 형태 만들기
버튼에 그레이디언트 효과 주기
빛이 반사되는 부분 만들기
SELF TEST

02 버튼 만들기 Ⅱ - 입체적인 ‘다음’, ‘이전’ 버튼 만들기
버튼 이미지 준비하기
버튼에 그레이디언트 옵션 적용하기
선택 영역을 변형하여 입체 효과주기
버튼에 맞춤형 도형 이미지 넣기
SELF TEST

03. 메뉴바 만들기 - 입체감 있는 메뉴바
메뉴바 형태 만들기
메뉴바에 스타일 적용하기
메뉴 버튼 형태 만들기
메뉴 버튼에 스타일적용하기
메뉴 버튼 복제하기
메뉴 글자 입력하기
메뉴 글자 복제하고 수정하기
‘스타일(Styles) 팔레트’의 텍스트 효과(Text Effects)
SELF TEST

04. 배경 화면과 어울리는 투명 이미지 만들기
‘마술봉(Magic Wand) 툴’로 배경 선택하기
선택한 배경 지우기
이미지 테두리 부분을 깔끔하게 정리하기
배경이 투명한 이미지 저장하기
‘Save As’ 대화상자의 여러 옵션
마술봉(Magic Wand) 툴 옵션의 Tolerance와 Contiguous에 대해서 알아보기
[Help] 메뉴로 투명 GIF 파일 만들기
SELF TEST

05 웹 이미지 최적화하기
미리보기 화면의 이미지 크기 조절하기
다양하게 최적화된 이미지 미리보기
‘Save for Web’ 대화상자 살펴보기
이미지 세밀하게 최적화하기
‘Preset’ 항목에서 설정할 수 있는 파일 포맷
이미지 크기 조절과 이미지의 회전
‘Image Size’ 대화상자의 여러 옵션
포토샵에서 GIF 파일 편집하기
SELF TEST

06. 문자 만들기Ⅰ- 네온 싸인 효과
새 작업 도큐먼트 만들기
입력할 글자의 옵션 설정하기
글자의 이동과 색 채우기
‘문자(Type) 툴’의 옵션 이해하기
선택 영역 해제하고 레이어 병합하기
글자에 필터 효과 적용하기
글자 이미지 밝기 보정하기
글자 이미지의 컬러 보정하기
새 레이어 만들어 배경 지우기
새 레이어 복제하고 레이어 위치 이동하기
레이어 특수 효과 설정하기
레이어 스타일(Layer Style) 효과 살펴보기
레이어 스타일 효과 제거하기
이미지를 이용하여 문자 디자인하기
‘캐릭터(Character) 팔레트’
SELF TEST

07. 문자 만들기 Ⅱ - 플라스틱 질감 효과
글자의 옵션과 글자색 지정하기
문자 레이어를 그림 레이어로 변환하기
선택 영역에 번짐 효과 주기
Lighting Effects 필터 효과 주기
레이어에 ‘Screen’ 블렌딩 모드 적용하기
글자 이미지에 그림자 효과 주기
글자 이미지에 Emboss 필터 효과 주기
잠깐만요 - 포토샵의 다양한 필터 메뉴
한걸음 더 - ‘Warped Text’ 효과를 이용하여 문자 왜곡하기
SELF TEST

08 홈페이지 인트로 화면 디자인하기
작업 도큐먼트 준비하기
배경 이미지 디자인하기
인트로 화면에 첫 번째 이미지 합성 효과내기
인트로 화면에 두 번째 이미지 합성하기
인트로 화면에 세 번째 이미지 합성하기
이미지 합성 마무리 하기
인트로 화면에 문자 디자인하고 저장하기
Self Test

09. 홈페이지 화면 조각 그림으로 만들기
이미지레디 실행하기
이미지를 나누기 위한 안내선 그리기
잠깐만요 - 이미지레디 화면 구성과 주요 기능
잠깐만요 - 안내선 위치 이동하고 잘못 만든 안내선 삭제하기
슬라이스할 이미지 영역 설정하기
슬라이스한 이미지 저장하기
잠깐만요 - ‘Save Optimized’ 대화상자의 ‘파일 형식’ 옵션
브라우저로 저장된 이미지 확인하기
Self Test

10. 배너 애니메이션 만들기
이미지레디 실행과 파일 포맷 설정하기
애니메이션 프레임 만들기
프레임 대기 시간 설정하기
잠깐만요 - 이미지레디의 ‘애니메이션(Animation) 팔레트’의 구조와 기능
배너 애니메이션 실행하고 저장하기
한걸음 더 - 트윈(Tween) 기능으로 자연스럽게 변화하는 애니메이션 만들기
SELF TEST

11 이미지 맵을 이용한 하이퍼링크 만들기
작업 도큐먼트 준비하기
첫 번째 메뉴에 이미지 맵 영역 지정하기
두 번째 메뉴에 이미지 맵 영역 지정하기
잠깐만요 - 이미지레디의 ‘이미지 맵(Image Map) 팔레트’의 구조와 기능
이미지 맵 설정 확인하고 저장하기
잠깐만요 - 이미지 맵 환경 설정하기
SELF TEST

12. 롤오버 메뉴 버튼 만들기
작업 도큐먼트 준비하기
버튼 이미지 만들기
롤오버 효과를 위해 버튼에 레이어 스타일 적용하기
문자 레이어 만들고 글자색 지정하기
롤오버 버튼 만들기
롤오버 버튼 작업 결과 확인하고 저장하기
잠깐만요 - 인터넷 익스플로러에 보이는 롤오버 버튼과 관련된 HTML 태그
잠깐만요 - 이미지레디의 ‘롤오버(Rollovers) 팔레트’의 구조와 기능
SELF TEST

13. 홈페이지 배경을 위한 패턴 만들기
이음새가 부드러운 사진 배경 만들기
격자무늬 패턴 배경 만들기
잠깐만요 - 파일 형식
잠깐만요 - [File] → [Output Settings] 메뉴
SELF TEST

14. 홈페이지에 올릴 사진 이미지 보정하기
‘Levels’로 어두운 사진 밝게 보정하기
‘Levels’로 너무 밝은 사진 콘트라스트 강조하기
사진 이미지의 특정 컬러 보정하기
인물의 잡티 수정하고 뽀사시한 사진 만들기
잠깐만요 - 사진 이미지 보정 작업시 알아두어야 할 원칙
한걸음 더 - ‘Curves’와 ‘Color Balance’ 기능으로 이미지 정밀하게 보정하기
잠깐만요 - 'Color Balance' 기능으로 이미지를 보정할 때 주의할 점
잠깐만요 - ‘Curves’ 대화상자의 여러 옵션
SELF TEST

셋째마당｜플래시를 이용하여 웹 애니메이션 만들기

플래시 MX2004의 인터페이스와 화면 구성 요소
메뉴
툴(Tool) 바
각종 속성(Properties) 창

01 플래시 애니메이션 제작 기본 과정 익히기
무비 제작을 위한 환경 설정하기
잠깐만요 - 새 작업 도큐먼트의 생성과 속성 설정하기
무비에 사용할 글자 입력하고 위치 옮기기
글자를 심벌로 등록하기
무비 제작을 위한 키 프레임 삽입하기
잠깐만요 - 프레임과 심벌 이해하기
심벌의 크기 조절과 색상 변환하기
잠깐만요 - ‘자유 변형(Free Transform) 툴’의 화살표 상태
모션 트위닝(Motion Tweening) 애니메이션 적용하기
잠깐만요 - 모션 트위닝 애니메이션에 필요한 작업 환경
플래시 무비를 실행하고 저장하기
한걸음 더 - 드로잉한 도형으로 애니메이션 만들기
SELF TEST

02. 모션 트위닝 애니메이션 실습
레이어 추가하고 자동차 심벌 등록하기
잠깐만요 - 타임라인(Timeline)의 레이어 기능
이미지 파일을 불러와서 심벌로 변환하기
무비 작업을 위한 키프레임 추가하고 배경 프레임 만들기
잠깐만요 - akdntmfmf emformgkdu vmfpdladmf smfflrh wnfdlrl
자동차에 모션 트위닝 애니메이션 적용하기
자동차가 서서히 사라지는 무비 완성하기
이즈(Ease) 적용하여 모션 트위닝 애니메이션에 속도감 넣기
잠깐만요 - 모션 트위닝의 속성(Properties) 창
한걸음 더 - 어니언 스킨으로 무비 움직임 한꺼번에 확인하기
SELF TEST

03. 메인 페이지 로고 애니메이션 만들기
새 레이어 만들고 프레임 추가하기
글자 로고 심벌 만들기
글자 로고와 로고 그림자 크기 줄이기
키프레임 추가하고 로고 크기 변형하기
모션 트위닝 애니메이션 적용하기
잠깐만요 - 색상 효과 적용 방법 이해하기
한걸음 더 - 글자의 그림자가 뿌옇게 번진 것 같은 효과 설정하기
SELF TEST

04. 모션 가이드 애니메이션 만들기
새 레이어 만들고 나비 무비 클립 배치하기
모션 가이드(Motion Guide) 레이어 추가하고 모션 가이드 그리기
모션 가이드에 오브젝트 배치하기
잠깐만요 - 오리엔트 패스와 스냅
한걸음 더 - 나비 무비 클립 만들기
SELF TEST

05. 셰이프 트위닝 애니메이션 만들기
새 레이어에 도형 그리기
글자 입력하고 모든 글자 분리하기
셰이프 트위닝 적용하고 무비 결과 확인하기
한걸음 더 - ‘Shape Hint’를 이용하여 자연스러운 몰핑 애니메이션 만들기
한걸음 더 - 그레이디언트를 이용한 색상 변화 애니메이션 만들기
한걸음 더 - ‘Break Apart’ 기능 이용하여 비트맵 이미지 분리하고 원하는 부분 추출하기
잠깐만요 - 오브젝트 지우기
SELF TEST

06 마스크를 이용하여 메뉴 페이지 애니메이션 만들기
마스크에 사용할 이미지 배치하고 심벌로 등록하기
잠깐만요 - ‘라이브러리(Library) 패널’의 구조
카메라 심벌에 틴트(Tint) 효과 애니메이션 적용하기
마스크 레이어 만들기
잠깐만요 - 마스크 이해하기
한걸음 더 - 글자 마스크 애니메이션 만들기
SELF TEST

07. 버튼 심벌 만들기
버튼 심벌 등록하기
'Up' 버튼 드로잉하기
잠깐만요 - 버튼 심벌의 네 가지 프레임 알아보기
'Over' 버튼 드로잉하기
작업한 버튼 무비에 배치하고 결과 확인하기
한걸음 더 - ‘Down’ 프레임을 이용하여 마우스를 클릭했을 때의 버튼 모양 만들기
SELF TEST

08 액션을 이용하여 무비 제어하기
무비 정지 액션 만들기
새 레이어에 버튼 심벌 배치하기
잠깐만요 - ‘액션(Actions) 패널’ 인터페이스
버튼 심벌에 무비 제어 액션 스크립트 설정하기
잠깐만요 - 액션 스크립트를 작성할 수 있는 곳
버튼 심벌에 적용한 액션 결과 확인하기
잠깐만요 - ‘액션(Actions) 패널’ 옵션 버튼 항목의 팝업 메뉴
한걸음 더 - goto 액션으로 이미지 갤러리 무비 만들기
SELF TEST

09 플래시 인트로 페이지 만들기
일정한 횟수만큼 무비 실행한 후 다른 페이지로 이동하기
잠깐만요 - 일반모드와 전문가모드
잠깐만요 - 1프레임과 300프레임에 입력한 액션 스크립트 이해하기
잠깐만요 - ‘Publish Settings’ 대화상자
스킵(Skip) 버튼 이용하여 사이트 이동하기
한걸음 더 - ‘Skip’ 버튼에 마우스를 올리면 다른 사이트로 이동하게 설정하기
SELF TEST

10 서브 메뉴가 나타나는 메뉴바 만들기
서브 메뉴 배경 만들기
액션에 사용할 프레임 레이블(Frame Label) 만들기
서브 메뉴 배치하고 모션 트위닝 무비 적용하기
주 메뉴에 마우스를 올리면 서브 메뉴가 나타나는 액션 설정하기
한걸음 더 - 메뉴바 전체를 하나의 무비 클립으로 만들기
SELF TEST

넷째마당｜드림위버를 이용하여 웹 사이트 만들기

드림위버 MX 2004 인터페이스와 화면 구성 요소
메뉴
‘삽입(Insert) 툴바’ 그룹의 다양한 툴바 살펴보기

01 웹 페이지의 텍스트 꾸미기
예제 파일 불러와서 텍스트 입력하기
텍스트 크기와 색깔 바꾸기
서체와 텍스트 스타일 설정하기
잠깐만요 - 텍스트 속성(Properties) 창 살펴보기
잠깐만요 - 글자와 관련된 HTML 태그
한걸음 더 - 목록 만들기
잠깐만요 - 목록을 만들기 위한 HTML 태그
SELF TEST

02 웹 페이지에 이미지 삽입하기
웹 페이지에 배경 이미지 설정하기
웹 페이지에 이미지 삽입하기
잠깐만요 - 이미지를 웹에 맞게 최적화하기
‘에셋(Assets) 패널’로 이미지 삽입하기
잠깐만요 - 웹 그래픽 표준 방식
이미지와 텍스트 어울리게 배치하기
잠깐만요 - 이미지의 경로 지정하기
이미지에 풍선 도움말 만들기
한걸음 더 - 드림위버에서 롤오버(Rollover) 이미지 만들기
SELF TEST

03 하이퍼링크로 웹 페이지 연결하기
메인 페이지에서 메뉴 페이지 하이퍼링크 설정하기
메뉴 페이지에서 하이퍼링크 설정하기
잠깐만요 - 하이퍼링크를 만들기 위한 HTML 태그
한걸음 더 - 한 문서 안에서 특정 위치로 이동하는 링크 만들기
잠깐만요 - 네임 앵커 하이퍼링크를 설정하기 위한 태그
SELF TEST

04 테이블을 이용하여 메인 페이지 터잡기
표로 메인 페이지 터잡기
셀 합치고 셀에 메인 페이지 그림 배치하기
테이블과 셀 속성 설정하여 페이지 완성하기
잠깐만요 - 표 속성(Table Properties) 창과 셀 속성(Cell Properties) 창 살펴보기
한걸음 더 - 트레이싱 이미지, 레이아웃 셀, 레이아웃 표를 이용하여 웹 페이지 레이아웃 작업하기
SELF TEST

05 스타일시트로 가독성 높은 웹 페이지 만들기
클래스 스타일을 이용하여 문단 모양 편집하기
잠깐만요 - 스타일시트의 개념과 종류
클래스 스타일을 이용하여 제목 스타일 만들기
태그에 스타일시트 적용하여 나만의 태그 만들기
스타일시트를 이용하여 하이퍼링크 텍스트의 모양을 색다르게 편집하기
한걸음 더 - 외부 스타일시트 파일 만들고 다른 문서에도 동일한 스타일시트 적용하기
SELF TEST

06 프레임셋으로 홈페이지 만들기
프레임 만들고 웹 페이지 배치하기
잠깐만요 - 프레임과 프레임셋이란?
프레임 크기 고정하고 프레임 여백 없애기
잠깐만요 - 프레임과 프레임셋 속성(Properties) 창
프레임의 스크롤바 옵션 설정하고 결과 확인하기
프레임셋에서 하이퍼링크 설정하기
잠깐만요 - 프레임셋을 만들기 위한 HTML 태그
한걸음 더 - 아이프레임(iframe) 만들기
SELF TEST

07 다양한 비헤이비어로 다이내믹한 홈페이지 만들기
비헤이비어 환경 설정하기
잠깐만요 - ‘비헤이비어(Behaviors) 패널’과 다양한 비헤이비어(Behaviors) 패널
‘Open Browser Window’ 비헤이비어 사용하기
잠깐만요 - ‘Open Browser Window’ 대화상자의 여러 옵션
‘Call Javascript’를 이용하여 새 윈도우 닫기 비헤이비어 설정하기
잠깐만요 - ‘비헤이비어(Behaviors) 패널’의 ‘OnClick’ 액션과 ‘Call JavaScript’ 이벤트
‘Swap Image’를 이용하여 이미지 교체하기
한걸음 더 - ‘Set Text of Layer’ 비헤이비어로 레이어 안의 텍스트 바꾸기
SELF TEST

08 다이내믹한 메뉴 만들기
메뉴 내비게이션 바 만들기
잠깐만요 - ‘Insert Navigation Bar’ 대화상자의 여러 옵선
마우스를 올릴 때만 나타나는 서브 메뉴 만들기
한걸음 더 - 펼침 목록 메뉴 만들기
잠깐만요 - HTML 문서에 자바스크립트 넣기
SELF TEST

09 레이어와 타임라인 애니메이션
레이어 삽입하고 편집하기
잠깐만요 - 레이어(Layers) 속성 창 살펴보기
타임라인을 이용하여 자동차 애니메이션 만들기
타임라인 추가하여 여러 개의 개체를 동시에 움직이는 애니메이션 만들기
잠깐만요 - 타임라인의 속성
한걸음 더 - 곡선 애니메이션 만들기
SELF TEST

다섯째마당｜기획에서 출판까지 - 웹 사이트 프로젝트 따라잡기

웹 사이트 파일 및 구조 미리보기

01 웹 사이트 기획하기
웹 사이트 제작에 들어가기 전에 점검할 사항
웹 사이트 주제와 대상 정하기
자료 수집하기
컨텐츠 선정과 메뉴 뽑아내기
웹 사이트 내비게이션 설계 및 구조도 그리기
홈페이지 콘티 짜기
홈페이지 디자인 준비하기

02 웹 사이트 제작 - Ⅰ 인트로 페이지 디자인
제작 과정 살펴보기
드림위버로 인트로 페이지 코딩하기

03 웹 사이트 제작 Ⅱ - 메인 페이지 디자인
메인 무비에 사용할 이미지 편집하기
메인 플래시 무비 만들기
메인 메뉴 내비게이션 플래시 무비 만들기
드림위버로 메인 페이지 코딩하기

04 웹 사이트 제작 Ⅲ - 메뉴 페이지 디자인
사이트 로고 만들기
메뉴 페이지 메뉴 내비게이션 플래시 무비 만들기
드림위버로 메뉴 페이지 코딩하기

05 웹 사이트 출판하기

찾아보기