윈도우팁

게시글 '웹디자이너가 알아야하고 배워야하는 프로그램'에 대한 정보
웹디자이너가 알아야하고 배워야하는 프로그램
등록일 2006-03-30 조회 5,009
포토샵?

1. 포토샵에 대하여



존 놀과 토마스 놀 형제에 의해서 만들어지기 시작한 포토샵 프로그램은 90대 초 그래픽 전문회사인 Adobe사에 의해서 탄생하게 되었고 전 세계의 그래픽 애호가들에게 가장 사랑 받는 디지털 그래픽 편집 도구이다.



가. 포토샵 이미지 프로그램의 특징
• 다양한 이미지 포맷 지원
• 강력하고 고품질의 이미지 결과물 산출
• 직관적인 인터페이스로 사용자의 편리성 추구
• 다양한 편집 도구 제공
• 다양하고 독특한 필터의 제공으로 이미지 효과의 극대화
• 웹 문서용 이미지의 최적화
• 지속적인 프로그램의 업그레이드
• 폭 넓은 기술적 정보 취득의 용이성



나. 포토샵의 이용
• 책, 잡지, 신문 등의 인쇄 정보 매체 이미지 제작
• 광고지, 카다로그, 대형 간판 등의 광고 관련 이미지 제작
• 인터넷 웹 문서 제작
• 멀티미디어 CD롬 타이틀 제작
• 웹 문서용 이미지의 최적화
• 예술, 산업, 영화, 방송 관련 이미지 제작
• 게임 등의 컴퓨터 그래픽 디자인
• 교육용 학습 매체 이미지 제작





2. 해상도
하나의 이미지를 표현하는데 사용되는 기본 단위를 구성하는 픽셀의 수를 뜻한다.



가. 이미지 해상도
인쇄된 그림을 자세히 살펴보면 무수한 점들로 구성되어 있음을 알 수 있다. 즉, 그림을 구성하고 있는 이러한 점들을 픽셀(화소)이라 하며 그림을 구성하는 가장 기본 단위가 된다.
이미지 해상도란 일정한 영역 속의 픽셀 수 ppi(pixel per inch)로 나타내는데 ppi가 높으면 그림은 뚜렷하고 선명하게 보이나 파일의 크기가 커지게 된다.



나. 모니터 해상도
모니터의 물리적 해상도는 제품에 따라 조금씩 다르지만 보통 72~96dpi(dot per inch)정도 해상도를 갖게된다.
같은 크기의 그림 자료를 스캔할 경우 그림 해상도를 달리하면 모니터에는 해상도에 비례해서 크기가 다르게 나타난다.



다. 프린터 해상도
출력 장치가 제공하는 dpi(dot per inch)의 수를 의미한다. 보통 레이저 프린터의 경우 300~600dpi가 많이 쓰이고 잉크젯 칼라 프린터의 경우는 기술의 발달로 점점 해상도가 높아가고 있다.



라. 비트 해상도
각 픽셀이 표현 가능한 색상의 수를 의미하며 비트 단위로 표기한다. 즉 비트 해상도가 8비트이면 2 8 = 256 색상을 나타낼 수 있다.





3. 색상 모드

가. RGB 모드
• 각 픽셀은 빨강(R), 초록(G), 파랑(B)의 강도에 대한 정보를 가진다.
• R, G, B의 강도를 각각 256단계로 하면 한 점의 가질 수 있는 색깔의 수는 256×256×256이 된다. 즉, 각 점은 16,777,216개의 색 중에서 하나를 택할 수 있게 된다(true color : 24bit color).
• 한 픽셀을 표현할 수 있는 색깔의 수가 많으면 파일의 크기가 증가한다.



나. CMYK 모드
Cyan(파랑), Magenta(빨강), Yellow(노랑), blacK(검정) 모드는 그림을 프린트하는데 사용되며 4가지 인쇄 과정을 거치게 된다. 즉 4개의 색상 판(분판)은 각기 하나씩의 색상 잉크로 칠하면서 합성되어 온전한 이미지로 나타내게 된다.


4. 그림 파일 형식



가. 비트맵 이미지

(1) 특징
• 이미지를 구성하는 점(픽셀) 하나 하나의 집합으로 인식한다.
• 파일의 크기를 줄이기 위해 다양한 압축 기법을 사용하여 저장한다.
• 이미지의 크기를 확대, 축소를 하였을 때 원본과의 이미지 손상이 크다.

