롤스토리디자인연구소

halftone pattern필터와 블랜드 모드를 이용하면 이미지에 땡땡이 느낌의 질감을 표현 할 수 있습니다. 정확하게 말하자면 'Dot'이라고 하지만 실제로 보면 '+' 모양입니다. 하지만 패턴을 입히고 이미지를 원본으로 보면 원처럼 보입니다. 이번시간에는 이런 방법으로 이미지에 땡땡이 느낌의 질감을 입혀 보겠습니다. (이미지를 클릭하면 큰사이즈로 보실 수 있습니다) ▲ 원본사진(윗쪽)과 작업결과물(아래쪽) 01.백그라운드 레이어를 하나 복사한다.(흰색배경의 레이어 생성) 02.땡땡이 느낌의 필터를 입히기 위해 일단 전경색과 배경색을 내가 원하는 색상 으로 지정하고(보통 회색계열로 쓴다), Filter - Filter Gallery로 이동한다. 전경색과 배경색은 후에 halftone pattern 필..

포토샵으로 간단(?)하게 스케치 한듯한 효과를 나타내는 방법에 대해서 알아보겠습니다. 개인적으로 필자는 이 방법으로 다양한 느낌을 연출해서 홈페이지에 들어갈 사진이나 간단한 디자인 작업물 등등.. 여기저기에 활용하고 있습니다. (필자의 작업환경은 매킨토쉬 입니다. 따라서 윈도우의 ctrl키와 맥의 command키가 같음을 미리 알립니다.) 01.원하는 사진을 포토샵에 불러 온다.(사진의 종류는 딱히 상관 없다) 02.원본 사진을 하나더 복사한다.(원본레이어를 클릭해 놓은 뒤, command + J) 03.첫번째 복사한 레이어를 흑백으로 변환 시키기 위하여 Image - Adjustments - Desaturate를 적용시켜 사진을 흑백으로 만든다. ▲ 사진이 흑백으로 바뀐 모습 04.다음은 흑백레이어를 ..

한번씩 이런 생각을 할수 있다. '아.. 이 식빵을 나는 10등분 하고 싶어.. 어떻게 하면 정확하게 10등분 할 수 있을까?' 물론, 실제로 칼을들고 식빵을 10등분 한다는건 눈대중으로 보며 나름 10등분이라 생각하고 자를 것이다. 하지만 정확한 수치로 따지자면.. 정확하게 10등분이 된건 아니다. 왜냐? 눈대중으로 잘랐기 때문이다. 하지만, 디지털에서는 당연히.. 10등분으로 정확하게 자를 수 있다. 이번 글에서 포토샵을 활용하여 이미지를 슬라이스 하는 방법을 알아보자. 예를들어, 위의그림처럼 아래 탭바의 즐겨찾기 부분을 슬라이스(자르기)한다고 치자. 일단, 즐겨찾기 부분을 포토샵의 Slice Tool을 이용하여 자르기 위해서는 우선적으로 가이드라인이 필요하다.(가이드라인이 없어도 슬라이스가 가능하기..

누르면 '똑딱'하고 소리가 날거같은 버튼을 만들어 보겠다. 참고로 전원의 On과 Off를 알리는 O와 I는 컴퓨터의 이진법인 숫자 1과 0에서 유래가 되었다 한다. 어찌됬거나 여기선 저 심볼(I/O)이 빠지면 뭔가 허전한 버튼이 되었을 수도.. 아니면 버튼인지도 모를 수도 있을 것이다. 그만큼 무언가를 상징하는 심볼을 중요한 것이라 생각한다. 01.가로세로 512px의 캔버스를 만든다. 02.가이드라인을 이용하여 미리 센터를 맞춰 놓고, 위의 그림처럼 원형쉐이프툴을 이용하여 쉐이프를 그린뒤, 아래의 레이어 스타일을 적용한다. ▲button_01레이어의 3가지 레이어 스타일 03.레이어 스타일을 적용하고 난뒤, 투명도를 20%로 낮춘다.(버튼의 가장 아랫부분으로써, 뒷배경에따라 자연스럽게 보이기 위해 투명..

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

보통 원통같은 모양에 글자나 쉐이프등을 새긴다하면 위의 왼쪽 그림처럼 원통의 기울기등을 생각하지 않고 텍스트등을 새기기 마련이다. 하지만 실제로 원통모양에 새겨진 글자는 위의 오른쪽 그림처럼 글자도 원통과 똑같이 구부러져 있다. 포토샵에서 자연스럽게 원통같은 물체에 글자등을 구부려 새기는 방법을 알아보자. 우선 위와 같이 원통이 있다고 가정하자. 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플레이어를 구상하면서 제일 많이 쓰는..