'말랑말랑 컴퓨터/웹디자인 자료&팁'에 해당되는 글 20건

  1. 2014.08.11 포토샵 불브러쉬로 불효과내기 by S
  2. 2014.06.26 포토샵 물효과 브러쉬 (물튀기는효과) by S 299
  3. 2014.05.19 웹기획시 유용한 마인드맵 프로그램 ThinkWise(씽크와이즈) by S 6
  4. 2013.11.30 플래시로 홈페이지나 상세페이지등 웹페이지에 동영상 삽입하기(자동반복재생) by S 2
  5. 2013.11.21 작은 글씨체로 많이 사용되는 영문폰트(비트맵폰트) 모음 by S
  6. 2013.11.12 디자인을 위한 포토샵 패턴자료 1000여가지 by S
  7. 2013.11.01 플래시 액션스크립트용 키코드 자동 표시 파일 by Y
  8. 2013.08.07 홈페이지 제작 시 포토샵 이미지저장은 어떻게해야 효과적일까? (퀄리티와 용량, jpg와 gif) by S 11
  9. 2013.08.03 쇼핑몰 장바구니,주문서작성,주문결제 페이지 by S
  10. 2013.05.02 나뭇잎/단풍잎 사진 by S 20
  11. 2013.04.19 명함제작시 권장하는 한글이름 영어표기법 by S 4
  12. 2013.02.23 홈페이지 제작의 첫 단계 웹기획과 스토리보드(화면설계) 제작 by S 43
  13. 2013.02.20 유용한 픽토그램 아이콘 (딩벳아이콘) 모음 by S 57
  14. 2013.01.28 관리자페이지 UI디자인을 위한 유용한 아이콘 by S 14
  15. 2013.01.03 포토샵/일러스트 흑백만 나올때 해결법 by S 3
  16. 2013.01.02 포토샵/일러스트 단축키 비교해서 보기 by S
  17. 2012.12.28 명함,전단지,현수막 등 실사출력을 위한 디자인 작업시 알아두면 좋은... by S 8
  18. 2012.12.26 넥서스 폰트로 글꼴 미리보며 디자인하기 by S 8
  19. 2012.12.21 포토샵 PSD파일 또는 일러스트 AI파일 미리보기 방법 by S 20
  20. 2012.12.20 홈페이지 제작시 유용한 아이콘 폰트(딩벳폰트) by S 6

 

 

 

 

 

 

디자인을 할때 불모양의 브러쉬를 사용하면 포토샵에서 여러가지 효과를 낼 수 있다. 

이 브러쉬는 외국사이트 돌아다니다 얻은거...

 

 

불브러쉬 다운로드

Firebrush-by-suztv.zip

 

 

 

 

 

뭐 자기 나름의 방법이 있다면 브러쉬만 받아서 그냥 쓰면되고,

나같은 경우 아래처럼 했을때 불효과의 색감이 나름 그럴듯하게 나왔다.

 

 

일단 전경색을 'fcff07'로 맞추고

 

 

 

 

 

불브러쉬 모양중 하나를 선택.

첫번째 이미지의 불효과는 568 브러쉬를 사용한것이다.

 

 

 

 

 

상단메뉴 Window > Brushes 에서 브러쉬 설정툴을 열어서 shape Dynamics을 체크해 패턴의 다이나믹한 효과를 준다. (이건 선택한 브러쉬에 따라 다르므로 상황에 맞게 조정해야함)

 

 

 

 

 

검은색 바탕에 레이어를 추가해서 브러쉬로 적당한 모양을 그려준다.

 

 

 

 

 

그린 브러쉬 레이어를 복사해서 밑에 있는 레이어 색상(Color Overlay) 'ff0000' 로 색상 지정해준다.

 

 

 

 

 

그럼 완성~!!!

 

 

 

 

 

 

추가로 브러쉬 설정에서 Dual Brush를 체크해 102 브러쉬와 믹스해주면 아래처럼 좀 더 다른 효과의 브러쉬를 만들 수 있다.

 

 

 

 

 

 

 

 

이 밖의 불브러시 사용예)

 

 

 

 

위의 브러쉬로 꼭 불효과뿐만 아니라 다른 색상을 조합해서 여러가지 효과들을 만들 수 있으니

유용하게 사용해보자.^^

 

 

 

 

 

 
 
 
Posted by Y&S

 

 

 

 

 

 

 

간혹 디자인을 하다보면 물이 튀기는 듯한 효과가 필요할때가 있다.

 

뭐 사진을 찍어 합성을 할 수도 있고...여러가지 방법이 있겠지만 일일이 포토샵에서 효과를 만든다는건 심각한 노가다(-_-)를 요하므로 이미 만들어져있는 이런 브러쉬들을 잘만 이용한다면 충분히 멋진 효과를 낼 수 있다.

 

위의 이미지는 아래 물효과 브러쉬 중 하나를 이용해서 적당히 손을 본 것이다.

포토샵을 잘 다룰줄 안다면 좀 더 정교하고 디테일하게 합성해서 여러 효과들을 이용해 훨씬 좋은 이미지를 만들어낼 수 있을것이다.

 

 

 

 

출처는 외국사이트 여기저기 돌아다니다가 예전에 받아놓은거라 기억이...;;

브러쉬 이미지가 상당히 크기때문에 '[', ']' 대괄호 단축키를 이용해 크기를 조절해서 쓰면 될 듯...

 

 

 

 

헐...종류가 60개가 넘기때문에 용량초과로 파일 업로드가 안되네 -_-;;

필요하신분은 메일남겨주시면 보내드리겠음.

 

 

 


 

 

 

2014년 7월 11일 추가!

자료요청하시는분이 생각보다 많으시고, 제가 당분간 바빠지는 관계로 딱 오늘까지 요청하시는분만 자료보내드리겠습니다. 

 

 

 

 

 
 
 
Posted by Y&S

 

 

 

 

 

 

 

요즘은 웹기획을 안하지만 예전에 사이트 기획하면서 아주 유용하게 썼던 프로그램이 있다.

 

차근차근 생각을 정리할 수 있는 마인드맵 프로그램인 씽크와이즈(ThinkWise)인데

머릿속에 이것저것 복잡하게 떠오르는 것들을 노트에 제대로 정리하는건 사실 한계가 있기 마련이다.

 

게다가 기획 후 누군가에게 한눈에 보여주기위해서 이거만큼 편리하면서 쉬운 프로그램은 본적이 없다.

(뭐 내가모르는게 있을지도 모르지만 ㅋ)

 

특히 기획 초안을 잡을때 카테고리의 분류라던가, 메뉴들을 정하는데 아주 유용하다.

전체적인 틀을 잡고, 빠진게 없는지... 더 넣을만한건 없는지... 요소요소 주의할거나 좀 더 디테일하게 정리할 내용은 없는지...

수 많은 것들을 누구나봐도 한눈에 알수있게 정리할 수 있다.

 

 

 

 

 

사용법은 5분 정도만 익히면 될 정도로 간단.

근데 그 당시 회사에서 그냥 써서 몰랐는데 지금 찾아보니까 유료네;;

 

 

 

음...일단 현재 기획을 맡고있다면 아래에서 체험판이라도 다운받아 사용해보면 좋을 듯 하다.

 

http://www.thinkwise.co.kr/support/support6.asp

 

 

누군가에게 엄청난 걸 보여줄 거 아닌이상 딱 기본적인 기능만 써도 상관없기 때문에

스탠다드 버전 정도만 받아서 사용하면 될 듯 하다.

대부분의 프로그램들이 아무리 기능이 많아도 사실 쓰는건 몇 개 안되니까... 

 

 

 

프로그램을 설치하고, 체험판으로 진행하면 간단히 사용법을 배울 수 있는 시작 화면이 나오는데

여기서 간단사용법 동영상만 봐도 대충 알 수 있다.

 

 

 

난, 이 프로그램 쓰면서 딱 세개만 사용했다.

 

1. 입력

2. 이동

3. 진행방향

 

 

일단 새 문서를 열려면 단축키 'Ctrl+N'을 누르던가 상단의 아이콘을 클릭한다. 

 

 

 

 

 

 

 

1. 아래처럼 엔터키와 스페이스바만으로 얼마든지 원하는 사항들을 입력하면서 정리할 수 있다.

 

 

 

 

 

 

 

 

 

2. 메뉴를 이동시킬땐 아래처럼 마우스로 클릭해서(이때 클릭 위치는 위그림 1번의 파란색 영역) 원하는 위치에 옮기면 된다. 다른 메뉴의 위나 아래, 하위메뉴로 옮길 수 있다.

 

 

 

 

 

3.  맨처음 기본형태는 방사형으로, 진행방향이 방사형일땐 메뉴순서에 상관없이 아무곳이나 하위메뉴가 생성된다.

만일 좀 더 순서에 맞게 정렬하거나 상하로 이루어진 조직도 모양을 그리고 싶다면 아래처럼 진행방향을 바꿔주면 된다.

 

 

 

 

 

 

 