(2) 종류
• BMP : 윈도우 95/98에서 표준적으로 사용하는 그림 형식, 압축률이 낮다.
• JPG : 압축률이 매우 높아 작은 파일을 원할 때 유용하며 압축률을 높이면
이미지의 질이 떨어진다. 인터넷 등에서도 널리 쓰이며, 연속적인
톤을 가지고 있는이미지에 좋다.
• PSD : 이미지의 손상이 거의 없으며 층(layer) 개념을 지원하는 포토샵 고유의 파일 형식이다. 각 층은 RGB 모드이다.
• GIF : 인덱스 컬러 모드를 사용하는 파일이며, 인터넷 등에서 많이 사용하고 있으며 특히, Animation Gif나 Interaced Gif 등에 많이 쓰인다.

나. 벡터 이미지

(1) 특징
• 선과 면에 대해서 색깔, 굵기, 곡률, 길이의 수학적 정보가 함께 저장된다.
• 이미지를 변형시키는 것이 자유롭고 모서리가 매끄럽게 처리된다.
• 주로 라인 아트 작업에 이용된다.
(2) 종류
• WMF : 윈도우 95/98에서 표준적으로 사용하는 형식.
• CDR : 코렐드로우에서 지원하는 형식
• EPS : 아도브 일러스트레이터 등에서 지원하는 형식


5. 포토샵 6.0 화면 구성



가. 구성 요소



① 메뉴 표시줄 : 명령을 항목별로 묶어 놓은 곳이며 풀다운 메뉴 방식으로 원하는 항목을 마우스로 선택하면 된다.
② 옵션 바 : 이전 버전의 옵션 팔레트가 옵션 바 형태로 바뀌었으며 툴 박스에서 툴을 선택하면 설정할 세부 사항들이 나타난다.
③ 툴 박스 : 각종 편집 도구들을 모아 놓은 곳이다.
④ 팔레트 : 도구의 값들을 설정하거나 편집을 보조하는 곳이다.
⑤ 이미지 편집창 : 새 파일을 만들거나 불러온 이미지를 편집하는 곳이다.
⑥ 작업과 관련된 정보를 나타내는 곳이다.



나. 메뉴 요약



① File : 가장 기본적인 메뉴로 포토샵 전반과 관련한 관리 기능
② Edit : 이미지 편집과 관련된 기능
③ Image : 이미지의 색상과 형태를 변형시키는 기능
④ Layer : 레이어와 관련된 기능
⑤ Select : 선택 영역과 관련된 기능
⑥ Filter : 이미지에 독특한 효과를 나타낼 수 있는 필터 기능
⑦ View : 포토샵 작업 환경에 대한 기능
⑧ Window : 포토샵의 이미지 창과 팔레트, 툴 등을 관리
⑨ Help : 포토샵 사용에 따른 도움말 기능






Illustrator ?



업계 표준벡터 그래픽 소프트웨어
Adobe Illustrator 은 웹, 인쇄, PDA, 무선 장치 등 어디에서나 사용할 수 있는 전문적 품질의 그래픽을 작성하기 위해 필요한 모든 것을 제공.


이미지 품질과 파일 크기의 균형 유지

ㅁ반복되는 그래픽의 파일 크기를 최소화하는 기호
ㅁ분할 레벨 형식 및 압축 지정
ㅁ편집 가능한 SVG 효과
ㅁ작은 텍스트를 읽기 쉽게 하는 선택적 앤티 앨리어스 지정
ㅁ파일 크기를 최적화하는 웹을 위한 저장



복잡한 그래픽을 손쉽게 작성
ㅁ생생한 둘러싸기, 뒤틀기 효과 및 액체화 도구
ㅁ많은 소형 오브젝트를 신속히 작성하기 위한 기호
ㅁ투명도, 그래픽 유형 등으로 기호 세트를 칠하기 위한 기호 사용 도구
ㅁ편집 가능한 혼합 형태
ㅁ오브젝트 크기 조정, 회전, 반사 및 절단을 위한 변환 도구
ㅁ많은 수의 오브젝트를 편집 가능한 경로를 따라서 혼합하는 블렌드 도구
ㅁ오브젝트를 편집 가능한 상태로 유지하는 생생한 효과
ㅁ일관성있는 문서를 위한 편집 가능한 그래픽 양식
ㅁ완벽한 타이포그라피 제어


