롤스토리디자인연구소

포토샵의 스마트 오브젝트(Smart Object)기능을 이용하면, 기울어진 벽면이나 원통같은 형태에 자연스럽게 글자나 도형등을 배치할 수 있습니다. 예전에, 원통에 자연스럽게 글자쓰는 방법에 관하여 포스팅을 한 적이 있습니다만, 이번 시간에는 기울어진 벽면에 같은 방법인, 스마트 오브젝트를 사용하여 자연스럽게 글자나 도형등을 배치해 보겠습니다. (필자의 환경은 매킨토쉬 포토샵 CS6이며, 윈도우의 ctrl 키는 맥의 command의 키와 같음을 알립니다. 또한, PC버전에서 이미지를 클릭하시면 큰 화면으로 보실 수 있습니다) 01. 기울어진 벽면등의 이미지를 포토샵에 불러 온뒤, 우선적으로 기울기를 조절해야하는 글자나 도형등을 모두 미리 만들어 놓는다. 02. 기울어진 정도의 척도가 필요하기에, 위의 예..

카페24에 회원가입만 한다면, 누구나 쇼핑몰을 무료로 만들 수 있습니다. 이번시간에, 카페24를 통하여 도메인이며 호스팅 그리고 관리자페이지 까지 무료로 사용할 수 있는 카페24 쇼핑몰의 기본 제작 순서를 알아보도록 하겠습니다. 우선, 카페24 쇼핑몰(cafe24 shopping mall)외에도, 무료로 쇼핑몰을 만들 수 있는 솔루션으로 고도몰, 가비아 퍼스트몰, 후이즈 등이 있습니다. 어쩄건, 이번시간에는 카페24를 통하여 쇼핑몰을 만들어 보도록 하겠습니다. 아래의 순서를 따라가해가며 간단히 만들어 보세요! 01. 카페24쇼핑몰(http://echosting.cafe24.com/Main/)에 접속한 뒤, 회원가입을 한다. 02. 내게 맞는 상황에 따라 카테고리를 선택하고, 회원가입을 진행하여 완성한다...

인포그래픽이란, 정보를 뜻하는 Information 과 그래픽의 Graphic 이 합쳐져, 인포그래픽(Infographic)이라 불립니다. 합쳐진 단어 뜻만 보아도 알 수 있듯이, 정보를 표현하는 그래픽이라고 생각하면 됩니다. 하지만, 무작정 그래픽으로 표현하는 정보보다는, 스토리텔링을 통한 마치, 이야기하는 듯한 느낌과 지루하지않고 한 눈에 알아 볼 수 있는 방법으로 표현한다면 더욱 보는이를 만족 시킬 겁니다. 아래의 인포그래픽(Infographic) 추천30을 살펴볼까요? ▲ 01종 다양성을 표현한 인포그래픽 입니다.개체의 크기만 보아도 어떤 종들이 얼마나 많은지 짐작을 할 수 있네요. ▲ 02아프리카 농부들의 성장을 위한 도움 요소들을 심볼과 함께 배치 하였네요. ▲ 03뉴욕에 관한 정보를 알 기 ..

티스토리에 위와같이, 페이스북 박스라 불리는 라이크 박스(like box)를 연동하는 방법에 대해서 알아보겠습니다. 우선, 라이크 박스를 만들기 전에, 미리 만들어 놓은 페이스북 페이지(Facebook page)가 있어야 합니다. 혹시, 페이스북 페이지를 아직 만들지 않았다면, 앞전에 포스팅한 글을 보시고 미리 만들어 두시길 바랍니다. ■ [페이스북]페이스북 페이지 만들기 페이지까지 미리 만들어 놓으셨다면, 아래와 같은 방법으로 어렵지 않게 나의 티스토리에 페이스북 라이크 박스를 연동해 보세요! 01. 페이스북 개발자 페이지( https://developers.facebook.com/docs/plugins/ )에 접속 한 뒤, 라이크 박스(Like Box)탭을 누른다. 02. 라이크 박스(Like Box..

앞서, 포스팅한 페이스북 페이지 만들기에 이어, 페이스북 커버사진(cover)과 프로필사진(profile)을 꾸미는 방법에 대해서 알아보겠습니다. ▲ 페이스북 커버사진과 프로필사진 사이즈 우선, 커버사진과 프로필사진을 꾸미기 이전, 각각의 이미지 사이즈에 대한 이해가 필요합니다. 결론부터 말하자면, 페이스북의 커버사진의 크기는 가로세로 851px X 315px 이며, 프로필사진의 크기는 가로세로 180px X 180px 입니다. 하지만, 가령 커버 사이즈를 위와같이 851px X 315px로 작업해서 올려보면, 이미지가 깨지는 현상을 볼 수 있습니다. 따라서, 그 값의 배수로 캔버스 사이즈를 생성하여 작업한뒤, 업로드 하면 훨씬 더 깔끔한 이미지를 볼 수 있습니다. 즉, 페이스북의 커버사진은 2배인 17..

일러스트레이터의 회전툴(Rotate Tool)과 패스파인더(Pathfinder)를 활용하여 태극문양(TaegeukMark)을 만들어 보겠습니다. (PC버전에서 이미지를 클릭하시면 크게 볼 수 있습니다) 아래의 순서를 보며 천천히 따라해 보세요. 01. File - New를 눌러 새창을 만들어 놓은뒤, 위의 그림처럼 원형 그리기 툴(Ellipse Tool)을 이용하여 빈여백을 한 번 클릭하여, 가로세로 80mm인 정원을 만든다.(원의 크기는 상관 없습니다) 02. 정원을 하나 만들었다면, 태극 문양을 만들기 위해 필요한(큰원의 50% 크기의 정원) 안쪽원을 만들 기 위해, 미리 만들어 놓은 큰원을 선택한 뒤, 스케일툴(Scale Tool)을 더블클릭하여 나타난 옵션창에서 50%크기만큼 원을 하나 더 복사(..

대표 SNS인 페이스북에서 페이스북 페이지(facebook page) 만드는 방법에 관하여 알아보겠습니다. 우선, 페이스북 페이지란? 페이지는 회사, 조직 및 브랜드가 자신들의 소식을 공유하고 사람들과 연결할 수 있도록 도와줍니다. 타임라인과 마찬가지로, 소식을 게시하거나 이벤트를 열거나 앱을 추가하는 등의 활동을 통해 페이지를 회원님의 취향에 맞게 바꿀 수 있습니다. 주기적으로 게시하면 대상들의 참여가 높아지고 대상층이 넓어집니다. 회원님의 페이지를 좋아하는 사람들과 그 사람의 친구들은 뉴스피드에서 업데이트를 받습니다. (페이스북 도움말 참조) 즉, 우리가 흔히보던 블로그와 비슷한 개념이라고 생각하시면 됩니다. 하지만, 글로벌한 인프라를 가지고 있는 만큼, 잘 활용한다면 어마어마한 효과(?)를 볼 수 ..

다이얼+ (Dial+) ver1.01 업데이트 안내입니다. ● 키패드 언어 설정 가능가령, 시스템언어를 영어로 설정하여 쓰시는 분들에게 한글등의 초성검색 기능을 이용할 수 있게끔 '설정'탭에서 '키패드 언어'옵션을 추가 하였습니다. ● 페이스타임 기능 추가아이폰 사용자끼리 사용하는 페이스타임 기능을 추가 하였습니다.'키패드'탭에서 단축번호 또는 연락처를 입력하여 '통화'버튼을 길게 누르면 '페이스타임'으로 연결 됩니다. ● 앱 완전 종료시 스킨 설정 유지멀티태스킹으로 남아있던 다이얼+ 앱을 종료하면, 기존에 설정해두었던 키패드스킨(번호색상/다이얼변경)등의 상태가 기본값으로 돌아 왔지만, 이제, 멀티태스킹으로 앱을 종료 하여도 내가 설정해둔 스킨 그대로 유지 됩니다. ● 특수문자/해외번호/공백 등으로 발생..

작년, 롤스토리에 iOS 키패드 리디자인을 포스팅하며 뜨거웠던 반응에 힘입어, 드디어 정식 앱스토어에 다양한 키패드 디자인과 단축번호 및 초성검색 등의 편리한 기능이 들어간 '다이얼+(Dial+)'라는 이름으로 앱을 런칭하게 되었습니다! 기존의, 리디자인 버전은 '탈옥'한 유저들에게만 사용할 수 있었던 반면, 이번엔 정식 앱스토어에 런칭한 만큼, 더욱 편하게 나의 아이폰을 아름답게 꾸밀 수 있습니다. 자세한 내용을 한번 살펴볼까요? ■ 다양한 다이얼 스킨 '다이얼+'에는 다양하고 아름다운 키패드 스킨이 있습니다. - Basic- HelloMoto- Rollstory- Cube- IceBlue 이제, 세상은 디자인으로 통합니다. 기존의 키패드 디자인에서 벗어나, 나에게 맞는 스킨을 찾아보세요. 스킨당 기본..

'로고'라는 것은 언제나 간결하고 상징적이여야 한다고 생각하는 롤스토리에서, 단순히 원형의 틀로 디자인된 '롤스토리(http://rollstory.tistory.com/)' 로고를 포토샵을 이용해 만들어 보는 과정입니다. (PC버전에서는 이미지를 클릭하면, 큰 사이즈로 보실 수 있으며, 맥의 command버튼은 윈도우의 ctrl버튼과 같습니다.) 01. 가로세로 512px, 해상도 300의 새창을 만든다. (아무래도 로고형태기때문에 해상도는 72가 아닌 300으로 한다) 02. 새창을 만들었다면, 가이드라인을 활용하여 2등분되는 라인을 만들어 놓는다. 03. 원형 쉐이프 툴을 이용하여, 400px의 정원을 만들고, 다시 그 안쪽에 375px 크기의 정원을 만든뒤, 미리 그어둔 가이드라인의 중심에 정렬 시..