이것만 알아도 이 프로그램을 사용하는데에는 전혀 무리가 없으며,

아래는 내가 몇년 전 웹기획시 씽크와이즈를 활용한 예이다.

 

 

 

 

 

 

 

 

 

웹기획 관련글

2013/02/23 - 홈페이지 제작의 첫 단계 웹기획과 스토리보드(화면설계) 제작 by S

 

 

 

 

 
 
 
Posted by Y&S

 

 

 

 

 

 

홈페이지나 상세페이지를 제작하다보면 가끔 동영상을 넣어야할 때가 있다.

동영상을 유투브에 올려서 페이지에 유투브를 삽입하는건 사실 간단하지만, 위의 이미지처럼 전체적인 웹페이지의 디자인과 어울리도록 플래시에 동영상을 삽입하여 웹에 올리는 방법을 알아보자.

 

 

 

 

 

 

일단 동영상이 들어갈 페이지를 디자인하는데 이때 당연히 원본 동영상의 비율에 맞게 동영상 위치를 잡아줘야 한다.

(난 그냥 위처럼 원본동영상을 캡쳐해서 비율유지하고 사이즈만 조절해 넣는다)

 

그런다음 영상이 들어갈 부분을 제외하고 배경이 될 이미지를 jpg로 저장한다. 

 

 

 

 

 

 

 

동영상은 wmv같은 원본파일 그대로 올린다면 용량을 감당할수가 없기때문에 무조건 인코딩을 한번 거쳐야한다.

동영상 인코딩 프로그램은 많이 있지만 난 가장 대중적으로 사용되는 '다음팟인코더' 프로그램을 사용했다.

 

다음팟인코더 다운로드

 

 

다음팟인코더를 다운받고 실행시켜 아래와 같은 순서로 진행해주면 된다.

 

1. 인코딩할 동영상을 마우스로 끌어다 넣고

2. 사용자 설정 선택

3. 세부설정 클릭

 

 

 

 

 

 

1. 세부설정에서 형식을 '[FLV]플래시 비디오'로 지정해주고,

2. 비디오코덱의 '+'를 클릭하여 세세한 설정들을 지정해주면 된다.

( 비트레이트 600정도면 화질이 나쁘지 않은 선에서 낮은 용량의 동영상파일을 확보할 수 있다.

물론 좀 더 고화질을 원하거나 반대로 용량을 좀 더 낮추고 싶다면 여기서 설정을 변경해주면 된다.)

3. 포토샵에서 동영상이 들어갈 화면 사이즈를 넣어주는데

4. 이때 '화면 비율 유지'는 꼭 체크해줘야 가로세로 사이즈가 맞지 않아도 동영상이 찌그러지지 않는다.

( 만일 동영상의 정확한 비율의 가로세로 사이즈가 아니라면 가로와 세로 둘 중에 큰 쪽에 맞춰서 동영상이 생성된다.)

 

 

 

 

 

 

세부 설정을 마치고 나면 동영상이 저장될 폴더를 지정해주고 인코딩 시작.

그럼 flv형식의 동영상 하나가 생성된다.

( 난 이렇게 했더니 29.8MB의 동영상이 2.83MB로 줄었다.)

 

 

 

 

 

 

 

그럼 플래시를 열고 작업사이즈를 변경해준다. (플래시 CS3, 액션스크립트 2.0 기준)

물론 이 작업사이즈는 동영상 사이즈가 아닌 포토샵에서 디자인한 전체 사이즈이다.

 

 

 

 

 

 

File > Import > Import to Stage 로 동영상 배경이 될 jpg이미지를 불러온다.

 

 

 

 

 

 

 

불러온 배경레이어는 잠그고 새로운 레이어 하나를 추가한다.

 

 

 

 

 

동영상을 삽입하기 전 반드시 플래시를 저장해줘야하는데 삽입할 동영상과 같은 위치에 저장해주는게 좋다.

(퍼블리싱 후 나중에 파일 위치가 변경되면 동영상이 나오지 않는다)

 

 

 

File > Import > Import Video 클릭.

 

 

 

 

 

 

다음팟인코더로 인코딩시킨 'flv형식'의 동영상을 불러온다.

 

 

 

 

 

 

여기서 플래시에 동영상을 넣는 방식은 크게 두가지가 있다.

 

하나는 플래시의 지정된 위치로 동영상을 불러들이는 방식과 (1번째 Progressive download from a web server)

각 프래임에 동영상이 직접 들어가는 방식인데 (5번째 Embed video in SWF and play in timeline)

프레임에 직접 집어넣는 방식은 몇초의 짧은 동영상이라면 상관없겠지만 아니라면 로딩시간과 용량의 문제로 난 별로 선호하지 않는다.

 

그런고로 여기선 첫번째 방식을 사용하겠다.

 

 

 

 

 

스킨에서 동영상의 모양을 지정해주는데 난 아무런 버튼도 없는 동영상을 삽입할거므로 'None' 을 선택했다.

 

 

 

 

 

 만일 미디어버튼을 넣고싶다면 아래처럼 여기서 맘에드는 스킨을 고르면 된다.

 

 

 

 

 

 

불러 온 동영상의 로딩될 위치를 잡아주면 되는데

이 상태로 아무것도 하지 않는다면 동영상은 처음 한번만 재생된다. (만일 불러들이는게 아닌, 동영상을 프레임에 직접 넣었다면 플래시의 특성상 반복재생 됨)

 

그러므로, 반복적인 재생을 시킬게 아니라면 아래의 액션을 넣는 작업은 따로 하지않아도 된다.

이렇게 플래시로 불러온 동영상은 html에서 'loop' 명령이 먹지않았기 때문에 플래시 내에서 반복재생이 되도록 액션을 사용했다.

 

동영상 선택 후 이름을 지정해주고 (난 임의로 'ad'라고 지정)

액션이 들어갈 동영상 레이어의 1프레임을 선택 후 'F9'를 눌러 액션스크립트 창을 연다. 

 

 

 

 

액션을 아래처럼 넣어주면 되는데 빨간 밑줄이 동영상에서 지정한 이름이다.

 

 

 

 

 

 

이렇게 완료 후 'Ctrl+Enter' 를 눌러 swf로 퍼플리싱을 시킨다.

그럼 생성된 swf파일과 인코딩 동영상인 flv파일을 같이 서버에 올리면 된다.

 

 

 

 

 

마지막으로 html에 아래처럼 넣어주면 웹에서 동영상이 반복되어 보여진다는 것.

<EMBED SRC="동영상주소.swf" width="플래시가로크기" height="플래시세로크기"><br>

 

 

 

 

 

글이 긁어지지 않는 관계로 반복재생 플래시 액션은 파일로 올려놓을테니 필요하신분은 사용해보시길...

(플래시 액션스크립트 2.0 기준으로 3.0에선 안될지도...)

 

 

동영상삽입코드.txt

 

 

 
 
 
Posted by Y&S

 

 

 

홈페이지를 디자인 하다보면 작은 크기의 선명한 영문체가 필요할 때가 있다.

사실 이런것들은 포토샵에서 이미지로 처리하는것보다 웹폰트를 사용하여 코딩으로 직접 쓰는게 훨씬 빠르고 편리하긴하지만 글씨체의 한계가 있는 관계로...

난 예전에 이런걸로 디자인해놓고 이미지 자르기 귀찮아서 기본폰트로 막 바꿔서 코딩했던적도 있다 ㅋㅋㅋㅋㅋ

 

음.....-_-;;

 

 


어쨌든 포토샵에서 작업할 때 폰트옵션인 안티 앨리어싱(Anti-Alias)을 'None'으로 설정하고 폰트크기를 줄인다면
글자가 깨지거나 안예쁘기 때문에 이렇게 작은사이즈에 최적화 된 비트맵폰트(픽셀폰트)를 이용한다.

(비트맵폰트들은 글자 사이즈가 커지면 오히려 깨짐현상이 일어나므로 주로 8pt로 사용)

 

 

 

 

그럼 이러한 폰트들은 어떤게 있을까?

 

 

 

1. kroeger 폰트

 

대부분의 픽셀 폰트들은 자간등에 따라 시리즈별로 있는데 'kroeger'에서는 kroeger 05_55 가 많이 사용된다.

 

 

 


2. hooge 폰트

 

'hooge'시리즈 중 05_53이 많이 사용된다.

 

 


 

 3. standard 폰트

 

 

 

 

4. 04b 폰트

 

 

 

 


5. uni 폰트

 

 

 


6. Tahome

 

'Tahome'체는 8pt에서 깨지기때문에 9pt로 사용.

개인적으로 more(더보기)가 소문자로 예쁘게 나와서 사용하는 폰트이다.

 

 

 

 

 


 

영문폰트야 이름만 알면 사실 구하기도 쉽고, 

개인용으로는 무료이지만 상업용으로 사용하면 유료인 폰트도 있습니다.