복잡한 작업의 자동화

ㅁ변화된 여러 디자인을 신속하게 생성하기 위한 데이터 구동 그래픽
ㅁRelease to Layers 명령으로 애니메이션용 레이어를 즉시 작성
ㅁURL 링크를 신속하게 작성하기 위한 이미지 맵


정확한 스크린 뷰

ㅁ래스터화된 그래픽이 웹에서 나타나는 방법을 보기 위한 픽셀 미리보기
ㅁ웹에서도 그대로 표시되는 컬러 선택기


정교한 컬러 효과 추가

ㅁ편집 가능한 그림자 만들기와 광선, 얼룩진 유형 등을 포함하여 자연스럽게 보이는 투명도
ㅁAdobe Photoshop?怜? 일관성있는 블렌딩 모드
ㅁ클리핑 마스크 및 불투명 마스크
ㅁ색상, 패턴 및 그라디언트 채우기


최상의 그리기 도구 사용

ㅁ업계 표준 펜 도구
ㅁ편집 가능한 경로를 따라 아크웍을 칠하는 아트 브러쉬
ㅁ편집 가능한 경로를 따라 아크웍을 칠하는 아트 브러쉬
ㅁ종이에 그리는 것처럼 쉽게 화면에 그릴 수 있는 연필 도구
ㅁ선, 호, 점선 및 모양 도구의 드래그 앤 드롭

그리드 스냅, Smart Guides 및 정렬 팔레트를 포함한 정밀 배치 도구
텍스트 및 컬러 속성을 샘플링하는 스포이드 도구
사용자 정의 컬러와 패턴을 저장하는 견본 팔레트
링크된 파일의 용이한 관리
광범위한 파일 형식의 지원


시간 소비 프로세스의 자동화

ㅁ스크립트를 사용하여 변화된 여러 디자인을 자동으로 생성하기 위한 데이터 구동 그래픽
ㅁ반복적인 작업을 자동화하는 스크립팅 지원
ㅁ내장된 자산 관리 지원
ㅁ메타데이터 지원
ㅁ일련의 명령을 적용하는 조치 팔레트


일상 작업의 가속화

ㅁ마법 지팡이 도구와 같은 강력한 선택 도구
ㅁ편집 가능한 오브젝트 및 레이어 효과
ㅁ외양 속성 세트를 즉시 적용하는 그래픽 양식
ㅁ복잡한 파일을 효율적으로 관리하는 중첩 레이어





플래시란?



매크로미디어(Macromedia)사의 플래시는 웹 애니메이션 저작 툴로서 홈페이지 상에서 빠른 애니메이션을 가능하게 하며 최소한의 파일크기와 뛰어난 애니메이션 기능, 스트리밍 기술 등을 두루 갖추고 있는 프로그램이다.
또한 플래시를 사용하면 별도의 프로그래밍의 실력이 없이도 상호작용이 가능하여 일반 사용자도 손쉽게 멀티미디어 홈페이지를 만들 수 있다.
플래시는 1996년 FutureWave사에서 개발한 FutureSplah Animator를 Macromedia사에서 흡수하여 1997년 플래시 2를 발표하면서 선풍적인 인기를 끌기 시작하여 지금 플래시 5까지 발표되었으며 본 강좌도 플래시 5를 기준으로 구성되었다.



플래시의 특징?



플래시가 전세계적으로 널리 사용되고 있는 첫 번째 이유는 동적인 애니메이션의 장점을 가지고도 용량이 현저하게 작다는 것이다. gif로 만들어진 애니메이션의 용량이 11KB라면 플래시로 제작한 swf 파일은 4KB정도로 그 파일크기가 작다. 플래시는 벡터이미지를 기반으로 하고 있기 때문에 크기에 상관없이 깨끗한 화면을 보여준다. 또한 다른 프로그램에 비해 쉬워서 누구나 조금만 노력하면 원하는 화면을 만들 수 있다는 장점이 있다. 다음은 플래시의 특징들이다.
① 벡터무비 저작도구로서 이미지의 손상이 없다.
② 스트리밍 재생을 지원한다.
③ 파일 사이즈를 최소화 한다.
④ 액션을 비롯한 지능적인 대화식 기능을 가진다.
⑤ 심벌 인스턴스를 사용하여 작업 생산성을 높인다.
⑥ 트위닝을 사용하여 쉬운 애니메이션 제작이 가능하다.
⑦ 강력한 사운드를 지원한다.
⑧ 완벽한 웹출판 및 다양한 파일 형식을 지원한다.



