>> Ⅲ. Web Design Tool 및 특성

Presentation on theme: ">> Ⅲ. Web Design Tool 및 특성"— Presentation transcript:

1 >> Ⅲ. Web Design Tool 및 특성

2 > table of Contents Ⅲ. Web Design Tool 및 특성 Vector & Bitmap
Image Mode Pixel & Image Resolution Graphic File Format Web Design Tool Adobe Photoshop Adobe Illustrator Macromedia Dreamweaver Macromedia Flash

3 Ⅲ. Web Design Tool 및 특성 벡터 & 비트맵 이미지 벡터 이미지(Vector Image) : 선으로 면을 분할하여 색을 표현하는 방식 점의 위치를 기억하여 점과 점을 이어 선을 만들어 색을 칠한다 벡터이미지는 점으로 지정되고 공식에 의해 점을 연결하여 정의하므로 파일 크기가 작다. 벡터 이미지는 점의 위치에 근거한 도형의 면의 색을 기억하므로 아무리 확대해도 그때마다 선과 면을 다시 만들어내 이미지가 거칠어지지 않는다. 비트맵 이미지(Bitmap Image) : 이미지를 색깔 있는 정사각형의 점(Pixel)으로 찍어 표현하는 방식-모자이크 작은 격자 무늬에 색을 칠하여 멀리서 보면 마치 하나의 그림처럼 느껴지지만 확대해서 보면 전체를 파악할 수 없다. 이미지를 확대하면 정사각형의 점(Pixel)이 보이고 화면이 거칠어 진다.

4 Ⅲ. Web Design Tool 및 특성 Image Mode(색상체계) [ RGB Color ] 빛의 3원색인 빨강(Red), 녹색(Green), 파랑(Blue) 을 조합하여 색상을 표현하는 방식 컴퓨터 모니터에서 빨강, 녹색, 파랑색의 빛을 발사하여 색상을 표현하는 방식과 비슷하므로, 컴퓨터 그래픽의 기본적인 컬러 모드라고 할 수 있다. 각각의 색상은 256단계로 나뉘어지므로 총 256 * 256 * 256 = 16,777,216 색상을 표현할 수 있다. [ CYMK Color ] RGB 모드가 빛의 3원색을 기본으로 삼는 모드라면 CMYK 모드는 인쇄매체를 인쇄하기 위한 Cyan, Magenta, Yellow, Black 의 잉크의 양으로 표현되는 색상체계 일반적으로 포토샵에서는 RGB 모드로 작업하지만 CYMK 모드로 변환하여 출력 하는것이 대부분이다. 이때 모니터에서 보여지는 이미지와 출력 했을 때의 이미지는 차이가 생길 수 있으므로 주의 해야 한다.

5 Ⅲ. Web Design Tool 및 특성 픽셀 & 이미지의 해상도 [ 픽셀 : Pixcel ] 컴퓨터는 모니터에 이미지를 나타낼 때 점들을 찍어서 나타낸다. 이 점들을 바로 픽셀(pixel)이라고 한다. 보통 컴퓨터 모니터의 해상도를 이야기 할 때 640*480 이니 800*600 이니 하는 말들을 사용하는데, 이는 모니터에서 화면에 찍을 수 있는 픽셀의 크기를 나타내는 말이다. 따라서 모니터가 800*600 해상도로 설정되면 가로로 800개의 픽셀, 세로로 600개의 픽셀로 화면을 표현하게 되는 것이다. [ 이미지의 해상도 ] 모니터는 72dpi, 96dpi 등의 고정된 해상도를 갖는다(640*480, 800*600에서). 그러나 이 72dpi 정도의 해상도를 갖는 프린트 출력물은 그 질이 너무 떨어진다. 보통 잡지정도의 이미지 출력물은 모니터 해상도로 계산하면 225ppi 에서 300ppi 정도의 해상도를 갖는다는 것을 고려한다면 당연히 이미지의 작업은 72ppi 에 맞춰져서는 안될 것입니다. 하지만 이미지 해상도가 높으면 로딩속도가 오래 걸려 사용자로 하여금 불만을 자아낼 수 있으므로 웹에서의 해상도는 통상 72dpi로 통일 시킨다.

