롤스토리디자인연구소

가령, 내가 어떠한 물건을 유리테이블 위에 올려 놨다고 하자.. 그렇다면 그 물건이 투명한 유리테이블 위에 올라가 있다는 느낌을 받을 수 있는 가장 큰 요소는 무엇일까? 바로, 본래의 물건이 비치는 그림자 일것이다. 이처럼 어떤 아이콘등을 조금더 실제처럼 보여주기위해 그림자를 가미 한다면 또다른 느낌을 받을 수 있다. 이번 시간에는 포토샵에서 쉽게 그림자를 주는 방법을 알아보자. 01.먼저 만들어 놓은 아이콘등이 수많은 레이어로 이루어져 있다면 그룹으로 묶은뒤 그룹을 통채로 하나더 복사한다.(그룹짓는 단축키 : command + G) 02.똑같은 그룹을 하나더 카피(그림자가 될 레이어)했으니 위의 그림처럼 객체를 그대로 아래로 내린뒤 트랜스폼(command + T)을 이용하여 이미지를 뒤집는다.(트랜스폼..

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

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

iCloud를 통하여 우리는 아이폰에서 찍은 사진을 아이패드 또는 맥에서 따로 전송하지도 않았는데 자동으로 각각의 사진첩에 들어가 있는걸 볼 수 있다. 이런 iCloud를 이용한 포토스트림은 아이폰이나 아이패드에서는 따로 포토스트림 기능을 활성화 하면 바로 사용할 수 있지만 맥에서는 iPhoto 또는 Aperture 등의 애플 소프트웨어가 있어야 포토스트림을 통한 사진 공유가 가능하다. 하지만 우리는 여기서 iPhoto나 Aperture를 실행해야만 포토스트림을 볼 수 있는 번거로움을 느낄 수도 있다. 하지만 이런 번거로움을 iPhoto나 Aperture의 실행없이 바로 맥의 파인더사이드바 즐겨찾기를 이용한 포토스트림을 확인할 수 있다. 즉 아이포토를 실행하지 않고 맥에서 포토스트림을 바로 볼 수 있다는..

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

흔히 윈도우에서 포토샵을 사용하다가 맥용 포토샵을 처음 접하는 사람이라면 물론 무언가의 아름다움(?)에 한번 놀라겠지만 저렇게 비워져 있는 바탕에서도 놀랄 수 있을것이다. 프레임이 없는 상황에서 실수로 바탕을 클릭하게 되면 포토샵이 비활성화 되버려서 다시 눌러야 하는 번거러움을 겪을지 모른다. 하지만 간단하다.. 그저 프레임을 켜주기만 하면 된다. 상단 메뉴 중 Window - Application Frame 를 활성화 해주면 된다. 프레임을 활성화 하면 위처럼 익숙한 포토샵 인터페이스로 바뀌게 된다.이것도 아름다운 맥을 위한 Adobe의 배려(?)가 아닐까 싶다.

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

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

포토샵에서 메탈느낌의 버튼을 만들어보자.요즘엔 특히나 약간 어두운 느낌의 메탈버튼을 종종 볼 수 있다. 가령, 자동차의 오디오 사운드 조절 버튼등이 이런씩으로 어두운 메탈느낌으로 된 것을 볼 수 있는데, 참고로 어떠한 이미지를 다운받지 않고 오로지 포토샵에서 처음부터 끝까지 완성된 것이다. 솔직히 사람들마다 포토샵에서 만드는 순서나 방법이 제각각 다를것이다. 필자의 방법이 최고라고 할 수는 없지만 하나하나 따라하다보면 쉽게 만들 수 있을것이다. 순서를 알아보자.01.포토샵에서 가로세로 1000px 사이즈의 새창을 만든다.(캔버스 크기는 물론 마음데로 해도 된다) 02. 백그라운드 레이어를 하나 복사하고 Filter - Noise - Add Noise 를 준다. (단 전경색과 배경색이 검정과 흰색 디폴트 ..

책상위에서 공부를 하는 학생이건 일을하는 사람이건 사람들마다 제 각각 다른 작업공간을 가지고 있을것이다. '내 책상에 여기엔 연필꽂이가 있어야 하며 여기엔 책이 쌓여 있어야 하고 여기엔 노트북이 있어야 한다.' 이렇게 말이다. 매일 똑같은 자리에 있던 물건이 없으면 불안해 하고 작업이 안되듯이.. 그래픽툴도 다룰 때 평소 습관이 되었던 자리에 나의 팔레트가 없으면 일의 능률이 떨어 질것이다. 이처럼 그래픽 작업하기에 앞서 가장 중요한 것.. 나만의 워크스페이스(workspace)를 저장해놓는것이다. 아주 간단하게 포토샵에서 나만의 작업공간(workspace)을 저장해보자. 01.포토샵 window에서 내가 원하는 팔레트를 꺼내서 내 맘에 들게 위치 시킨다. 기본 Essentials에서 글자창등 평소 자주..