롤스토리디자인연구소

▲ 똑똑가계부 아이콘 제작Branding :: Application Icon Design [ 가계부 소개 ] • 안드로이드 가계부 어플 중 전체 1위!! • 수입과 지출을 관리 해 주는 가계부 어플 • 카드나 은행 내역 문자 자동 입력을 지원 • 알뜰한 소비 생활을 위한 예산 기능 제공 • 기간별 통계와 카테고리별 통계 제공 • 한 눈에 쏙 들어오는 차트 기능 제공 • 스마트한 정산을 위한 편의기능 제공 • 쓸수록 편리함을 느끼는 심플한 가계부 [ 주요 기능 ] • SMS와 MMS로 오는 은행과 카드사 문자 자동 입력 기능 • 푸쉬 알림 어플의 입출금 메세지 자동 입력 기능 ( 푸쉬 입력 특허 등록 번호 : 제 10-1580947 호 ) ( 다른 가계부와 차별화 되는 똑똑가계부만의 기능입니다! ) • 지..

▲ 체중꼼짝마 아이콘 제작Branding :: Application Icon Design ★ 2014 대한민국 모바일앱 어워드 6월 으뜸앱 수상 ★체계적으로 체중 관리를 할 수 있게 도와 주는 어플입니다. 체중 기록을 통해 다이어트의 진행 상황을 표시해주어 성공적인 다이어트를 하는 것을 도와주는 어플입니다. 매일매일 체중을 입력하고 운동 여부나 음주 여부같은 체크 리스트도 입력받아서 이를 기간별로, 주별로, 월별로 체중 통계를 내 주기도 하고 한 눈에 한아보기 쉽게 체중 차트를 만들어 보여 주기도 합니다. 목표 체중을 정하는 기능도 있어서 그래프로 목표 체중에 근접해 가는 자신의 모습을 보면 다이어트 의지가 더욱 더 불타오를 것입니다. 꾸준한 기록을 하는 것을 도와주기 위해 체중 기록 알람과 식단 기록 ..

▲ 똑똑노트 아이콘 제작Branding :: Application Icon Design 똑똑 노트는 일상생활에서 필요한 메모들을 편리하게 할 수 있도록 도와주는 실용적인 메모 어플입니다. 현재 지원하는 메모의 목록은 다음과 같습니다. 1. 은행 계좌번호 관리 - 은행 계좌번호를 입력해 놓으면 클립보드로의 복사나 바로 타인에게 보내기 등을 할 수 있습니다. 2. 체크 리스트 목록 관리 - 필요한 물품을 적어 놓아서 효율적으로 장을 보거나 할 일 등의 체크 리스트를 활용 할 수 있습니다. 3. 생일이나 생신 목록 관리 - 가족들이나 주변 지인들의 생일을 알려주는 기능입니다. 달력모드와 음력을 지원합니다. 4. 사이트 아이디 관리 - 요즘은 인터넷 사이트가 셀 수도 없이 많기 때문에 본인의 아이디를 기억하는 ..

안드로이드앱 'Travel Basket' 앱아이콘 제작.

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

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

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

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

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