SuperGame

포토샵 작업 중 그림파일을 layer 단독으로 사용하고 싶을 때가 있습니다

포토샵에서 쌓여있는 레이어를 단독으로 저장하고 싶을 때는 작업중인 해당 레이어를 선택합니다 

레이어를 선택한후 마우스 오른쪽 버튼을 누르면 아래 그림과 같이 Export As를 선택합니다

그렇게 하면 아래 그림과 같이 내보내기 형식의 창의 뜨게 됩니다 여기서 파일 설정을 하고 모두 내보내기를 클릭하면 됩니다 

아래 화면과 같이 파일이 저장되어진 모습입니다 

간단하게 유용하게 써먹을수 있는 포토샵(Photoshop)  레이어 기능이었습니다 

포토샵 이미지 작업을 하면 레이어로 나눈 이미지를 순번대로 따로따로 저장하고 싶을 때가 있습니다 

그래서 레이어 이미지를 분리하여 따로 저장하는 방법을 알아 보려 합니다 

아래 그림과 같이 캐릭터가 있는데 팔 다리 몸통 머리 나머지 관절 부분이 레이어로 나누어 작업되어졌습니다 

먼저 Export -> Layers to files 를 선택하여 들어갑니다 

그러면 이미지 파일을 저장할 Brouwe를 선택하고 변환할 이미지 파일 타입을 선택한 다음 Run을 누릅니다 

그러면 아래 그림과 같이 레이어 이미지가 각각 이미지 파일로 나누어져 저장하게 됩니다 

게임 작업할때 캐릭터를 게임 엔진으로 옮길 때 유용하게 사용할 수 있습니다 

포토샵의 레이어로 그림파일을 만들고 그것을 이용해 이모티콘으로 제출할 GIF 파일의 움직이는 이모티콘을 만들 경우가 있습니다.

그래서 이번 시간에는 움직이는 이모티콘을 포토샵에서 어떻게 만드는지 알아보겠습니다

보통 카카오톡에서 움직이는 이모티콘 사이즈가 360 X 360을 기본으로 하고 있습니다  

그래서 먼저 이미지 사이즈를 360X360으로 잡고 이모티콘 작업을 합니다 

프레임 단위로 이미지를 포토샵 레이어에 작업을 합니다 

이렇게 포토샵 레이어 작업이 끝나면 window -> Timeline을 들어가서 Timeline 작업창을 엽니다.

Timeline 작업창이 열리면 Create Frame Animation 을 선택하고 클릭합니다

Timeline 창에 레이어를 하나한 등록 해야 하는데 타임라인 오른쪽의 작은 줄무늬 모양의 아이콘을 클릭하면 Make Frames From Layers를 들어가서 누릅니다. 

그러면 타임라인 작업창 레이어별 프레임의 그림이 등록되게 합니다 

플레이하면 레이어별 프레임 소요 시간을 설정 할수 있습니다 각 프레임 아래에 숫자를 클릭하면 소요시간을 조정할 수 있습니다

타임라인에서 작업이 끝나면 GIF파일로 출력을 하면 됩니다

Export -> Save for Web(Lagacy) 단축키는 Alt+Shift+Ctrl+s 를 누르면 GIF 파일을 출력할 수 있는 옵션 창이 나오게 됩니다 

출력 옵션 창이 나오면 출력 파일을 GIF로 설정을 하고 Save 버튼을 누릅니다 

Gif 파일을 열어보고 원하는 프레임 동작이 되는지 확인합니다

이전다음

0

포토샵 꿀팁을 소개합니다 

아주 유용하게 써먹을 수 있는 포토샵 기능입니다 

그림과 그림 사이의 자연스러운 연결할 수 있는 포토샵 기능을 소개합니다 

Rectanguler Marquee tool 사각 툴을 사용하여 연결할 부분을 드래그합니다 

그림과 같이 빈 그림과 그림의 빈 공간을 드래그합니다  

포토샵 윗바에 있는 

Edit -> Convert Aware Fill을 누릅니다 

그러면 아래 그림과 같이 연결할  이미지와 이미지 사이의 연결할 수 있는 설정 화면으로 이동하게 됩니다 

아래 그림과 같이 사각툴로 드래그한 부분을 이미지와 이미지 사이의 연결 부분을 미리 보기 형식으로 나타내어 주기도 합니다.

아래쪽 ok 합니다 

그림과 그림이 자연스럽게 연결된 모습을 확인 합니다 

그림과 그림 사이의 연결 뿐만 아니라 그림과 그림 사이의 경계선이 불규칙하게 보일 때 자연스러운 연결 그림을 원한다면 이 기능을 사용하면 원하는 작업을 얻을 수 있을 거 같습니다 

게임에서 백그라운드 그림을 작업할때 그림의 연속하여 반복되는 부분이 있는데 그럴 때 첫 그림 끝자락과 마지막 끝자락이 자연스럽게 연결되어야 백 그라운드 배경이 연속적으로 흘러갈 수 있는데 포토샵에서 이런 기능이 있어서 정말 편 한 것 같습니다 