문제가 된다면 파일 내리겠습니다. 

 

픽셀폰트모음.zip

 

 

 

다른 영문 픽셀폰트를 더 보고싶다면, 아래 외국사이트에서 다운받을 수 있으니 필요하신분은 이용해 보시길^^

http://pixelfonts.style-force.net/

 

 

 

 
 
 
Posted by Y&S

 

 

 

디자인을 할때 패턴을 하나하나 만들면서 하기는 힘들다.

꼭 필요한 모양이 있다면야 만들겠지만

그게 아니라면 누군가가 만들어 배포한 패턴을 포토샵에 미리 설치해두고

필요에따라 골라 활용한다면 디자인에 많은 시간을 절약할 수 있다.

 

포토샵 패턴 적용방법.

http://yslife.tistory.com/632

 

 

 

아래 자료는 예전에 외국사이트에서 돌아다니며 받아놨던 자료들인데

패턴이 대략 천개쯤 되니까 미리보기 일일이 만들다가

도저히 이건 인간이 할짓이 아닌것같아 150개쯤에서 포기 -_-;;

 

일부이긴 하지만 대충 아래같은 패턴들이라고 생각하면 된다.

이 외에도 디자인에 쓸만한 패턴들이 많으니까 필요하신분은 받아서 사용하시길...

 

 

 

 

 

 

 

 

 

용량 제한에 걸려 나눠서 올렸음.

 

패턴자료1.zip

패턴자료2.zip

 

 

 

 

 

 
 
 
 
Posted by Y&S

 

 

 

플래시에서 키보드의 특정 키를 눌렀을 경우 특정 액션을 지정할 때 예를 들어 [Ctrl]+[Enter] 키를 눌러야할 경우 아래와 같은 스크립트로 작성한다. 참고로 아래 스크립트는 무비클립 심벌에 스크립트를 작성한다는 가정하에 액션스크립트임(버전은 ActionScript 2)

 

onClipEvent(keyDown){
       if(Key.isDown(17)){    
              if(Key.isDown(13)){

                         
                }
        }

} 

 

위의 스크립트에서 17과 13은 각각 Ctrl 키, Enter 키를 의미하는 키코드다.

 

 

 

아래 파일은 이렇게 액션스크립트에서 자주 사용되는 키코드를 쉽게 입력할 수 있도록 키코드를 알려주는 플래시 SWF 파일인데 파일 첨부가 안되서 압축한 파일을 올림~

 

KeyCode.zip

 

이 파일은 무려 7년 동안 일할 때마다 두고두고 사용했던 파일이라능~

 

 

 

파일을 실행한 후 키보드의 키를 누르면 자동으로 아스키코드와 키코드를 알려준다.

아래 이미지는 키보드의 's' 키를 눌렀을 경우의 결과 화면이다.

 

 

 

 

키보드의 [Tab] 키를 눌렀을 경우의 결과임

 

 

 

 

보너스로 마우스의 더블 클릭을 구현한 액션스크립트다.

이 액션스크립트가 삽입된 버튼은 마우스로 더블 클릭하면 [액션] 부분이 실행된다.

 

on (release) {
    if (Number(getTimer()-a)<300) {
        액션
    } else {
        var a=getTimer ();
    }
} 

 

 

한 단계 더 난이도를 높여서 세번 클릭을 구현한 액션스크립트다.

 

on (release) {
    if (Number(getTimer()-a)<500) {
        액션

    } else {
        if (Number(getTimer()-a1)<500) {
            var a = getTimer();
        } else {
            var a1 = getTimer();
        }
    }
} 

 

 

 

 
 
 
 

 

Posted by Y&S

 

 

 

 

 

포토샵을 사용하면서 jpg로 이미지를 저장할때 반드시 선택해야하는 옵션이 있다.
바로 퀄리티(Quality)라는 것인데 이는 0~12까지 설정할 수 있으며 0~4까지는 Low, 5~7까지는 Medium,

8~9까지는 high, 10~12까지는 Maximum으로 구분된다.

 


그럼 여기서 홈페이지를 제작할 때 웹페이지 디자인 후 좋은 퀄리티를 내기위해

무조건 가장 높은 퀄리티(12)이미지를 저장하는게 과연 현명할까?

 

결론부터 말하자면 NO이다.

 

 

 

 

물론 홈페이지를 제작하는게 아닌 인쇄용이나 이미지 보관용이었다면 12로 저장해도 전혀 문제되지 않는다.
하지만 홈페이지를 제작할 때 데이터용량 이라는건 꽤 중요한 부분을 차지한다.
이미지 용량이 클수록 페이지 뜨는 속도가 느려지는 원인이 되기도 하며

이미지들이 들어가는 서버의 총 용량은 비용적인 부분과 직결되기 때문이다.

 

그렇다고 이미지의 퀄리티를 너무 낮춰버리면 홈페이지의 질이 떨어져버린다.
그럼 이미지의 퀄리티를 떨어뜨리지 않으면서 용량을 최대한 줄이려면 어떻게 저장해야 효과적일까?

 

 

 

 

먼저 알아둘것은 이미지 용량은 사이즈에 가장 큰 영향을 미친다.
똑같은 이미지를 같은 퀄리티로해서 1200x700사이즈로 저장했을때 405KB의 용량이 나왔다면
절반으로 줄여 600x350사이즈로 저장한다면 158KB가 나온다.

 

그 다음 영향을 미치는게 색감이다.
얼마나 많은 색의 종류가 얼마나 복잡하게 들어가있는지에 따라 용량이 천차만별로 달라지는데
때문에 그라데이션, 스트록, 패턴, 그림자 같은 효과(Effects)들이 많이 들어가면 들어갈수록

이미지 용량이 커지는게 당연하다.

 

여기서 착각하지 말아야할 건 이미지 용량을 줄여보겠다고 완성된 페이지에 수많은 레이어들과 효과들을 합쳐 jpg파일로 저장한다고 용량은 별반 달라지지 않는다는 사실이다.


이건 psd파일의 용량을 줄이는거지 jpg파일과는 아무 연관이 없다.
jpg용량은 오직 현 화면의 이미지구성이 영향을 미칠뿐이다.

같은 이미지를 같은자리에 겹쳐지게 레이어를 20개건 100개건 만들어서 저장을 한다해도

jpg용량은 처음 레이어 한개일때와 같다는 소리.


그렇다고 디자인할때 용량 신경쓰느라 그라데이션 넣어야할걸 단색으로 넣는다거나,

정해져있는 사이즈크기를 내맘대로 줄일수는 없으니 결국 이미지 저장 시 퀄리티가 가장 핵심이 되는것이다.

 

 

 

 

 

아래는 그라데이션 색상이 많이 들어가있는 이미지로 퀄리티만 다르게해서 저장한 결과이다.

 

퀄리티4 (Low) - 용량 42Kb

퀄리티7 (Medium) - 용량 50Kb

퀄리티8 (high) - 용량 60Kb

퀄리티9 (high) - 용량 69Kb

퀄리티12 (Maximum) - 용량 158Kb

 

 


 

 

 

 

 

 

위의 결과를 봤을때 4는 한눈에봐도 질이 확 떨어져보이고 7은 약간 질이 떨어진다.

 

그러나 8부터는 왠만해선 거의 식별하기가 힘든데

워낙 많은 색이 들어가있는 이미지라서 그나마 8과 9가 자세히 봤을때 약간의 차이를 보이는거지

어지간한 이미지들은 거의 구분이 힘들다고 봐야한다.

게다가 9(69Kb)와 12(158Kb)는 2배이상 용량차이가 나는데비해 결과물이 분간하기 힘들정도이다.

 

이렇게 웹상에서 사용되는 이미지들은 9~12의 퀄리티를 육안으로 구분하기 힘들기 때문에

8정도로 저장해서 사용해도 충분하며,

사진이라던가 위처럼 이미지 색상이 너무 다채롭게 들어가서

미세한 차이라도 놓치고 싶지 않다 할때만

(사실 두개를 비교해서 뚫어지게 보지않는한 왠만한 사람들은 차이를 느끼지 못한다.

홈페이지는 말할것도 없다.) 9정도 저장해서 사용하면 될 듯하다.

 

 

 

 

 

 

 

그렇다면 일반 저장이 아닌 웹용 저장은 어떨까?

 

포토샵에서 Ctrl+Art+Shift+S를 눌러 웹용 저장을 할 때 우측에 JPEG 저장 시

위와 다르게 퀄리티를 0~100까지 조절할 수 있게 나온다. 

 

 

 

 

 

 

여기서 60으로 저장했을 때 이미지 용량은 40Kb

위에서 퀄리티 4정도의 용량밖에 나오지 않지만 결과물은 퀄리티7보다 좋으며 8보다 살짝 떨어지는 정도이다.

 

 

 

 

 

 

 

 

퀄리티 70으로 저장했을때 용량은 49Kb 이지만 퀄리티9 (69Kb)와 비슷하게 나오고

