롤스토리디자인연구소

안녕하세요. 남미 여행 중이라 간만에 쓰는 포스팅 이네요. 이번에 소개해드릴것은 맥(MAC)에서 예쁜 나만의 맥용 아이콘을 만드는 방법에 관해서 알아보겠습니다. 아무래도 맥을 쓰시는 분들이 꾸미기(?)를 좋아하시는 성향이 많으시기에 바탕화면에 자주 두는 식상한 아이콘을 눈에 띄게 혹은, 개성있게 바꿔보도록 하겠습니다. 우선, 당연히 아이콘을 만들기 위해선, '포토샵(Photoshop)'등의 디자인툴이 필요합니다. 01. 포토샵을 실행 후, 새창(command + N)을 만들고, 위와같이 가로세로 사이즈와 해상도를 설정 한다.(가로세로 사이즈는 얼마든지 변경하셔도 됩니다) 02. 라운드가 있는 쉐이프툴(Rounded Rectangle Tool)을 선택하여 빈 여백을 한 번 클릭하고, 위와같이 가로세로 크기..

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

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

한때, 미국에서 '그루폰'이라는 소셜커머스가 등장하면서 한국에도 쿠팡에 이어 많은 소셜커머스가 등장하게 되었습니다. 그리고 최근에 많은 소셜커머스 속에서 타사와 다른 적립금이며 배송혜택 등등 메리트 있는 정책을 내놓으며 갑자기 '위메프(we make price)'라는 소셜커머스가 등장하였습니다. (위메프를 광고하는것이 아닙니다.) 이러한 등장속에 제가 앱을 이리저리 살펴보면서 뭔가 아이템은 좋은데 조금만 더 '디자인'이라는 분야에 신경쓴다면 어떨까? 하는 생각속에 개인적인 마음으로 이번 '위메프'라는 앱을 리디자인 해보았습니다. 디자인이라는 것이 답이 없으며 세월이 흐르면 또다시 바뀔 수 있으며 또한, 개개인마다 보는 관점이 다르기에 그저 편하게 보시면 감사하겠습니다. ▲ 리디자인한 '위메프' 앱 아이콘..

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

테이크아웃 커피 컵.. 불과 몇년 전만 하더라도 이런 테이크아웃컵을 보면 이게 뭔가 했을 수 도있지만 이제는 누구나 보면 커피컵이구나 하는걸 알 수 있다. 테이크 아웃 커피컵을 만들기 전, 일단은 이런씩의 Skeuomorphism(스큐어모피즘) 디자인은 원래 도구의 형태를 그대로 따라간다는 큰 내용을 담고 있다. 그러므로 스큐어모피즘의 아이콘에서 일단 가장 중요한 것은 아이콘등으로 만들 객체의 실제모습을 참고 하는것이 제일 좋다. 어찌됬건 아래의 과정을 보며 따라해보자. 01.가로세로 512px의 캔버스를 만든다. 02.테아크아웃커피컵의 몸체가 될 부분을 만들어야 한다. 쉐이프툴을 이용하여 직사각형 모양의 쉐이프를 만든다. 03.테이크아웃커피컵의 몸통부분을 만들기 위해 위의 그림과 같이 가이드선을 이용하..

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

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

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