롤스토리디자인연구소

아이콘의 틀(박스)을 만들어 보았다. 그냥 만들면 심심하니까 종이말린 효과도 들어가고 나무 재질의 패턴도 들어 갔다. 아래의 제작과정을 보자. 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)시키고 필요없는 부분..

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

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

이번 시간에는 카메라 렌즈 모양 아이콘을 제작해 보겠다. 렌즈 아이콘 역시 수많은 레이어와 레이어 스타일.. 그리고 픽셀단위의 정교한 작업이 필요한데, 제일 중요한건 수치에 맞게 정확하게 쉐이프를 완성해야 한다. 렌즈 원통이 삐둟다면 보기가 싫을 뿐더러 실제 렌즈도 그렇지 않다. 작업하기에 앞서 실제 렌즈를 유심히 살펴보며 작업 한다면 조금더 이해 하기 쉬울 것이다. 01.가로세로 512px의 캔버스를 만든다. 02.적당한 배경에 캔버스 센터에 가이드라인을 표시해둔다음에 쉐이프툴로 정원을 그린다. 그리고 위와같이 레이어 스타일을 준다.(렌즈 밖의 테두리 과정) 스트로크도 위와 같이 준다. (여기서 스트로크는 모서리 부분의 입체감을 준다) 03.기존 쉐이프레이어를 복사한뒤 레이어의 빈 부분에 마우스 우클릭..

언제부턴가 이런 형태로 윗쪽, 아랫쪽 또는 위아래 전체가 움푹패이거나 나온느낌으로 두깨감을 주어 입체(3D)형태의 아이콘이 빈번하게 보여지곤 했는데 가장 중요한것은 두깨감을 표현하는 부분의 그라데이션을 어떻게 주냐에 따라서 아이콘의 퀄리티가 결정 된다고 해도 과언이 아니다. 또한 가운데 배경 부분에 카본 느낌의 텍스쳐를 입혀 조금더 입체감을 준다면 더욱이 질감이 느껴지는 아이콘이 될것이다. 순서를 알아보자. 01.시작은 항상 도화지 부터 깔기. 가로세로 512px의 캔버스를 만든다. 02.모서리가 둥근 쉐이프툴을 이용하여 캔버스 가운데쯤에 위와 같은 도형을 만든다.(Radius는 20px을 준다 - 흔히 앱스토어 아이콘의 Radius값이다.) 03.같은 쉐이프를 미리 하나더 복사(두께를 표현할 레이어)하..

앞서 말한 바와 같이 전원 버튼 만드는 과정을 알아보겠다.가운데 심볼에 파워 버튼 말고 다른 심볼이 들어간다면 많은 아이콘을 만들 수 있다. 01.가로세로 512px의 캔버스를 만들고 작업을 시작한다. 02.가이드라인을 센터에 맞춰놓고 원형 쉐이프툴로 정원을 하나 그린 뒤 약간 회색느낌의 색을 입힌다. 03. 베이스 레이어 위에 글로시한 효과를 주기위하여 베이스 레이어를 그대로 하나 복제한다음 위와같이 Gradient Overlay 를 설정한다. 04.under glow 레이어에 그라디언드 스타일을 다 주고 난뒤에 반드시 Fill 부분을 0% 만들어 준다.(Fill 부분이 0% 되면 도형의 원색은 사라지고 오로지 레이어 스타일만 보여지게 된다) 05.under glow레이어를 또 복사한뒤 레이어스타일을 ..

3단계별 전원 버튼 - 누르기전 - 누르고 있을 때 - 누르고 난 뒤 많은 레이어와 레이어스타일로 이루어 만들어진 버튼입니다. 추 후에 정리하여 강의글을 남기도록 하겠습니다. 간만에 밝은 느낌으로 만들어 보았습니다. 버튼 만들기 과정 링크 ● [아이콘]전원버튼

애플제품을 쓰고 있다면 iPhone이나 iPad에서 홈버튼을 두번 눌러서 나오는 멀티태스킹바의 배경이나 알림센터의 배경, 그리고 MAC에서 알림센터의 배경 및 로그인화면 등등에서 위와 같은 느낌의 배경을 많이 봤을 것이다. 이번에는 이런 애플스타일 배경을 만들어 보겠다. 역시나 시작은 새캔버스를 만드는것부터 시작한다.이번편도 역시 이미지를 어디서 다운받는것이 아니라 포토샵에서 처음부터 끝가지 다 이루어진다. 01.새창을 생성하되 내가 생각하는 배경의 크기가 1000px이라면 그보다 조금더 크게 여유를 주고 새창을 만들어야 한다. (필자는 1000px의 배경을 만들기 위해 500px를 더 주었으며 이유는 글을 보면 알 수 있다) 02.백그라운드레이어를 하나 복사하고 Filter - Noise - Add N..