6 Ⅲ. Web Design Tool 및 특성 그래픽 파일 포맷 [ GIF ] GIF (Graphics Interchange Format) 파일 - 미국의 온라인 서비스인 컴퓨서브(Compuserve) 회원들이 그래픽 파일을 교환할 목적으로 고안 특징 - LZW 압축을 이용하여서 압축률이 높고, 그 방식이 단순해 압축 해제에 걸리는 시간이 짧다. JPEG 포멧보다는 압축률이 낮으므로 같은 크기의 이미지를 비교하면 상대적으로 용량은 크지만, 사용되는 색상이 단순한 경우 용량도 줄어들고, JPEG 와 같은 압축으로 인한 이미지의 손실이 적다. 또한, JPEG 에는 없는 다양한 형태의 포멧을 지원합니다. (Transparent GIF, Interlaced GIF, Animated GIF) 그러나, GIF는 사용할 수 있는 컬러수의 제한을 받는다. 8 비트 이하의 컬러 이미지만을 저장할 수 있으므로 24비트 이미지를 GIF 파일로 저장하려면 디더링(dithering) 처리를 해주어하는데, 팔레트를 만들고 컬러의 수를 줄이는 이 과정에서 이미지의 일부가 손상된다. 그러므로, GIF는 256칼라이내로 표현 하는 경우의 이미지나, 경계선이 뚜렷하고 단순한 색상으로 이루어진 이미지, 간단한 아이콘이나 로고 제작에 적합하다.

7 Ⅲ. Web Design Tool 및 특성 그래픽 파일 포맷 [ JPEG ] JPEG (JPG:Joint Photographic Expert Group) 파일 24 비트 이상의 해상도를 지원하고, 압축률이 좋은 포맷. 반면, 손실 압축 알고리즘을 이용하므로 압축비율을 높게 지정하면 이미지가 많이 손상되는 단점이 있다. GIF 파일의 이미지를 JPEG로 저장하려면 컬러를 24비트로 늘려준 후 저장해야 하기 때문에, 24 비트의 컬러를 구현해야 하는 고해상도의 이미지나 사진, 3D 이미지 제작에 적합.

8 각각의 용도에 적합한 Tool을 활용하여 디자인 생산성 및 작업의 품질을 제고
Ⅲ. Web Design Tool 및 특성 Web Design Tool 각각의 용도에 적합한 Tool을 활용하여 디자인 생산성 및 작업의 품질을 제고 Main Graphic Design Photoshop : Adobe사, 주 Design Tool, Design 구상 및 2D Graphic 작업 Illustrator : Adobe사, 각종 Logo및 아이콘, Illustration 작업 Homepage Editing Dreamweaver : Macromedia사, HTML 제작, Dynamic HTML, Java Applet 및 Java Script 저작 Animation Design Flash : Macromedia사, 2D Animation, GIF Animation, Banner 제작, Demo Site 및 Multimedia Content 제작 Document Design Microsoft Power Point : 제안 및 Presentation용 Document, Story Board 제작 Microsoft Word : 회의록 및 Contact Report 용

9 Ⅲ. Web Design Tool 및 특성 Web Design Tool 의 특성 ▶ Photoshop Adobe® Photoshop® 6.0 은 모든 사용자들이 사용 가능한 강력한 이미지 편집 기능들을 갖춘 이미지 편집 프로그램 가장 광범위하고 생산적인 도구 세트들을 제공하여 Photoshop은 창의성,효율적인 작업, 모든 미디어에 사용 가능한 고품질의 제작품을 완성하도록 한다.

10 Ⅲ. Web Design Tool 및 특성 Web Design Tool 의 특성 ▶ Illustrator Adobe® 시스템사의 벡터 드로잉 툴. Photoshop이 사진 등을 이용한 편집디자인의 비프방식의 그래픽 툴이라면 Illustrator는 어떠한 상황에서도 깨짐이 없으며, 자유로운 변형과 스케치가 가능한 벡터 방식의 그래픽 툴 이다. 캐릭터, 마크 도안, 일러스트레이션 등을 간결하면서 깨끗한 이미지를 추구하는 디자인에 많이 사용

11 Ⅲ. Web Design Tool 및 특성 Web Design Tool 의 특성 ▶ DreamWeaver 웹 에디터로써 Macromedia에서 내놓은 위지위그{WYSIWIG} 방식으로 홈페이지 제작 시 타 프로그램과 비교해서 아주 뛰어난 기능을 갖추고 있으며 사용자 중심의 인터페이스와 자바스크립트의 지원 및 확장, 외부 프로그램과의 연계 작업등이 돋보이는 프로그램 WYSIWIG ? what you see is what you get 위지윅이란, 사용자가 원하는 대로 쉽게 디자인 할 수 있고 디자인한 화면을 자동으로 HTML문서로 만들어 주는 기능을 말한다.

12 Ⅲ. Web Design Tool 및 특성 Web Design Tool 의 특성 ▶ Flash 벡터 드로잉(Vector Drawing)을 기반으로 한 웹에니메이션 기능과 프로그래밍 기능이 결합한 멀티미디어 제작 도구. 웹상에서 실시간으로 화려하고 다이나믹한 애니메이션을 구현할 뿐 아니라 사운드까지 작은 용량으로 구현 할 수 있다. 파일용량도 작으면서 고품질의 이미지를 구현 할 수 있다