포토샵 스타일 통한 아이콘 만들기

2013.07.04 10:29





포토샵 스타일....?

오늘은 아이콘 만드는데 정말 유용한 포토샵 기능소개해 드릴께요. 보통 테마를 만들때 어떠한 컨셉을 갖고 이미지와 아이콘을 제작합니다. 발광테마, 레드테마, 블랙테마,음각테마등 근데 이러한 컨셉테마를 어떻게 만드는지 궁금하시죠? 모든아이콘에 같은 효과가 적용되어 있고 그 효과 또한 규칙적이면서도 정리되어있는 테마사님들의 그래픽 자료를 많이 보셨죠? 대표적은 (주)백님, 예현님, 소닉님등 이분들이 하고 있는 아이콘 수정 방법에 대해 소개해 드릴께요. 하나하나 일일이 다 수정하는게 아니고 하나의 아이콘을 이쁘게 효과를 만들어서 그 내용을 저장해서 다른 아이콘에도 일괄적으로 적용할 수 있는게 포토샵의 강력한 기능 스타일(Style) 기능입니다.

지금까지 간단한 포토샵 기본을 소개해드리고 있는데 이건 포토샵기능 중에서도 알고 계시면 정말 유용하게 사용할 수 있는 기능입니다. 테마를 만들때 포토샵으로 반복작업을 많이 하게 되는데 이때 많이 사용하는 기능이 포토샵 액선과, 스타일이 있습니다. 액션은 일련의 과정을 모두 저장해서 한번에 여러 명령어를 똑같이 적용할 수 있는 기능이라면 포토샵 스타일은 하나의 이미지에 효과를 저장해서 다시 사용할 수 있는 기능입니다. 본 포스팅을 읽고 액션에 관한 포스팅을 보시면 이해가 쉬우실 겁니다. 액선은 포토샵의 스타일 기능을 포함해서 사용하실 수 있습니다.


테마사님들이 자신만의 독특한 아이콘을 만들 때 빠질 수 없는 기능입니다. 규칙적으로 일정한 효과를 여러 아이콘의 이미지를 적용하실 때 정말 유용하게 사용하실 수 있습니다. 수작업으로 하나하나 이미지를 수정하게 되면 통일성과 규칙성이 깨지게 되는데 스타일로 저장시켜 놓으시면 한번 클릭으로 아이콘의 동일 효과가 들어가는 기능을 사용하실 수 있습니다. 테마를 갖는 규칙적인 이미지 표현에는 포토샵 스타일(Style)을 강력 추천해 드립니다. 이러한 작업에 포토샵 스타일은 최적화 되어있습니다. 




"같은 효과를 여러 아이콘에 통일되도록  한방에 변화시키는 명령어 Style 입니다."

(색상, 효과, 형태등 자기가 정한 대로 지정하여 모든 이미지에 적용할 수 가 있습니다.)


일관편집을 할 수 있는 포토샵 액션이 궁금하시면 여기 를 클릭해주세요.









자료 포스팅 하는데 힘이 될 수 있도록

ViewOn 손가락 버튼 꾹 눌러주세요.

(로그인 안하셔도 됩니다)








포토샵 스타일 만들기

포토샵 스타일이란 말그대로 어떠한 옷의 스타일, 유행하는 스타일에 쓰이는 단어처럼 일정한 방식이나 규칙등의 집합체가 되겠죠^^ 그리고 사용하는 방법은 별거 없습니다. 우선 자기가 수정하고 싶은 아이콘이나 이미지 하나를 준비해주세요. 그리고 편하게 효과를 줘서 자신만의 아이콘을 만들어 주시기만 하면됩니다. 그리고 그 스타일을 저장만하시고 적용하시면 됩니다. 스타일(Style)을 모르게되면 100개의 아이콘을 수정할때 하나하나 일일이 다 수정하셔야 하지만 스타일을 아는순간 자기가 작업한 효과를 저장하고 클릭한번으로 다른아이콘에도 똑같은 효과를 적용하실 수 잇습니다.

(스타일이 이쁘게 적용되기 위해서는 작업하는 이미지 크기가 어느정도 비슷해야합니다. ±50%정도)


그럼 우선 포토샵에서 한번 저장해두면 평생 사용할 수 있는 자신만의 포토샵 스타일을 만들어 보겠습니다.


우선 포토샵으로 작업해야 하니까 포토샵을 오픈해주세요.





우선 포토샵 스타일을 만들어야하니까 편집하실 아이콘이나 이미지를 오픈시켜주시면 됩니다.

(이때 아이콘은 단색위주로 되어있는 아이콘을 선택하시는게 좋습니다. 포토샵 스타일은 내부이미지 공간보다는 외곽선쪽에 효과가 주는 부분이 많으면 내부 이미지색상이 많아지면 효과가 생각보다 좋지 않습니다.)



아이콘을 오픈하시면 레이어 하나가 생성됩니다. 레이어 관련 내용을 모르시면 관련 포스팅을 참조해주세요.

레이어 스타일 (Layer Style)을 주기 위해 레이어 이미지 우측여백공간을 마우스로 떠블클릭해주세요.