플래시의 작업환경?



플래시에서 작업할 때 주로 사용하는 창들의 구조는 다음의 그림처럼 메뉴바, 메인툴바, 타임라인, 드로잉툴, 스테이지, 라이브러리 창, 각종 패널창으로 구성되는데 그 중심되는 창에 대하여 간단히 설명한다.



가. 메뉴바
File, Edit, View, Insert, Modify, Text, Control, Window, Help 메뉴로 구성되며 대다수의 윈도우용 프로그램들처럼 플래시에서 사용하는 메뉴들이 모두 포함되어 있다.



나. 메인 툴바
메인 툴바는 플래시에서 자주 사용되는 메뉴들로 파일을 열거나 저장하는 기본적인 사항부터 회전, 크기조절, 정렬, 화면 확대/축소 등의 기능으로 구성되어 있으며 간단한 작업을 하고자할 때 편리하게 사용된다.



다. 드로잉 툴
드로잉 툴은 플래시 무비에 사용되는 이미지를 제작하거나 편집하기 위한 도구들로 구성되어 있다.



라. 레이어와 타임라인
타임라인은 플래시 무비를 전체적으로 제어하는 곳으로 레이어에 대한 부분과 프레임을 제어하는 타임라인에 대한 부분으로 구성된다.
레이어는 하나의 배경 위에 여러 층을 겹쳐 쌓을 수 있도록 하여 오브젝트를 분리해서 애니메이션 시킬 수 있는 기능을 지원한다.
타임라인의 각 프레임은 하나의 스테이지 화면을 의미하며 각각의 스테이지에 포함된 오브젝트들의 모양이나 애니메이션과 프레임 액션에 의해 생기 있는 플래시 무비가 만들어진다.



마. Panel 윈도우의 종류와 기능
각 객체들에 대한 정보가 Panel에 모여있어 사용자는 Panel 윈도우를 사용하여 손쉽게 작업할 수 있게 되었으며 이는 플래시5의 새로운 기능이다.



바. 스테이지
작업공간으로 모든 오브젝트들이 이 무대에서 연기를 하여 하나의 무비를 만들어 낸다고 할 수 있다.



사. 라이브러리 윈도우
심벌과 그래픽, 사운드의 저장장소로서 똑같은 이미지를 사용해야할 경우에는 심벌로 하나만 등록하고 사용하는 것이 파일의 크기를 줄일 수 있으며 다른 파일의 라이브러리도 공유할 수 있다.










드림위버(Dreamweaver) ?

'DREAM'과 'WEAVER'의 드림위버...는 꿈을 짜는 직조공이란 뜻을 가지고 있는 조합체이다.
편집 프로그램으로써 Macromedia에서 내놓은 위지위그(WYSIWIG) 방식으로 홈페이지 제작시 타 프로그램과 비교해서 아주 뛰어난 기능을 갖추고 있으며, 사용자 중심의 인터페이스와 자바스크립트의 지원 및 확장, 외부 프로그램과의 연계 작업등이 돋보이는 프로그램이다.




드림위버는 포토샵으로 작업한 이미지나 웹페이지들을 삽입 또는 수정,편집하는 프로그램으로 드림위버와 비슷한 기능을 가진 프로그램은 나모 웹에디터가 있다.

드림위버와 나모웹에디터와의 차이점은 우선 드림위버는 전문적인 홈페이지를 만들어야하는 기업의 홍보 홈페이지나 국가의 이미지를 나타낼 수 있는 그런 웹사이트를 만들때 많이 사용한다.

나모 웹에디터는 개인 홈페이지를 만들때 많이 사용.

이렇게 나모를 사용하는 이유와 드림위버를 사용하는 이유는 나모는 전문적으로 세심한 작업을 할 수 없기 때문에 일반 개인 홈페이지를 많이 사용하고 드림위버는 세심하고 전문적으로 작업 할수 있기 때문에 기업체에서 많이 사용한다.