퀄리티 80으로 저장했을때 용량은 64Kb 이지만 최대 퀄리티12 (158Kb)와 거의 흡사하게 나온다.

 

 

 

 

 

 

 

때문에 효과대비 용량이 낮은 웹용저장이 가장 좋다는 거~

반드시 이미지의 용량을 줄여야할 필요가 있을땐 이 웹용저장(Ctrl+Art+Shift+S)을 잘 이용하면 된다.

 

 

 

 

 

 

그럼 여기서 jpg가 아닌 gif 저장은 어떨까?

 

우리가 홈페이지를 제작하다보면 어떤건 jpg, 어떤건 gif이미지를 사용한다.

이 차이는 어디서 나오는걸까?

 

 

흔히들 gif로 저장하면 화질이 떨어지지만 무조건 용량이 적어진다고 생각하는데 이는 상황에 따라 다르다.

 

위의 이미지를 만일 gif로 저장한다면

gif최대 퀄리티인 256색상을 사용해 저장해도 이미지가 256색상을 넘어가기 때문에

퀄리티는 아래처럼 확연히 떨어지고 용량은 75Kb로 jpg퀄리티 9의 69Kb보다도 높게 나온다.

 

 

 

 

 

 

하지만 아래처럼 몇 가지 단색만을 사용했을때는 경우가 달라진다.

jpg 8로 저장했을때 용량은 33Kb지만 gif 로 저장했을땐 7Kb로 용량이 급격히 떨어지는 것.

물론 둘의 이미지는 뭐가 더 좋다고 말할 수 없을 정도로 똑같다.

 

 

 

 

 

 

이 때 이미지에 사용된 총 컬러가 64색을 넘지않기 때문에 

gif 64색이든, 256색이든 어떠한 걸로 저장해도 결과물과 용량은 같다.

(그러니 gif저장할땐 무조건 256색을 사용할 것)

 

 

 

 

 

 

한마디로 gif는 사용된 컬러가 256색 이내일때 큰 효과를 볼 수 있다는 것.

만일 한가지색의 그라데이션이 들어갔을 경우 컬러테이블이 256색 이내로 감당이 될거 같지만

 

 

 

 

 

 

아래 jpg와 비교해 봤을때 검정색쪽에 약간의 지글거림이 보인다.

사실 버튼처럼 이미지가 작아진다면 이 정도 차이는 거의 안보이겠지만 

문제는 용량이 gif가 더 커진다는 것.

jpg 8로 저장했을때 28Kb인 용량이 gif 256으로 저장하면 98Kb되어버린다는 사실.

 

 

  

 

 

그러므로 컬러테이블이 꽉 채워지지 않고 최소한 한칸이라도 비어있을때 gif 이미지로 저장하는게 좋다.

 

 

 

 

 

결론은

이미지 저장은 용량을 줄이기 위해 상황에따라 적절히 하는게 효율적인데

내가 생각하기에 용량대비 가장 적절한 퀄리티는 일반 jpg저장은 8~9정도, 웹용 jpg저장은 70 정도,

그리고 gif는 그라데이션이 안 들어간 몇 가지 단색계열저장에 사용하면 된다는 사실~

 

 

 

 

 
 
 
 

 

 

Posted by Y&S

 

 

 

카페24나 메이크샵 같은 쇼핑몰 호스팅 업체를 쓰면 모를까

개인쇼핑몰 홈페이지를 제작할때 주문페이지까지 만들어야 할 때가 있다.

 

시스템 연동이야 프로그래머가 따로 하더라도 만들고 있는 쇼핑몰에 맞게

주문페이지도 디자인해야 하는데 주문결제 페이지는 대략 4단계로 나눠진다.

 

장바구니->주문서작성->주문결제->주문완료

 

여기서 주문자가 상품에서 바로 결제할경우 주문서작성 단계넘어가겠지만

일단 쇼핑몰 필수기능인 장바구니도 만들어둬야 하기에...

디자인이나 기능에 따라 주문서작성과 결제페이지가 합쳐질수도 있겠고

카드결제나 핸드폰결제같은 경우 해당시스템과 연동되기 전

좀 더 디테일한 부분이 추가로 들어갈 수 있겠지만

내가 실제 쇼핑몰을 만들때 사용했던 아래 페이지들을 참고해서 활용하면 좋을 듯 하다.

 

 

하단에 psd파일을 첨부해 놓았으니 필요하신분은 제작하는 쇼핑몰에 맞게 적당히 수정하거나

필요한 부분만 뽑아써도 어느정도 도움이 될 듯.

 

 

 

 

 

 

 

쇼핑몰주문페이지.zip

 

 

 

 

 
 
 
 

 

 

Posted by Y&S

 

 

 

웹디자인을 하다보면 배경이 들어간 아주 멋들어진 풍경사진 같은 건 

막상 거의 쓸 일이 없다.

 

 

거의 이미지 그대로 사용하기보다는 대부분 일부만 따서 쓰거나

합성, 혼합, 변형해서 쓰기 때문인데

내가 사용해 본 바로 가장 필요했던 이미지들은

배경이 흰색으로 들어간 예쁜 오브젝트들이었다.

 

그런것들이 이미지를 따기도 쉽고

텍스트를 넣거나 다른 디자인과 합성하기 편하기 때문이다.

 

그래서 필요한 나뭇잎사진 직접 촬영 ㅋ

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Posted by Y&S

 

 

 

난 명함제작 시 영어이름을 어떻게 써야되나 쓸때마다 고민했던 기억이 있다.

 

자주 제작할일이 있는것도 아니라서 매번 그때그때 달랐는데

'성 이름'으로 해야하는지, '이름 성'으로 해야하는지부터 

성뒤에 콤마(,)를 붙여야하는지 이름에 붙임표(-)를 붙여야 하는지,
이름을 띄어써야되는지 붙여써야되는지,

이름 첫자만 대문자인지 각기 대분자로 써야되는지 등등을 말이다.

 

 

 


위와같이 이름하나에 쓸수있는 방법이 다양하기 때문인데

해외에서 사용할 용도로 영어명함을 제작하는경우

외국인에게 성+이름으로 사용했다가 그들에게 혼선을 줄수있다고 생각해서인지

외국용으로 만드는 명함은 특히나 이름+성을 많이 사용한다.

 

실제로 내가 받았던 명함들을 살펴보면 정말 제각각으로 표기되어있다.

 


근데 그건 아마도 순전히 명함 만들어주는 회사에 따라 달라지는게 아닌가싶다;; 
(일반적으로 고객들은 전문회사에서 맞게 잘 만들어주겠지하면서 신경쓰지 않지만

보통 제작하는 디자이너들도 그냥 기존에 선임 누군가가 했던방식으로 적당히 만들뿐이라는거...^^;;)

 

 

우리 상무님은 내가 Ko Yang-seock이라고 명함 만든걸 보시고 Yangseock Ko라고 해달라신적도 있다.
한마디로 그냥 상대방이 원하는대로 해줬던 것.

 

 

 

 

 

이렇게 제각각이었던 영문성명 로마자 표기 방식을

얼마 전 문화체육관광부에서 '이름'으로 사용하길 권장한다고 제시했다.

'성 이름'이 한국어의 정상 어순이라는 점과

한국의 전통과 언어적 정체성을 드러내도록 할 필요가 있다는 점에서 조취했다고 하는데

외국에서는 오히려 한국인, 중국인, 일본인의 성명 표기 방식을 성 이름순서로 쓰도록

명문화하고 있다고 한다.
1970년대 이후 세계 언론은 한국인의 성명을 ‘성 이름’ 순서로 일관되게 표현해 오고 있는데

실제로 해외에서 방영된 피겨대회만 봐도 피겨여왕 김연아가 나올때 "김 유 나" 이런식으로 소개하고, 

자막에 영어이름도 '성 이름'으로 나온다.

 

그들이 존중해주는 각국의 언어문화 전통을 굳이 우리나라가 외국식으로 표기한다고 바꿨던것.

 

 

 

 

 

하지만 앞으로 공무원들의 명패나 명함을 '성 이름'순서로 표기하도록 권장하고

일반인들에게도 이렇게 사용하도록 홍보한다고 하니 영문으로 명함제작시 이제 고민하지 않아도 될듯하다.

 

 

 

 

문화체육관광부에서 권장하는 한글 영어이름 표기법은 아래와 같다.

 

 

 

 

'성 이름'을 원칙으로하되 음절을 구분하는 '성 이-름'까지는 허용한다는 것.

 

 

이렇게 명함을 제작했는데 만일 누가 테클걸면 당당히 말하자.

문화체육관광부에서 영어이름 명함에 이런식으로 표기하라고 했는데요?라고...

 

 

근데 뭐 고객이 끝까지 우기면서 자기는 '이름 성'으로 해달라고 하면 해줘야지 별수있나 -_-ㅋ

내가쓸 명함도 아니고 말이다 ^^:;

 

 

 

 

 
 
 
 

 

 

Posted by Y&S

 

 

 

