롤스토리디자인연구소

GIF이미지(움직이는 사진)임에도 불구하고, 평소 보는것과 다르게 동영상처럼 부드럽거나 아름다운 애니메이션(Animation)이 가미된 이미지를 보신 적 있으실 겁니다. 거창한 제목 '에펙을 활용한 전문적인 GIF이미지 만들기'를 써놓았지만, 에프터이펙트(After Effects)툴을 다룰 수 있다면, 포토샵과 함께 멋진 GIF이미지를 만들 수 있습니다. ▲ 포토샵에서 최종 작업을 거친 완성 GIF이미지 우선, 위의 GIF이미지는 최종적으로 완성된 예제 입니다. 바로, 이런 느낌이죠. 이런 형태의 GIF이미지를 그저, 포토샵(Photoshop)에서 제공하는 기능으로 만들려고 한다면 그야말로, 엄청난 장인정신(?)이 있지 않고서는 불가능할 정도의 수준 입니다..

인물사진의 다리를 늘리듯이 특정한 영역의 배경을 티가 안나게 늘리는 방법에 관하여 알아보겠습니다. 티가 안나게 늘린다는 말은, 원본 사진이 애초에 이랬던 마냥, 최대한 자연스럽게 하기 위함입니다. 예를들어, 위의 그림과 같이 왼쪽 영역으로 자연스럽게 이미지 배경을 더 늘리고자 한다면, 늘리고자 하는 만큼 캔버스 사이즈를 더 키우고, 그저, 배경을 늘리기만 하면 됩니다. 아래의 예제를 따라해보며 배경을 늘려 봅시다. 01. 배경을 늘리기 위해서, 늘리고자 하는 캔버스의 방향을 미리 정한뒤, Image - Cancas Size 를 눌러, 캔버스 사이즈를 내가 원하는 방향과 크기만큼 늘린다.(캔버스 사이즈 옵셩창에서 앵커를 이용하면, 내가 원하는 방향으로만 캔버스 사이즈를 늘릴 수 있다) ▲ 왼쪽으로 캔버스 ..

'로고'라는 것은 언제나 간결하고 상징적이여야 한다고 생각하는 롤스토리에서, 단순히 원형의 틀로 디자인된 '롤스토리(http://rollstory.tistory.com/)' 로고를 포토샵을 이용해 만들어 보는 과정입니다. (PC버전에서는 이미지를 클릭하면, 큰 사이즈로 보실 수 있으며, 맥의 command버튼은 윈도우의 ctrl버튼과 같습니다.) 01. 가로세로 512px, 해상도 300의 새창을 만든다. (아무래도 로고형태기때문에 해상도는 72가 아닌 300으로 한다) 02. 새창을 만들었다면, 가이드라인을 활용하여 2등분되는 라인을 만들어 놓는다. 03. 원형 쉐이프 툴을 이용하여, 400px의 정원을 만들고, 다시 그 안쪽에 375px 크기의 정원을 만든뒤, 미리 그어둔 가이드라인의 중심에 정렬 시..

'Genie Studio'로고 제작. 지니의 요술램프처럼 원하는 것을 들어주는 스튜디오 라고해서 정해진 '지니스튜디오' 디즈니 캐릭터 중 램프의요정 '지니(Genie)'를 상징하는 이름에 맞게, 램프모양의 심볼을 제작하였으며, 정갈한 느낌의 서체안에서 첫글자 'G'를 변형하여 완성된 '지니스튜디오'의 최종 로고 입니다.

지난번 클리핑마스크(글하단링크참조)에 이어 이번에는 레이어 마스크를 알아보도록 하겠습니다. 레이어 마스크 또한 포토샵에서 아주 많이 쓰는 기능중 하나입니다. 레이어 마스크(layermask)는 클리핑 마스크와는 다르게 레이어 자체에 마스크를 입혀 검정색(지움)과 흰색(지우지않음)의 개념으로 마스크를 입히게 됩니다. 아래의 예제를 보며 알아보겠습니다. ▲ 레이어마스크(Layermask)의 개념 가령, 위의 좌측상단 사진처럼 하늘(구름)이 아쉬운 사진한장과 우측상단의 하늘이 예쁘게 찍힌 사진이 있다고 예를 든다면, 두개의 사진에 레이어마스크를 입혀 합친다면 자연스럽게 아래의 사진처럼 구름과 산을 모두 살릴 수 있습니다. 01.일단, 산이 될 부분과 구름이 될 부분(사진)을 포토샵에 불러온다. 02.'구름'레..