이제 레이어 스타일을 적용할 수 있는 세부 항목이 나타납니다. 좌측 Style쪽을 보시면 다양한 효과항목이 있는데요. 이건 한번씩 눌러보시는게 이해가 빠릅니다. 각 항목(Drop Shadow, Inner Shadow....등)을 눌러 보시면 세부 설정항목이 바뀌면서 나타납니다. 가장많이 쓰는 옵션중에는 Drop Shadow(그림자효과), Bevel(음각, 양각), Color Overlay(색상입히기)등이 있습니다.


아이콘에 발광효과를 내기 위해서 아래와 같이 4가지 레이어 스타일을 적용했습니다.

그림자효과와 안쪽 색상번짐, 바깥쪽 색상 번짐, 그리고 이미지 색상을 변경했습니다. 세부설정 스샷참조


Drop Shadow 설정



Outer Glow 설정



Inner Glow 설정



Color Overlay


세부항목을 조금씩 수정해보시고 맘에드는 아이콘 형상이 나오셨으면 이제 저장해 주시면 됩니다.



아래 New Style 아이콘을 클릭해주세요.



이젠 자신만의 포토샵 스타일을 생성하는 단계입니다. 자신이 구분하기 쉬운 이름으로 저장해주세요.



이름 입력하고 OK눌러주시면 이젠 OK나 팝업창 우측상단 X표를 눌러서 나오시면 됩니다.



잘 저장되었는지 확인해 볼까요? 상단 메뉴바에서 Window=>Style을 선택해서 스타일 창을 나오게 해주세요.


가장 하단에 보시면 자신이 입력한 스타일 이름이 저장되어 있는걸 알 수 있습니다.


이제 자신만의 포토샵 스타일 하나가 생겼습니다. 

스타일 만들기 어렵지 않죠? 기존 자신이 이미지 수정한걸 저장만 시켜놓으시면 됩니다. 이제 이 스타일을 다른 아이콘에 적용시켜볼까요?



포토샵 스타일로 아이콘에 효과 적용하기

이제 다른 아이콘 하나를 오픈해주세요. 이것도 역시 단색 아이콘입니다.



스타일 창을 아직 안닫으셨죠? 그럼 자신이 저장한 스타일 항목을 그냥 클릭해보세요.

짜잔~~~ 이전작업한 효과가 똑같이 들어갑니다. 스타일 적용하기는 정말 쉽죠?? 



이뿐 아니라 자신의 설장한 포토샵 스타일은 저장을 해서 지인에게 보내줄 수도 있습니다.

스타일 윈도우창 우측 상단에 세부설정을 눌러보세요.



이부분에서 스타일 리스트를 정렬하는 옵션을 바꿔줄 수 있고 Save Styles...를 통해서 asl로 저장이 가능합니다.


원하는 이름으로 포멧을 [Styles(*.ASL)]로 놓고 저장해주시면 됩니다. 이렇게 저장된 ASL은 Load Style로 불러올 수 있습니다.


지금까지 여러분은 어떻게 아이콘을 만들고 계셨는지는 모르겠지만 포토샵 스타일을 이용하시면 아이콘 수정과 이미지 수정을 정말 빠르게 깔끔하게 수정할 수 있습니다. 마지막으로 주의 말씀 드리면 스타일은 아이콘 크기에 민감합니다. 자신이 큰이미지의 아이콘에서 스타일을 저장해서 작은아이콘에 스타일을 적용하면 효과가 나지 않습니다. 다시 세부항목을 수정하셔야합니다. 스타일을 저장하실 때는 그림크기에 대한 정보를 같이 이름으로 남겨놓으시면 이후 작업하는데 더욱더 빠른 작업을 하실 수 있습니다. 





아래 강좌에 사용된 아이콘 원본과 작업본을 첨부해 드릴께요 실습해보세요^^


   



강좌에서 제작된 PSD파일을 공유해드릴께요. ASL도 추출해보시고 사용해보세요


azdesign_Style.zip








이상으로   포토샵 스타일 통한 아이콘 만들기 포스팅을 마치도록하겠습니다.





포스팅 내용이 유익하셨다면 아래 ViewOn버튼 꾹 눌러주시고 

응원의 댓글 부탁드립니다.^^


조금이나마 테마작업하는데 도움이 되어드리고자 포스팅 하고 있는  Azdesign™ 입니다.^^






* 필  독 *

- 블로그내 모든 포스팅 내용 도용 및 2차배포는 금지합니다. -

루팅관련 자료 사용으로 인한 소프트웨어,하드웨어 오류에 대한 책임은 전적으로 본인에게 있습니다.

(항상 자료 사용하시기 전에 백업을 필수로 해주시고 자신의 기종과펌웨어 버젼을 확인하세요)



저작자 표시 비영리 변경 금지
신고


azdesign™ 포토샵 / 강좌 및 자료/포토샵 기초강좌 , , , , ,



  1. Blog Icon
    Az님팬

    열심히 배워 갑니다 감사합니다

  2. Az님팬님 열심히 포스팅 하고 있습니다.^^

  3. Blog Icon

    좋은정보 배워갑니다 :-)

  4. Blog Icon
    기예

    쉽고 재미 있네요.
    많이 배워 갑니다.

  5. 부족한 자료 이렇게 봐주셔서 감사합니다.^^

티스토리 툴바