웹디자이너가 신입으로 입사하면 간단한 팝업이나 서브페이지부터 디자인을 시작해 그 디자이너가

메인페이지를 디자인하기까지는 오랜시간이 걸린다.
물론 작은 회사는 입사하자마자 홈페이지 하나 만들라고 하는 미션을 던져주지만^^;;

 

 

어쨌든 홈페이지 메인페이지를 디자인하기 전 제대로 된 절차를 밟으려면 웹기획부터 들어가야한다.
간단한 홈페이지야 바로 메인페이지부터 디자인 들어가서 그 페이지를 보여주며 고객과 상담하기도 하지만
어느정도 규모의 홈페이지라면 전체적인 틀을 짜고 컨텐츠를 확립하는 이 단계는 매우 중요하다.

고객의 의도가 맞는지... 프로그램 개발에 가능한 범위인지... 컨텐츠가 빠진것이 없나 체크하고 수정해줘야

하는것이다.

 

이 스토리보드와 메인시안만 제대로 나온다면 홈페이지 제작은 일사천리로 진행된다.
메뉴가 어떠어떠한 것이 들어가야 하는지, 이 페이지에 들어가는 컨텐츠가 어떠한 것인지,

버튼은 어떤게 필요하며 위치까지도 다 지정되어 있으면
디자인은 말 그대로 컨셉을 잡아 예쁘게 다듬고 색만 입히면 되니 작업속도가 빨라지는건 당연하다.

게다가 한 홈페이지에서는 디자인의 컨셉이 메인을 기준으로 각 페이지마다 버튼이나 폰트 등이

비슷비슷하게 들어가기 때문이다.

 

 


어쨌든 기획자가 따로 있어 고객이 원하는 방향으로 전체적인 컨셉과 프로세스, 페이지 구성을

스토리보드로 제작해준다면야 디자이너는 그 의도에 맞게 메인 페이지를 디자인하면 되지만
웹디자이너가 어느정도 위치에서 관리까지 맡고 있다면 웹기획도 할 줄 알아야 한다고 본다.

 

기획자가 따로 있지 않은 곳에선 이 역할을 메인 디자이너가 해야되기 때문이다.

 

 

 

스토리보드는 간단히 말해 홈페이지를 편집툴로 예쁘게 미화시키기 전 각 페이지마다 들어갈

사이트 화면 설계(사용자 인터페이스 설계-U.I)라 보면 된다.
이 버튼을 클릭하면 어느 페이지로 이동하고, 이 버튼은 팝업이 뜨고,

이 페이지에서는 갤러리 리스트가 어떤 방식으로 보여지고 등등의

적용 가능한 홈페이지의 모든 스토리를 담는 것.
 
디자인 전, 이 화면설계가 제대로 되야 나중에 프로세스가 꼬이지 않는것이다.
디자인 다 해놨더니 프로그래머가 이 방식으로 개발이 불가능하다고 하면

결국 다 뜯어고쳐야 되는 사태가 발생하기 때문에...

 

 


만일 초보 웹디자이너가 홈페이지 디자인을 맡게 됐을 경우 무조건 포토샵을 켜고 이것저것 시도해보기 전

홈페이지 전체의 스토리보드는 무리라해도 일단 제작하려는 페이지의 화면구성 정도는 짜 보라고 권하고 싶다.
하얀 백지에 뭐부터 시작해야 할지 몰라 헤매는 것보다 이는 디자인에 훨씬 도움이 된다.

 

 

 

 

 

 

 

일단 스토리보드를 제작할 때 가장 많이 사용하는 프로그램은 파워포인트이다.
나중에 프리젠테이션에 사용하거나 포트폴리오로 사용하기 용이하기 때문이지만 뭐 본인이 따로 더 편한 방법이 있다면 사용해도 무방하다.

 

딱히 정해진 방식은 없지만 보통 좌측에는 화면구성, 우측에는 기본 프로그램 정보, 기술정보 등을 텍스트로

기록하여 누가 보더라도 쉽게 이해할 수 있게 만드는게 좋다.

 

 

 

 

 

아래 스토리보드는 몇년 전 내가 정부과제로 만들었던것의 일부인데 참고 정도로만 보시길...

 

 

사실 스토리보드는 한번만 제대로 만들어두면 회원가입이라든가 여기저기 가져다 쓸만한게 많기 때문에

약간씩만 변형한다면 다른 스토리보드를 만들 때도 용이하다.

 

홈페이지 전체를 구성하는 이 기획단계에서 개발이 필요한부분이 있다면 당연히 개발자와도 충분한 협의가

필요하다.

개인적으로 홈페이지는 디자인보다는 사용자 편리를 위한 기능이 더 우선시되야한다고 생각되기 때문에...

아무리 예쁜 디자인이라도 사용자가 불편하다면 그 사이트가 과연 좋은 사이트일까?

 

 

 

물론~ 다른걸 다 떠나 고객이 그걸 원한다면야 해주는게 맞다고 보는데

며칠 전 재미있는 얘기를 들었다.

고객이 이 색상을 써달라고 하는데 디자이너가 그 색상은 촌스러워사용할 수 없다며 고객과 싸웠다는 것이다.

결국 그 고객은 기분나빠 못하겠다고 계약을 취소했다.

그 디자이너가 상당한 프라이드를 가지고 있는 연륜있는 디자이너였다는데 나는 참 이 상황이 의아스럽다.

 

디자이너로서의 프라이드가 모든 상황의 우선이 되는걸까...

그건 순전히 자기 만족을 위한 디자인이 아닐까...

그게 과연 훌륭한 디자이너인걸까...

 

 

 

디자인이란게 워낙 주관적인 관점이 작용하며 정답이 없다보니 항상 고객의 기호에 맞는

디자인을 찾아내기란 힘들다.

그렇다고 내 생각이 전혀 반영되지 않는다면 그 또한 디자이너로서의 가치가 떨어지는 느낌이다.

 

고객과 디자이너의 타협점을 찾는 것.

끊임없이 풀어야할 숙제가 아닌가 싶다.

 

 

 

 

 
 
 

 

Posted by Y&S

 

 

 

웹페이지 디자인 시 상징적인 아이콘이 가끔 필요할때가 있는데

유용한 픽토그램들을 모아봤다.

 

아마 포토샵의 쉐이프로 되어있는것도 있을거고 딩벳폰트로도 있는게 있을테지만

한곳에 모아두면 사용하기 편리하니까...

 

일러스트 파일이라 크기조절을 해도

포토샵에서 깨지지 않고 사용할 수 있음.

 

 

 

[홈페이지 제작 시 유용한 아이콘들]

 

 

 

 

 

파일은 일러스트 cs3로 저장되어 있으니 필요하신분은 받아가세요~

아참, 받아 가시기전에 추천 한 방 잊지마시구여~  ^-------^

 

픽토그램.zip

 

 

 

 

 

 
 
 
 
Posted by Y&S

 

 

 

 

UI 디자인은 사용자 인터페이스(User Interface)를 말한다.
즉, 프로그램을 이용해서 컴퓨터에 내용을 입력하고 명령을 내릴 때 사용자가 눈과 손이 쉽게 움직일 수 있도록 메뉴나 버튼을 배치하는작업이다.

 

홈페이지 제작 시 간혹 이러한 관리자페이지를 디자인해야하는 경우가 있다.
보통 관리자페이지는 웹기획자가 관리자기능 기획 후 스토리보드로 화면설계하여 들어가는데
한 두명의 관리자만 보는 간단한 페이지야 디자인없이 담당 프로그래머가 화면설계만 보고 바로 시스템이 연동되도록 코딩할수도 있지만
거대 쇼핑몰의 SCM같이 복잡하고 사용자들이 많은 경우는 기능이 많이 들어가는 만큼 필연적으로 UI디자인을 하고 웹사이트의 컨셉에 맞춰 전체적인 색깔과 버튼, 아이콘까지도 전부 제작해야한다.

 

가장 좋은 UI디자인은 역시 사용자의 입장에서 사용이 편리한 디자인이 아닐까 싶다.

미(美)를 위한 시각적인 요소보다 이 위치쯤에 당연히 버튼이 있어야 할거라고 생각되는 부분에 버튼을 위치시키는것. 

그러기 위해서는 본인이 제작할 사이트와 유사한 홈페이지를 직접적으로 사용해보면서 편리한점과 불편한점을 실제로 경험해 보는것이 가장 큰 도움이 된다.

 

 

작년에 지마켓과 옥션이 통합되면서 리뉴얼된 ESM plus는 초반에 상단부분이 노란색으로 배치되어 흡사 이마트몰의 분위기가 났으나 본인들도 제작하면서 뭔가를 느꼈는지 몇일 후 바로 변경되어 재밌었던 기억이 있다.

 

 

현재 ESM plus 메인페이지 (지마켓.옥션 판매자 관리페이지)

 

 

판매자들이 가장 많이 사용하게 되는 상품관리 페이지의 UI디자인.

