롤스토리디자인연구소

보통 원통같은 모양에 글자나 쉐이프등을 새긴다하면 위의 왼쪽 그림처럼 원통의 기울기등을 생각하지 않고 텍스트등을 새기기 마련이다. 하지만 실제로 원통모양에 새겨진 글자는 위의 오른쪽 그림처럼 글자도 원통과 똑같이 구부러져 있다. 포토샵에서 자연스럽게 원통같은 물체에 글자등을 구부려 새기는 방법을 알아보자. 우선 위와 같이 원통이 있다고 가정하자. 01.일단은 원통에 입힐 글자나 쉐이프 등등을 기본적으로 만든다. 02.글자등을 원통의 각도에 맞게 구부리기 위해선 우선은 기준이 될 척도가 필요하다. 따라서 빈레이어를 하나 생성하고 위의 4마디 꼭지점처럼 기준이 되는 점을 찾고 Marquee툴을 이용하여 선택영역을 잡은뒤 눈에 띄는 색상을 입히고(전경색 채우기:alt + delete) 투명도를 50%정도로 조..

테이크아웃 커피 컵.. 불과 몇년 전만 하더라도 이런 테이크아웃컵을 보면 이게 뭔가 했을 수 도있지만 이제는 누구나 보면 커피컵이구나 하는걸 알 수 있다. 테이크 아웃 커피컵을 만들기 전, 일단은 이런씩의 Skeuomorphism(스큐어모피즘) 디자인은 원래 도구의 형태를 그대로 따라간다는 큰 내용을 담고 있다. 그러므로 스큐어모피즘의 아이콘에서 일단 가장 중요한 것은 아이콘등으로 만들 객체의 실제모습을 참고 하는것이 제일 좋다. 어찌됬건 아래의 과정을 보며 따라해보자. 01.가로세로 512px의 캔버스를 만든다. 02.테아크아웃커피컵의 몸체가 될 부분을 만들어야 한다. 쉐이프툴을 이용하여 직사각형 모양의 쉐이프를 만든다. 03.테이크아웃커피컵의 몸통부분을 만들기 위해 위의 그림과 같이 가이드선을 이용하..

7월의 첫번째 포스팅 이다. 이번시간에는 편지봉투 모양의 아이콘 제작과정을 살펴 보도록 하겠으며 혹여 6월에 포스팅된 제작가이드를 몇번 따라해봤더라면 이번 아이콘도 쉽게 제작 할 수 있을 것이다. 또한, 다시말하자면 필자의 작업환경은 윈도우가 아닌 매킨토쉬 포토샵 CS6로 작업을 했음을 알리며 다른 외관적인 부분은 모두 비슷하나 윈도우의 ctrl키가 맥에서는 command키 라는걸 알린다. 편지봉투 아이콘을 만들어 보자. 01.가로세로 512px의 캔버스를 만든다.(rgb,72dpi,sRGB) 02.그림과 같이 가이드라인을 가운데에 맞춰놓고 회색톤의 배경을 깐다.(흰색 배경에서 바로 작업해도 좋으나 편지봉투 아이콘이 주로 흰색으로 이루어지기 때문에 배경과 구별짓기 위해서 이다) 03.그어놓은 가이드라인의..

올해 6월에 처음 포스팅을 시작하게되어 이번 달을 마무리 하며 6월 한달동안(사실 보름정도)만들었던 제작가이드며, 리디자인한 작품등을 보기쉽게 정리 하였습니다. 다음 7월에도 더 많은 글과 더 많은 정보를 포스팅 하도록 노력하겠습니다. - GUI/UI/UX의 모든것(이미지를 클릭하면 해당글로 링크 됩니다) ■ 제작 가이드 모음 ■ UI 및 리디자인

▲제품 완성도 제 마음대로 MP3 Player를 만들어 보았습니다. 전체적인 완성도는 위와 같으며, 뭐 현실을 따지자면 한때 한국의 iriver사에서 만든 MP3플레이어가 정말 불티나게 팔린적도 있었으나 요즘엔 스마트폰의 등장으로 죽어버린 시장 중 하나가 아닌가 싶습니다. 어떻게 보면 조금 안타까운 부분일 수도 있지만, 그래도 한번씩 MP3플레이어를 사용하는 사람들을 볼 때도 있습니다. 그런 사람들은 스마트폰이 있어도 그냥 MP3자체의 음악만 재생해주는 그런 기능을 사랑하기 때문에 그렇지 않을까 싶네요.. ▲제품 소개도 전체적인 제품의 UI입니다. 일단은 실제로 버튼처럼 눌러지는곳은 최상단의 전원버튼 하나만 만들었으며, 나머지는 모두 터치식으로 제작 되었습니다. MP3플레이어를 구상하면서 제일 많이 쓰는..