한층 게임 만들때 수월 할 거 같습니다 ㅎㅎ

보통 포토샵 작업할 때 여러 개의 이미지 파일을 한꺼번에 불러들여 포토샵 CC의 레이어에 올려놓고 작업을 하고 싶을 때가 있습니다.

그래서 포토샵 CC 의 유용하게 사용할 팁을 소개하고자 합니다  

여러 개의 이미지 파일을 한꺼번에 포토샵으로 불러들이는 방법 

File -> Scipts -> Load Files into Stack 은 누릅니다 

그러면 Load Layer 창이 나오고 이미지 파일을 불러 들일 준비를 합니다

 Load Layers 창에  Browse... 을 클릭합니다 

그러면 불러들일 이미지 파일이 보일 것 입니다.

이미지 파일을 전체 선택하여 OK 버튼을 클릭합니다

Load Layers 창에 불러올 그림파일의 이름이 Load 된 것을 확인합니다

확인이 끝나면 OK 버튼을 누릅니다

오른쪽 하단의  Layer에 그림 파일이 불러온 걸 확인합니다  

포토샵 CC에서 유용하게 작업할 수 있도록 하는 꿀팁입니다

 포토샵을 사용하면서 가끔 여러 개의 이미지 파일을 레이어에 불러들여야 되는데 고민을 많이 하게 됩니다.

이런 꿀팁을 알아 두면 포토샵 CC 작업할 때 작업 속도를 높이고 작업효율이 한층 수월해 질 수 있습니다 

포토샵 CC의 오른쪽에 있는 툴바의  올가미 툴 (Lasso Tool)을 선택하여 딸 그림을 대충 선택합니다 

최대한 공간 영역을 좁게 하여 딸 이미지를 올가미 툴로 드래그합니다 

툴 바 아래에 있는 마스크 툴을 두번 클릭하면 마스크 될 영역의 색깔과 농도를  선택하여 ok 버튼을 클릭합니다 

브러시 툴을 선택하여 그림을 제외한 마스크 영역 나머지 부분을 색깔 칠 합니다.

세밀하게 이미지 부분만 남겨 놓고 배경 색을 칠합니다 

마스크툴을 해제하면 선택영역이 그림만 따로 정밀하게 선택됩니다 

Ctrl + N 을 눌러서 새창을 열과 이동 툴을 이용하여 그림을 이동시켜 봅니다 

내가 선택한 그림만 정확하게 이동되어진 모습을 확인할 수 있습니다 

포토샵에서 마법봉 툴 같은 걸로 하면 어느정도 이미지를 딸 수 있어도 정밀하게는 따기가 어려운 게 사실인데 마스크를 활용하면 더욱더 정밀하게 딸 수 있는 것 같습니다 

모션 캡쳐나 이팩트 및 그래픽스 작업할 때도 유용하게 써먹으면 참 좋을 거 같습니다 

우리가 포토샵을 이용하여 캐릭터나 사물을 그릴 때 대칭으로 그림을 그릴 때가 있습니다

그래서 대칭으로 한쪽만 그려도 그림전체를 완성시킬 수 있는 포토샵의 기능을 소개합니다

유용하게 써먹을 수 있으니 알아두면 편리합니다

먼저 포토샵 도구 툴에서 브러시를 선택합니다 그리고 윗방에 있는 대칭 모양의 아이콘을 누릅니다 

그러면 어떤 대칭을 사용할 것인지 메뉴가 나옵니다 

제일 많이 사용하는 Vertical을 선택합니다 

좌우로 대칭을 나눌 수 있는 기준선 모양의 선이 생깁니다

기준선을 기준으로 그림을 그려 넣습니다 

대칭 모양의 그림을 완성합니다 

Channels의 알파레이어를 만듬니다

텍스트 도구 툴을 선택하여 글자를 완성합니다 글자를 완성하고 윗바의 체크박스를 누릅니다

Edit -> Transform -> Distort 를 눌러서 텍스트를 글자 모양을 편집합니다

글자 편집이 완성되면 Select -> inverse (단축키 Shift + Ctrl +i) 를 눌러서 선택영역을 반전 시킴니다 

Filter -> Blur -> Gaussian Blur... 를 눌러서 글자의 빛을 주는 이팩트를 설정합니다

Filter -> Noise -> Add Noise 를 눌러서 글자의 이팩트를 줍니다

Ctrl + D 를 눌러서 글자의 선택영역을 삭제하고 알파채널을 끄고 나머지 채널을 켜줍니다 

Filter -> Render -> Lightig Effects 를 누릅니다

빛의 영역을 글자에 적당히 조정하고 Rroperties 를 조정하여 Ok 를 누릅니다

Image -> Adustments -> Color Balance.. 를 누르고 컬러를 조정합니다 

완성 

그림에 따라 패스를 만들고 패스에 따라 문자를 만들 수 있습니다

먼저 펜툴을 선택합니다