기존 지마켓만을 관리할수있었던 GSM이 옥션의 기능을 추가하면서 사용자 편의를 위해 최대한 노력한 흔적이 보인다. 실재 사용해본 결과 상품등록이나 수정페이지를 3단계로 나누어 넘어가는것만 빼면 기존보다 꽤 편리한 부분이 많다. 현재 중간중간 업데이트도 끊임없이 이루어 지고 있고...

 

 

11번가 SCM메인 페이지

 

 

11번가 상품관리 페이지

 

 

인터파크 SCM메인 페이지

 

 

인터파크 상품관리 페이지

 

 

 

필자가 오픈마켓 및 종합몰까지 거의 10개 사이트를 넘게 사용해본 결과 한 사이트만 제대로 다룰 줄 알면 나머지 사이트는 사용방법이 거의 비슷하기 때문에 처음해보는 작업도 전혀 무리가 없다.

이는 기획자들이 사용자들의 편의를 위해 기존 사이트에서 크게 벗어나지 않는 인터페이스를 제작하기 때문인데 나만의 사이트를 만든답시고 디자인만을 우선시하여 이러한 것들을 무시한다면 결코 좋은 UI디자인이라 볼 수 없는 것이다.

 

그렇지만 웹디자이너로서 매우 큰 회사에 들어가지 않는이상 위와같이 복잡한 관리자 페이지를 만들 경험은 쉽지않다.

보통 개인 쇼핑몰이나 단순한 홈페이지의 회원관리정도의 페이지를 아래와 같이 디자인할때가 많은데 그때 사용되는 버튼이나 유용한 미니 아이콘들을 모아봤다.

 

 

 

포토샵,일러스트,엑셀,파워포인트,한글 등의 미니아이콘들과 수정,삭제,추가,보기,체크박스등의 버튼들인데 간단한 관리자페이지에서는 디자인에 크게 구애받지 않으므로 유용하게 사용할 수 있을 것이다.

 

 

 

관리자페이지.zip

 

 

 

 

 

 
 
 
 
Posted by Y&S

 

 

 

초보자들이 간혹 포토샵이나 일러스트를 사용하다가 무슨키를 눌렀는지도 모르게 왼쪽 메뉴바의 무슨색을 선택해도 흑백계열의 무채색만 나오는 경우가 있다.

 

 

 

* 포토샵의 경우

1.image->mode가 Grayscale로 체크되어 있는지 확인한다.
Grayscale로 되있을경우 웹용이면 RGB Color로 인쇄용이면 CMYK Color로 바꿔줘야되는데 이때 레이어들이 두개이상있으면 팝업창이 뜨는데 Don't Flatten을 선택해야 레이어들이 병합되지 않는다.
(아마도 새 작업창을 열때 color Mode를 Grayscale로 열었을 것이다.)

 

 

 

 

2.왼쪽메뉴바 하단의 '퀵마스크모드'가 눌러져 있는지 확인한다.
만약 눌러져있다면 다시한번눌러 스탠다드모드로 변경해주면 된다.
(이건 색상변경 하려다가 간혹 실수로 눌러진다.)

 

3.채널이 레드나 블루 옐로우 같은 한 채널이 선택되 흑백이 된 경우

Ctrl+2,3,4를 누르면 한채널만 보여 작업창이 흑백으로 보여지는데 이건 선택된 레이어를 변경하거나 추가하는등 아무 작업을 하면 원래대로 돌아온다.

 

 

 

 

 

* 일러스트의 경우
일러스트는 작업창이 CMYK모드라하더라도 컬러가 GrayScale로 되있을 경우 흑백으로 나온다.

일단 오브젝트가 아무것도 선택되지 않은 상태로 오른쪽 Color팔레트에서 CMYK를 체크해주면 색상선택시 컬러가 제대로 나올것이다.

 

만약 작업한 오브젝트를 선택하면 다시 Gray가 되는경우 오브젝트도 선택해서 CMYK를 체크해줘야 된다.
이때, 오브젝트가 그룹으로 되있고 색상이 한종류가 아니면 선택했을때 아래처럼 물음표 표시가 나타나는데

이런경우는 그룹을 해체해서 하나하나 다 CMYK로 바꿔주거나 전체를 일단 회색계열의 한가지색으로 통일시킨 후 위 같은 작업을 해야한다.(여러개의 오브젝트를 한꺼번에 선택해서 바꾸는것도 방식은 동일하다.) 

 

 

 

이와같은 작업 후 제대로 된 컬러를 다시 사용할 수 있을것이다.

 

 

 

 


Posted by Y&S

 

 

 

포토샵과 일러스트는 같은 어도비사의 프로그램이라서 각 프로그램에서만 사용할수 있는 고유의 기능을 제외하고 동일한 단축키가 많다. 그렇지만 동일한 단축키라도 다른기능을 적용시키는 것이 있으므로 포토샵과 일러스트 단축키를 한번쯤 비교해서 봐두는게 좋다. 실무에서 많이쓰는 단축키 위주로 정리 (CS버전 기준)

 

 

공용 단축키는 검정

일러스트만 적용되는 단축키는 빨간색

포토샵만 적용되는 단축키는 파란색

 

 

파일관련 단축키
Ctrl+N : 새파일 만들기
Ctrl+O : 파일 불러오기
Ctrl+W : 파일 닫기
Ctrl+Art+W : 열린 파일 모두닫기
Ctrl+S : 파일 저장하기
Ctrl+Shift+S : 다른 이름으로 저장하기
Ctrl+Shift+Art+S : 웹용 파일로 저장하기
Ctrl+P : 프린트하기

 

 

편집관련 단축키
Ctrl+C : 복사하기
Ctrl+X : 잘라내기
Ctrl+V : 붙여넣기
Ctrl+Z = Ctrl+Art+Z : 한단계씩 계속 뒤로

Ctrl+Shift+Z : 한단계씩 계속 앞으로
*포토샵의 Ctrl+Z는 방금 전단계의 실행취소 기능이다.

 


오브젝트/이미지/레이어 관련 단축키

