롤스토리디자인연구소

지난 8월에 아이폰5용 키패드 리디자인 ver2.0을 포스팅 한적이 있습니다. (아이폰5용 링크 바로가기) 의외로 뜨거운 반응에 이어 제일 많이 들어 오는 요청중 하나가 아이폰 4/4S용을 만들어 달라는 것이였습니다. 더 빠른 시일내에 작업을 할 수도 있었는데 늦어져서 참으로 죄송합니다. ▲ iOS7키패드(왼쪽), 키패드 리디자인(오른쪽/by. 도로독) 왼쪽이 9월에 정식배포된 iOS7의 디자인 입니다. 몇가지 개인적으로 마음에 안드는 부분이 있는데 그중에서 키패드 부분입니다. 실제로 정식 iOS7의 키패드부분 숫자를 터치하면 뒷배경이 원안에서 비치는 효과를 볼 수 있습니다. 물론, 완벽함을 추구하는 애플이 가독성을 고려하며 만든 디자인이라는 생각도 듭니다. ▲ 새로이 추가된 배경 5가지 기존 아이폰5용..

유난히도 더웠던 8월 이였던것 같습니다. 지금은 조금씩 날씨가 선선해지고 있네요. 이번 8월은 우연하게 만난 사람들과 많은 소통을 하게된 좋은 계기가 많이 있었습니다. 다시하여금 iOS7에 관심을 가지게 되었고.. 또 플랫디자인에 관해서도 다시 생각하게 되었습니다. 항상 패션에도 그렇듯 '유행'이라는게 존재하며, 그 유행은 다시 과거로 돌아갈 수도, 또는 생각지도 못했던 것들이 유행이 되기도 하는것 같습니다. 디자인에 관한 견해는 정말 끝도 없습니다. 내눈에는 아무리 마음에 들어도 누군가에게는 만족하지 못할수도 있기에 이런것 또한 인연의 일부가 아닌가 싶습니다. 마치 옷깃하나 스쳐도 인연이라는 사람간의 인연처럼 말이죠.. 내가 억지로 노력하지 않아도 그냥 술술 생각나듯 그리는 그런 디자인의 연속이 언젠가..

지난번, iOS7 키패드 부분을 리디자인하여 포스팅한적이 있었는데, 우연하게 클리앙의 '무적태권부이님'께서 제 티스토리에 오셔서 원본파일을 요청하셔서 드렸더니 직접 파일을 아이폰에 입히고 작동하는 영상을 보내주셔서 무척이나 놀랬습니다. 물론, 완벽하게 적용되진 않았지만 이번엔 클리앙의 아이포니앙분들과 완벽하게 적용되는 모습을 보고자 이렇게 모든 레이어를 다 분리하여 이번 iOS7 키패드 리디자인 ver2.0을 만들게 되었습니다. 자세한 설명은 아래 내용을 보며 설명 드리겠습니다. ▲ 전체적인 모습 ver1.0과 크게 다른 부분은 없으며, 상단 캐리어바와 하단 탭바는 기존 iOS7베타 디자인을 적용하였습니다. 그리고 키패드 부분 눌렸을때의 이미지(숫자5)에서 흰색의 아웃글로우가 적용 되었으며, 원의 가운데..

달력과 시계가 같이 있는 플립달력시계를 만들어 보았다. 왼쪽 제일처음 플립이 날짜를 나타내며 그다음으로 시간과 분을 나타낸다. 실제로 이런플립형 달력시계를 보면 위에서 아래로 차곡히 플립(Flip)되면서 쌓이는걸 볼 수 있다. ▲ 플립의 느낌을 주기위해 한장한장 쌓여있는 느낌의 두께를 주었다. ▲ 가운데 숫자부분이 접히는 부분 묘사 ▲ 전체적인 질감은 카본재질을 사용하였다. ▲ 레이어 정보 ▲ 작업하기전에 대략적인 구상을 한 스케치 보통 작업하기전, 대략적인 구상을 머릿속으로 한다. 그리고는 여기저기 인터넷을 돌아다니며 괜찮은 소스나 괜찮은 디자인을 찾아보고 참조를 한뒤, 모든걸 조합하여 간략하게 스케치를 하고 작업을 시작하는데, 항상 매번 느끼는 거지만 실제로 마우스를 잡고 작업을 할려고 하면 생각했던..

지인이 시계 이미지를 만들어 달라기에 엔틱한 느낌의 빈티지 시계를 만들어 보았다. 빈티지한 느낌을 나타내기위하여 서체와 색상등을 잘 고려하여 작업한다면 보다 좋은 느낌으로 만들 수 있을 것이다. (앞서 말한적있지만 필자의 환경은 매킨토쉬에서 CS6를 사용하고 있습니다. 따라서 맥의 command버튼은 윈도우의 ctrl과 같음을 알립니다.) 01.가로세로 512px의 캔버스를 만든다. 02.가이드라인을 미리 그어놓고 가로세로 350px의 정원의 쉐이프를 만든뒤, 아래의 레이어 스타일을 적용한다. ▲ clock body_01 레이어의 레이어스타일 ▲ 기본 색상이 적용된 모습 03.시계배경에 질감을 추가적으로 주기 위하여 같은 레이어를 하나더 복사한 뒤, 레이어 스타일을 제거하고 위의 그림처럼 Pattern ..

8월 1일의 첫번째 포스팅 이다. :-) 올해 가을쯤이면 iOS7 정식버전이 배포될 예정이다. 지금까지 iOS7 Beta4까지 나와있으며, 역시나 이번 iOS7의 가장 큰 변화는 기존 실물을 그대로 표현하는 '스큐어모픽'의 디자인에서 벗어나 평평하고 평면적인 '플랫'디자인으로 GUI로 전면 개편 한다는 것이다. 플랫디자인을 생각하며 처음 만든 카메라 아이콘 이다. ▲ 3가지 배경위의 플랫아이콘 페이스북에서 우연하게 본 카메라 아이콘을 보고 조금 변형 하여 만들어 보았다. 우선은 기본적으로 파스텔톤의 색상을 이용하고, 많은 쉐이프를 사용하기 보다는 최대한 적은 쉐이프들로 구성하여 만들었다. 무엇보다 가장 중요한건 단순하지만 무엇인지 확실히 알 수 있는 것이 아닐까 싶다. 그리고 플랫디자인이지만 가운데에 질..

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

누르면 '똑딱'하고 소리가 날거같은 버튼을 만들어 보겠다. 참고로 전원의 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.박스에 스티커등의 택을 붙이기 위해 같..

질감만 잘 표현한다면 간단하게 쉐이프툴을 이용하여 칠판 아이콘을 만들 수 있다. 이번에 사용한 질감은 저번 포스팅(클래식라디오)에서 사용했던 fiber와는 비슷하지만 다른 Noise와 Motion Blur을 사용하였다. 제작 순서를 알아보자. 01.가로세로 512px의 캔버스를 만든다. 02.그림과 같이 쉐이프툴을 이용하여 사각형의 쉐이프를 만들고(칠판의 틀이 될 부분이다), 아래의 레이어스타일을 적용한다. ▲wood레이어의 레이어 스타일 ▲wood레이어에 스타일이 적용된 모습 03.다음은 wood레이어의 질감을 표현할 차례다. 새레이어를 하나 만든뒤, 그림과 같이 검정색으로 채우고 Noise와 Blur를 주어 기본적인 질감을 표현한뒤 Level을 이용하여 채도를 높인다. 04.Add Noise, Mot..