그림에 따라 펜툴로 패스를 연결합니다

패스 연결이 마치면 텍스트 문자 툴을 누릅니다

패스 첫부분을 선택하고 문자를 입력합니다 

레이어 창에서 옆에 있는 Paths창을 열고 빈 공간을 클릭하면 패스 표시를 없앨 수 있습니다 

포토샵 CC에서 텍스트 글자의 굵기와 테두리 색깔을 넣어서 보기 좋은 텍스트를 완성해 보겠습니다.

보통 텍스트를 사용할 때  텍스트를  써 놓고 포토샵의 이팩트 기능을 활용하는 경우가 많습니다 

하지만 오늘은 다른 경우의 텍스트 활용 기능을 소개합니다

텍스트 문자를 완성할 때 유용하게 써먹을 수 있습니다  

그래픽스 작업하는 사람들에게 유용한 방법을 소개합니다

먼저 도구 툴 중에서  텍스트를 만드는 아이콘을 선택하고 Horizontal Type Mask Tool을 선택합니다

그리고 윗부분에서 글자 폰트와 글자 크기 및 색깔을 선택합니다 

그러면 배경이 약간 붉으스므르 하게 나타나게 됩니다 글자를 영역 안에 넣습니다 

글자를 완성하면 윗 메뉴에서 체크 모양의 아이콘을 클릭합니다 

그러면 점선 모양의  텍스트가 나옵니다 

아래 그림과 같이 적절하게 말풍선에 텍스트 글자가 들어가 있네요 ㅎㅎ

글씨 안의 색깔을 채워 넣기 위해서 Edit -> Fill (단축키 Shift + F5)를 눌러서 메뉴바가 나오면 Foreground color를 선택하고 ok 합니다

자신이 원하는 색깔을 선택하여 Foreground color를 지정하여 채워 넣기를 합니다.

그러면 깔끔하게 점선 안으로 색깔을 넣게 됩니다 

그러면 텍스트 색깔이 채워지는데 글씨를 두껍게 하거나 다른 색깔로 테두리를 만들려면 Edit -> Stroke를 들어갑니다 

이러면 글자 굵기를 크게 할 수 있고 글자의 테두리를 다른 색으로 넣을 수도 있습니다.

stroke 메뉴바가  나오면 글씨 굵기 및 Color를 선택하고 ok 합니다 

적절한 글자의 굵기와 색깔을 지정합니다.

글씨 테두리가 이쁘게 나오네요 ㅎㅎ 

이번 Tutorial 은 예시로 보여 준 것이고 사용자의 따라서 다양하게 텍스트를 이쁘게 완성시킬 수 있습니다 

다양한 방법으로 포토샵 cc의 텍스트 굵기와 테두리의 색깔을 넣는 방법을 소개해 보았습니다

저는 처음 포토샵을 사용할 때 텍스트의 굵기를 어떻게 조절할지 몰라서 궁금하였는데 포토샵 cc의 이런 기능이 있었습니다 

좋은 팁으로 포토샵 cc를 활용하면 좋겠네요 ㅎㅎ

내가 좋아하는 그림을 열고 Edit -> Define Brush Preset 를 엽니다

그러면 등록할수 있게 이름을 설정하고 저장할수 있습니다

저장하고 브러시를 사용 합니다

Brush Settings 를 여시면 브러시가 등록 되어 있는 것을 확인 할수 있습니다

포토샵 도구 툴바 중에 사각 툴을 이용하여 이미지 부분을 드래그합니다 

그리고 상단의 Select -> Inverse 를 눌러서 부드럽게 할 바깥쪽 이미지를 선택합니다 단축키는 Shift +Ctrl +i입니다

그리고 CTRL+ALT + R 키를 눌러서 아래 사진과 같이 Feather를 조정하여 부드럽게 할 수치를 올립니다

안쪽 사각 영역이 매끄러운 사각 영역으로 변합니다

DEL 키를 눌러서 바깥 부분을 삭제시킵니다 

Ctrl + D 키를 눌러서 사각 영역을 해제합니다 

어도비 포토샵으로 시퀀스를 불러올 때 시퀀스를 레이어로 변환하여 불러오고 쉽을 때 가 있다

먼저 포토샵에서  Scripts -> Load Files into Stack을 연다

Browse 를 눌러 시퀀스 파일이 있는 경로를 찾아 시퀀스를 등록한다

등록을 하면 OK 버튼을 누른다

만약 시퀀스 레이어 순서를 바꾸고 싶으면 

Arrange ->Reverse 를 하면 순서가 바뀐다

베놈을 그려 보았습니다.

각 관절과 몸통 을 분리 하여 그렸습니다.

완성작 

animateCC 로 그렸는데 잘 나온것 같습니다 ㅎㅎ

마지막으로 

Animate cc 로 작업한 인디 게임입니다.

구글 플레이

https://play.google.com/store/apps/details?id=com.hoseok.flightcom

원스토어

https://onestore.co.kr/userpoc/game/view?pid=0000734004