Ctrl+G : 선택한 오브젝트(레이어) 그룹으로 만들기
Ctrl+Shift+G : 묶인 그룹 해제
Ctrl+] : 선택한 오브젝트(레이어)를 한단계 위로
Ctrl+[ : 선택한 오브젝트(레이어)를 한단계 아래로
Ctrl+Shift+] : 선택한 오브젝트(레이어)
를 맨위로
Ctrl+shift+[ : 선택한 오브젝트(레이어)를 맨아래로


Ctrl+T : 자유변형

Ctrl+L : 레벨 조정
Ctrl+Art+M : 이전 사용했던 커브사용(그냥 커브는Ctrl+M)
Ctrl+U : 색/채도 조정
Ctrl+Shift+U : 흑백전환 
Ctrl+Art+Shift+B : 블랙 앤 화이트(cs3이상버전)
Ctrl+B : 컬러밸런스
Ctrl+Shift+I : 선택영역 반전

Ctrl+D : 선택영역 해제
Ctrl+J : 선택영역 복제
Ctrl+Shift+J : 선택영역 잘라서 복제
Ctrl+E : 레이어합치기

Art+I+I : 이미지 사이즈 변경

Ctrl+Art+C : 캔버스 사이즈 변경

Art+Delete : 전경색채우기
Ctrl+Delete : 배경색채우기

Ctrl+2 : 선택한 오브젝트 잠그기

Ctrl+Art+2 : 잠긴 오브젝트 모두 해제
Ctrl+7 : 오브젝트 클리핑 마스크 만들기 (맨 상단에 있는 오브젝트의 교집합만 보이게...)

= Ctrl+Art+G : 레이어 클리핑 마스크 만들기 / 해제

Ctrl+Art+7 : 클리핑 마스크 해제

Ctrl+8 : 맨 하단의 오브젝트를 기준으로 두개의 오브젝트가 겹치는 부분만을 없애준다.

Crl+J : 떨어져 있는 패스 기준점 이어주기
Ctrl+D : 변형작업 반복

*포토샵의 Ctrl+F 와 유사하다(한번적용시킨 필터반복)

 

 

글자관련 단축키
Ctrl+shift+O : 텍스트 -> 도형으로만들기(아웃라인처리)
*포토샵에서 텍스트->이미지화는 레이어에서 마우스 우클릭하여 Rasterize Type 클릭

Ctrl+Shift+R : 오른쪽 정렬
Ctrl+Shift+L : 왼쪽 정렬
Ctrl+Shift+C : 가운데 정렬
Ctrl+Shift+J : 정렬 초기화
Alt+↑ / Alt+↓ : 행간 넓히기/행간 좁히기
Alt+→ / Alt+← : 자간 넓히기/ 자간 좁히기

 


보기관련 단축키
Ctrl+space+클릭 : 이미지 확대
Ctrl+Space+드래그 : 범위만큼 확대보기
Ctrl+Art+ Space+클릭 : 이미지 축소
Space+마우스 드래그 : 화면이동(손바닥)
Ctrl+ + : 스크린 확대보기
Ctrl+ - : 스크린 작게보기
Ctrl+0 : 도큐먼트를 화면에 딱 맞게 보기
Ctrl+1 : 실사이즈(100%)로 보기 

Ctrl+3 : 오브젝트 감추기 
Ctrl+Art+3 : 모든 오브젝트 보기 

Ctrl+1 : 레드채널보기

Ctrl+2 : 그린채널보기
Ctrl+3 : 블루채널보기

Ctrl+R : 눈금자보기
Ctrl+; : 안내선보기 / 숨기기
Ctrl+Art+; : 안내선 잠그기 / 풀기
Ctrl+' : 격자(Grid)보기 / 숨기기 
F : 화면 모드 바꾸기
Tab : 툴 패널과 패널 숨기기 / 보이기
Shift+Tab : 패널만 숨기기 / 보이기

 

 

 

 

일러스트 and 포토샵 기본 툴 단축키 비교(CS3기준)

*아래 기본툴에서 빨간색은 빈번하게 쓰이는 단축키이므로 반드시 알아두는게 좋다. 

 

 

 

 

마지막으로 글자와 관련해서 단축키는 아니지만 매우 간단한 팁하나를 말하자면

키보드에는 엔터키가 두개 있는데 포토샵에서는 이 두개 엔터키의 기능이 다르다. (일러스트는 적용되지 않는다.)

 
shift위의 엔터키는 일반적으로 많이 쓰이는 기능으로 글씨가 써지는 어느 프로그램에서와 같이

글자를 아래행으로 내릴때 쓰이고 오른쪽 숫자판에 있는 +아래의 엔터키는 '편집완료'를 실행시킨다.

다시말해 글자를 쓰다가 우측 끝 엔터키를 누르면 text 편집모드에서 빠져나와 쓰던 글이 완료된다.

 

 

 

이걸 모를때는(평소 숫자판의 엔터키는 사용을 안해서...) 글을 다 쓰고나면 다른 기본툴을 눌러 글자완성을 시켰는데 

우연히 알게되어 사용한 후로 엄청 편해졌다.

일러스트도 이게 적용되면 좋을텐데

최소한 내가 쓰고 있는 cs3 버전에서는 두개의 엔터키가 모두 첫번째 기능뿐이 못해 불편하다 ㅠㅠ

 

 

 

 

포토샵 단축키 만드는법 보러가기(상하/좌우반전)

 

 

 

 

 

 
 
 
 
Posted by Y&S

 

 

 

웹디자인일을 하고있다 하더라도 디자이너가 한명뿐인 회사에서는 명함,로고,전단지,현수막 등의 디자인을 당연스레 요구한다. (내가 다니던 회사가 그랬었다 ㅡㅡ;;)

 


기본적으로 포토샵은 비트맵방식이고 일러스트는 벡터방식이라서 일러스트로 작업한것은 크기를 무한대로 키워도 이미지가 깨지지않는 반면 포토샵으로 작업한것은 크기를 키우거나 줄이면 이미지가 깨진다. (화질이 떨어진다)

 

- 벡터(Vector)방식 : 드로잉방식, 오브젝트 방식이라고도 하며, 이미지의 포인터들을 직교 좌표계 (X,Y축으로 처리 : 단, 수학과는 다르게 모니터 화면상에서는 좌측상단이 기준점이다) 로 처리하는 방식. 수학적 함수로 기술 가능한 오브젝트를 처리의 단위로 사용한다. 따라서 오브젝트의 수가 얼마나 맣고, 각 오브젝트가 얼마나 복잡한가에 따라 파일 크기가 달라진다.


- 비트맵(bitmap)방식 : 이미지를 개별적인 픽셀의 집합으로 처리하는 방식. 즉, 수많은 점들이 모여서 하나의 이미지를 구성하는 방식. 이미지를 일정 비율 이상으로 확대하였을 때 픽셀간의 계단 현상이 나타나는 단점이 있으나 사진과 같은 풍부한 색감을 효과적으로 재현할 수 있다는 장점이 있다.


 

실사 출력물은 일러스트로 작업하는것이 당연 좋으나

복잡한 이미지나 효과를 표현하기에 한계가 있기때문에 포토샵과 병행하여 사용하는 것이다. 

사진촬영한 이미지나 웹상에 올려진 이미지, 스캔이미지등 우리가 흔히 이미지라 부르는 것들은 전부 비트맵 이미지라 보면된다.

 

 

1. 포토샵으로 출력물 작업 시

 

작은 사이즈의 전단지같은 작업을 할때 글씨만 사용하는게 아닌 디자인이 요구된다면 굳이 일러스트가 아닌 포토샵으로 전부 작업해도 괜찮다.
단, 포토샵으로 작업하려면 처음부터 고해상도(300dpi)로 작업해야 출력 시 화질이 떨어지지 않는다.

(저해상도로 작업해서 고해상도로 바꾸는건 의미없음)

 

큰 출력물을 화려한 디자인이 요구 되 포토샵으로 전부 작업해야할 경우,
이미지 작업 시 실제크기의 1/2이나 1/4 정도로 줄여 비례에 맞춰 작업해도 출력된 상태는 큰 차이 없다.

100%로 작업하면 시간이 오래걸리므로...

 

이미지모드는 CMYK로 저장해야 출력 시 원래 색을 뽑아낼 수 있다.

만일, RGB로 작업하고 있었다면

Imgae->Mode->CMYK Color 선택 후 Don't Rasterize -> Don't Flatten 선택해서 CMYK로 변경해준다.

(모드 변경시 Rasterize를 선택하면 벡터이미지가 비트맵이미지로 변경되고 Faltten를 선택하면 모든 레이어가 하나로 합쳐진다)

스캔이미지를 사용할경우 해상도를 300dpi 이상으로 하여 스캔한 후 사용한다.

 

정리하자면 포토샵에서 새창을 열때(Ctrl+N) Resolution이 보통 72로 되어있으므로 300으로 바꿔주고 컬러모드를 CMYK로 설정후(흑백작업은 Grayscale)작업할것!

 

 

 

2. 일러스트 작업 시

 

크기가 큰 작업물의 경우 이미지만 따로 포토샵에서 CMYK로 저장하고 일러스트에서 이미지를 불러와서 간단한 글씨같은건 따로 작업해줘야 깨끗하게 나온다.
일러스트에서 Flie -> Place로 작업한 이미지를 불러올 때, 하단 link에 체크해제를 한후 불러와야 다른컴퓨터에서 파일를 열어도 이미지가 그대로 보인다.

 


 

 

 

이미 불러 온 이미지가 링크해제를 했는지 안했는지는 Window -> Links를 눌러 아래와같이 확인할 수 있다.

 

 

 

 

 

* 일러스트로 작업이 끝난 후 인쇄소로 넘기기 전
-작업 후 모두 드래그로 선택해서 Edit->Edit Color⇒Convert to CMYK를 체크한다.
-작업 후 모두 드래그로 선택해서 Ctrl+Shift+O 를 눌러 글자를 모두 도형으로 바꿔줘야 다른곳에서 파일을 열어도 폰트가 바뀌지 않는다. (아웃라인처리)

-요새는 인쇄소도 최신버전을 깔아놓는데가 많지만 아직까지도 낮은버전의 프로그램을 그대로 사용하고 있는 경우가 있으므로 저장 시 일러스트 9 버전으로 저장해서 넘기는게 좋다.

(높은버전에서 저장하고 낮은버전에서 파일을 열경우 안열리기 때문에...)

뭐 이미 거래하고 있는 인쇄소가 cs버전으로 저장해서 넘겼는데 아무소리 없었다면 상관없는 얘기지만...

 

 

 

* 일러스트로 명함작업 시 명함사이즈는 두가지가 있다.

88x54 / 92x52
두가지 중 명함재질에 따라 만들 수 없는 사이즈가 있으므로 시안 작업전에 사용할 재질에 따른 가능 사이즈를 미리 알아두는게 좋다. (내가 맡기는 인쇄소는 명함 기본종이는 88x54사이즈만 가능했다)

 

테두리 1~3mm정도는 잘릴 수 있으니 감안하고 디자인해야하며 테두리에 라인을 넣을경우 잘리거나 한쪽은 얇게, 한쪽은 두껍게 제작될 수 있으니 라인은 최대한 안 넣는것이 좋다.
인쇄소에서는 라인이 잘릴수있으니 4mm이상으로 넣으라고 권장하는데 그럼 제대로 나왔을경우 두껍고 안 예쁘다 ㅡㅡ;;

 

명함의 폰트 크기는 디자인이나 폰트종류에 따라 다르겠지만 대략 이름은 13~14pt, 전화번호나 주소는 7~9pt 사이즈면 적당하게 나온다.

 

 

 

 

간혹 인쇄소에서 회색이나 검정을 1도로 바꿔달라고 말하는 경우가 있다. (K의 농도로만 회색표현)
 
CMYK를 모두 사용해서 회색을 표현한 경우 인쇄시 얼룩이 질수 있기 때문인데,
어떤 인쇄물의 경우는 1도(CMYK중 하나)로만 사용했을 경우와 4도(CMYK)를 사용했을경우
비용적인 차이가 나기도 한다. (명함같은경우는 합판인쇄이기 때문에 비용차이가 나진않지만...)
회색이나 검정을 선택해서 Edit->Edit Color->Convert to Grayscale 을 선택하면 1도로 바뀐다.

 

 

 

 

*1도색과 4도색의 차이
 

1도: k=50 이런식으로 CMYK중 하나의 농도만으로 색상을 표현

 


 

 

 

4도: C=66, M=59, Y=58, K=40 이런식으로 4가지색이 다 들어간것

 

 

 

 

 

같은회색으로 웹상에서 똑같이 보이더라도 인쇄 시 다르다.
(매우싼 인쇄물 작업시 k=100 or k=80 이렇게 한가지색으로 모든 색을 통일해서 작업해야하는 경우도 있다.)

 

모니터 색상에 맞춰 작업을 했을 때 출력물과 원하던 색이 다를경우가 많다.
이는 모니터 제품 혹은 밝기 명암조절 등에 따라 전부 다르므로 디자인 작업시 이를 감안해야 한다. 

 

전문적으로 편집 디자인을 하는게 아닌 이상 이 정도만 알아도 작업하는데 크게 무리가 없을거라 생각된다.

 

 

 

 

 

 
 
 
 
Posted by Y&S

 

 

 

포토샵이나 일러스트로 디자인을 하다보면 폰트를 골라야할때가 많다.

매번 쓰는 폰트가 아니라면 가끔씩 상황에 맞는 폰트를 고르기위해 몇 백개..심지어 몇 천개의 폰트에서 내가 원하는 디자인의 폰트를 골라내기란 쉽지않다.

게다가 폰트를 하나씩 확인해가며 열심히 바꾸다보면 종종 프로그램이 팅하는경우도 있다.

 

이럴때 아주 유용한 프로그램이 폰트뷰어 프로그램인 넥서스폰트(NexusFont)이다.

하단의 첨부파일을 다운받아 더블클릭 후 [확인],[다음] 정도만 눌러주면 설치는 간단하다.

 

 

그럼 넥서스폰트 프로그램 사용법을 간단히 알아보자면,

일단 설치된 넥서스폰트 프로그램을 더블클릭해서 실행시키면 컴퓨터에 깔려있는 폰트들을 자동으로 불러오며

아래같은 화면이 나타나는데 컴퓨터 자체에 설치되어 있는 폰트말고 따로 폰트를 모아놓은 폴더가 있으면

왼쪽에 +를 클릭해서 추가해주면 컴퓨터에 직접 폰트를 설치하지 않아도 설치된것처럼 포토샵이나 일러스트에서 사용할 수 있다.  

 

 

 

이렇게 추가한 폰트는 아래처럼 상단 창에 글씨를 써넣어 원하는 글씨체를 미리보며 폰트를 골라낼 수 있는데,

굵게,기울게,밑줄표시 이런것들도 오른쪽 상단 스타일에서 적용해주어 효과적용 후까지 미리 볼 수 있다.

그럼 스크롤바만 내리면서 손쉽게 많은 글씨체를 한번에 볼 수 있는것이다.  

 

 

 

 

넥서스폰트 프로그램을 사용하는 이 작업방식은 컴퓨터에 자체에 수 많은 글꼴을 설치하지 않아도 되니 컴퓨터에 무리를 주지 않으며 (컴퓨터 부팅시 속도가 느려지게 하는 원인) 

작업할때만 넥서스 폰트를 연 후 포토샵이나 일러스트 프로그램을 켜면 프로그램 열리는 속도가 훨씬 빨라진다.(프로그램이 열릴때 컴퓨터에 깔린 폰트를 읽기때문...)

 

단, 넥서스폰트에만 추가해놓은 폰트는 컴퓨터 자체에 폰트가 설치된게 아니므로 넥서스폰트 프로그램을 먼저 열어놓고 다른 프로그램을 실행해야 폰트가 연동되어 사용할 수 있다.

 

 

 

Tip

이렇게 넥서스 폰트로 원하는 디자인의 폰트를 찾았다하더라도 포토샵에서 영문으로 보여지는 폰트때문에 정작 포토샵에서 찾지 못하는 경우가 있다.(넥서스폰트는 폰트가 한글로 표기된다)

 

포토샵에서 Edit -> Preferences -> Type 눌러 아래와같이 체크해제를 해주면 폰트가 한글로 표시되어 폰트를 찾기 한결 수월해질 것이다.

 

 

 

넥서스폰트 프로그램 시작 시 업그레이드 버전을 받으라고 하는데 업그레이드 된 것은 기능추가가 많이 된 것인지 상당히 복잡하길래 난 여전히 구 버전 사용중~(사용법이 매우 간단하므로 ㅋ) 

 

 

 

NexusFont2Setup.exe

 

 

 

 

 

 
 
 
 
Posted by Y&S

 

 

 

디자인 작업시 무슨파일인지 확인할때 psd파일이나 ai파일을 미리보기로 확인하고 열어보는 경우가 많다.

이게 기존에 잘되던것이 어느순간부터 미리보기를 눌러도 보이지 않게 되었는데

아래처럼 jpg파일은 잘 보이지만 psd파일과 ai파일은 보이지 않는 것이다.

 

 

 

cs버전부터 이런현상이 나타나는데 사용자 입장에서는 여간 불편한것이 아니다.

어도비사가 Adobe Bridge를 쓰게 하려고 미리보기 지원을 없애버린듯 한데

어차피 사용자들은 결국 방법을 찾아서 쓰기 마련인데 왜 그런 욕먹을 짓을 하는지...

 

 

포토샵 cs이전 버전에 있는 psicon.dll파일을
C:/program File/Common Files/Adobe/Shell 폴더 안에 넣어주면 되는데
하단에 첨부된 레지스트리 등록 프로그램을 실행시키면 자동으로 들어간다.

 

 

csPsdPreviewFix-dicamania.exe 파일 실행시 포토샵 미리보기가 가능해지고
csAiPreviewFix-dicamania.exe 파일 실행시 일러스트 미리보기가 가능해지는데,

그냥 실행 후 '예'만 눌러주면되므로 설치방법도 간단하다.

 

 

 

 

 

 

 

만일 레지스트리 등록 프로그램을 실행했는데도 미리보기가 되지 않는다면 

컴퓨터 재부팅을 해보거나 같이 첨부된 psicon.dll파일을 직접 shell폴더를 생성해

C:/program File/Common Files/Adobe/Shell 경로안에 넣어주고

레지스트리 프로그램을 재실행 시켜보시길...

 

 

그럼 아래처럼 pad, ai 파일형식이 미리보기가 가능해진다.

 

 

 

 

csPsdPreviewFix-dicamania.exe

csAiPreviewFix-dicamania.exe

psicon.dll

 

 

 

 

추가!!!

============================ 윈도우7  psd파일 미리보기  ============================

 

저도 몰랐는데 윈도우7은 위의 방식이 먹히지 않는 모양입니다.

아무래도 이미지를 미리보는 프로그램을 따로 써야될 듯 합니다. 아래 파일을 다운받아 실행 후 사용해 보세요.

 

 

64비트용

mysticthumbs197_x64.msi

32비트용

mysticthumbs198_x86.msi

 

 

이 파일들은 무료이지만 구 버전이기 때문에 사용 시 다른 프로그램과 충돌이 생길 수 있는 경우가 있습니다.

 

그러시다면  http://mysticcoder.net/mysticthumbs.html 이곳에 들어가셔서 직접 최신버전을 다운받아 실행해 보세요.

최신버전은 30일만 무료체험판이고 그 후에 구입해서 사용해야 할 겁니다.

 

 

최신버전 무료체험판은 페이지 중간 하단쯤에 있는 부분에서 다운받아서 실행시키시면 됩니다.

 

 

 

 

 
 
 
Posted by Y&S

 

 

 

글씨를 쓰면 숫자나 영어, 한글대신 그림이 나오는 걸 딩벳폰트라고 한다.


폰트로 아이콘을 대신하면 포토샵에서도 일러처럼 크기 조정에 따른 이미지 깨짐형상이 없기때문에
이미지로 된 아이콘을 사용하는거보다 좋다.

enessicons폰트는 1234567890ㅂㅈㄷㄱ... 이런것들을 쓰면 아래처럼 아이콘으로 나타난다.

 

 

 

이런아이콘들은 홈페이지 제작시 픽토그램으로 많이 사용되는 것들인데,
시작->제어판->글꼴 안에 폰트를 넣고 포토샵을 다시 시작하면 폰트를 사용할 수 있다.

 

 

 

 

enessicons.ttf

 

 

 

 

 

 
 
 
 
Posted by Y&S