포토샵에있는 많은 마스크 기능중에 아주 간단하면서도 자주 사용하는 마스크가 있다. 바로, 클리핑 마스크(Clipping Mask) 인데, 이 클리핑 마스크를 활용한다면, 어떠한 이미지도 틀만 만들어 놓으면 그 틀안에 쏙 넣어 버릴 수 있다. 클리핑 마스크 사용법에 대하여 알아보자. 가령, 위의 이미지처럼 스마트폰을 잡고 있는 이미지가 있다고치자. 그리고 그 스마트폰의 화면속에 아래의 배경(어떤것이든 상관 없다)을 다른곳이 아닌 화면속에만 넣는다고 생각해보자. ▲ 클리핑 마스크를 이용하여 넣을 배경 이런씩으로 말이다. 하지만, 만약에 클리핑 마스크를 모르고 있다면, 그저 화면속에 넣을 어떤이미지를 크기를 줄이고 지우개로 지우는등의 행동으로 아주 힘들고 어렵게 화면의 크기에 맞춰서 넣을 것이다. 자.. 이제..

6월이 지나고 어느덧 7월의 마지막 날입니다. 7월달엔 더 많은 글을 남길 수 있을거라 생각했는데 어쩌다 보니 포스팅수가 많이 적어서 내심 스스로 자책하고 있습니다... 제작 가이드 이외에 지금 게시글에 링크는 달지 않았지만 Design Source 부분에 괜찮은 패턴등을 정리하여 올려 놓았으니 필요하시면 참고 하시기 바랍니다. 갈수록 더워 지는 날씨속에 다들 몸관리 잘하시기 바랍니다 - GUI/UI/UX의 모든것(이미지를 클릭하면 해당글로 링크 됩니다) ■ 제작 가이드 모음

흔히보는 보드박스이다. 펜툴을 이용하는 작업이 있기에 박스의 모양 및 깊이감을 주는 색감을 잘 파악하여야 하나, 실제 박스이미지를 포토샵에 올려놓고 그대로 따라 그려도 상관 없기에 각각의 레이어로 쉐이프만 잘 분리한다면 쉽게 만들 수 있다. 01.가로세로 512px의 캔버스를 만든다. 02.위의 그림처럼 쉐이프를 만들고 direct Select툴을 이용하여 입체감을 줄 박스 앞면 쉐이프를 만든다. 03.만들어진 박스앞면에 위의 Gradient Overlay 레이어스타일을 적용한다. 04.구글 이미지등을 이용하여 오래된 종이느낌을 이미지를 찾은 뒤 다시 포토샵에 가져와 블랜딩모드를 Soft Light로 변경하고 선택영역을 이용해 나머지 필요없는 부분은 삭제한다. 05.박스에 스티커등의 택을 붙이기 위해 같..

클래식한 라디오 아이콘을 만들어 보겠다. 이번 가이드가 내용은 심하게(?)많은 편이지만 천천히 따라하다보면 쉽게 할 수 있을것이다. 저번 테이크아웃커피컵처럼 펜툴로 직접 그려야 하는 쉐이프가 없기 때문이다. 01.가로 650px, 세로 500px의 캔버스를 생성한다. 02.기본적으로 백그라운드를 어둡게 만들고, 새로운 레이어를 하나 생성한뒤, 아무 색상이나 채운다.(백그라운드를 그대로 복사해도 된다) 그리고 Fibers를 줄건데, Fibers필터는 전경색과 배경색이 무엇이냐에 따라서 마치 나무결모양의 이미지를 만들 수 있다. 위의 그림처럼 전경색과 배경색을 나무색상과 비슷하게 한뒤 Filter - Render - Fibers를 적용한다. 03.새레이어에 Fibers가 적용 됬다면 트랜스폼(command ..

구글(google)이 운영하는 소셜네트워크서비스인 구글플러스 아이콘을 만들어 보았다. 원 구글+ 아이콘이랑 완전히 똑같지는 않지만 최대한 비슷하게 만들어 보았다. 01.가로세로 512px의 캔버스를 하나 만든다. 02.캔버스 가운데 가이드라인을 그어놓은뒤 쉐이프툴로 Radius가 20px인 가로세로 200px의 쉐이프를 만든다.(가로세로 200px의 쉐이프를 만든 이유는 구글+ 아이콘이 윗쪽부분이 4등분이되어있기에 각 50px영역을 주기위해서 이다) 03.가이드라인을 끌고와 위의 그림처럼 0점을 쉐이프의 시작점으로 맞춘다.(가이드라인 화면 젤 왼쪽상단에 빈여백을 드래그한채로 내가 원하는 부분에서 놓으면 기준점을 다시 잡을 수 있다) 04.위와같이 정확하게 50px단위로 도형을 4등분 하는 세로 가이드 라..