아이콘의 틀(박스)을 만들어 보았다. 그냥 만들면 심심하니까 종이말린 효과도 들어가고 나무 재질의 패턴도 들어 갔다. 아래의 제작과정을 보자. 01.가로세로 512px의 캔버스를 만든다. 02.Radius가 있는 쉐이프툴을 이용하여 가로세로 400px, Radius 30px의 도형을 미리 그어놓은 가이드라인의 가운데를 기준으로 만든다. 03.위의 그림처럼 만들어 놓은 패턴을 이용하여도 좋고(글하단 패턴파일첨부), 또는 내가 원하는 이미지를 다운받아 마스크를 입혀도 좋다. Stroke도 준다. 04.다음은 총 3단계로 구성되어진 종이느낌의 레이어를 깔 차례다. 우선, 바탕레이어보다는 안쪽으로 위치하는 적당한 크기의 쉐이프를 만든다. 05.위의 그림과 같이 Gradient Overlay를 주되, Angle은..

'드래곤볼'이라는 만화를 봤더라면 이런 레이더 모양이 익숙할지도 모른다. 먼저 중요한점을 말하자면 빛느낌을 내야하므로 블랜딩모드에 익숙해야한다. 레이더 아이콘을 만들어보자.01.가로세로 512px의 캔버스를 만든다. 02.위의 그림처럼 미리 그어놓은 가이드라인의 중심을 기준으로 400px의 둥근쉐이프를 만든뒤, Subtract옵션을 이용하여 도넛모양의 쉐이프를 만든다.(레이더아이콘의 가장 밖의 테두리가 될 부분이다) ▼4가지 레이어 스타일 03.위의 테두리 레이어에 적용할 4가지 레이어 스타일을 적용 시킨다. 레이어스타일이 들어가면 위와같이 볼록한 형상의 외곽을 나타낼 수 있다. 04.레이더안쪽의 배경이 될 원형 쉐이프를 만들고, 아래 그림과 같이 Gradient Overlay를 입힌다. 중요한 것은 G..

가죽스킨을 이용하여 서류가방 아이콘을 만들어보았다. 크게 어려운건 없으나 질감을 살리기위하여 가죽스킨이미지와 노이즈필터를 사용하였으며, 모든것이 쉐이프를 이용한 아이콘인만큼, 쉐이프 옵션을 다루는데 익숙해야 한다. 01.가로세로 512px의 캔버스를 만든다. 02.그림과 같이 캔버스 가운데 직사각형 모양의 Radius15px의 쉐이프를 만든다. 03.위와같이 기본틀이되는 쉐이프에 3가지 레이어 스타일을 추가한다.(Gradient Overlay에 주는 색상이 전반적인 아이콘의 색상이 된다) ▲ 가죽스킨 이미지 04.가죽스킨 이미지를 이용하여 그림과 같이 원래 도형의 선택영역(레이어 썸네일 부분을 command를 누른채 클릭)을 잡고, 선택영역을 반전(command + shift + I)시키고 필요없는 부분..

화면을 이루는 최소 단위인 픽셀(PIXEL). 픽셀을 잘 이용하면 깔끔한 패턴을 만들 수 있다. 해외사이트의 픽셀 패턴을 참조하여 다시 정리하였다. 아래 이미지를 참조하자. ▼(이미지를 클릭하면 정확한 패턴을 볼 수 있습니다.) 총 12개의 픽셀 패턴이며 대각선, 네모, 지그재그 등의 픽셀로 만든 패턴을 정리해 보았다. 그림상의 캔버스 크기를 열어 연필툴을 이용하여 패턴을 만들어 정의하였으며, 새레이어에 Overlay모드를 적용하였다. - 패턴 파일 가져가실때 댓글 한줄씩 부탁드려요 :) (다운로드 받고 Pixel Pattern.pat파일 바로 더블 클릭하면 패턴이 포토샵내에 적용 됩니다)

한번씩 맥 유저라면 광고창에서 '맥이 느려졌나요?'라면서 게이지 아이콘이 나와서 게이지가 움직이는 아이콘을 볼 수 있다. 간단하게 게이지 아이콘 만드는 방법에 대해서 알아보자. 01.가로세로 512px의 캔버스를 만든다. 02.원형쉐이프툴을 이용하여 미리 그어놓은 가이드라인 가운데에 그림과 같이 쉐이프를 그린다.(alt + shift를 같이 누르면 중심을 기준으로 정원이 그려진다) 03.원형쉐이프에 위의 그림과 같이 Gradient와 Stroke 그리고 기본 Drop Shadow의 레이어 스타일을 적용한다. 원형 쉐이프에 레이어 스타일을 적용하면 위와 비슷한 이미지를 얻을 수 있다. 04.다음, 기존에 있던 Elipse레이어를 하나더 복사하여 레이어스타일을 모두 제거 한뒤 command + T를 이용하여..