본문 바로가기

Designer스토리

viewport meta 태그를 이용해 모바일 해상도에 맞게 레이아웃 자동 변경 태그를 활용한 모바일 해상도 자동 변경 방법 시대의 흐름에 따라 인터넷에 접속할 수 있는 디바이스가 많아지면서 웹 페이지를 만들 때 모바일페이지를 고려 하지 않을 수없게 되었습니다. 반응형이나 기타 다양한 웹페이지의 표기 방법들을 지원하기 시작하면서 디자이너나 퍼블리셔들은 머리가 더 아프게 되었네요. 모바일 디바이스의 해상도는 제각각 인데다, 가로 혹은 세로로 보았을 때 페이지가 적절하게 로드 되도록 하는것은 어제나 고민거리 입니다. 물론 JS를 활용 해 해상도별로 페이지를 맞추는게 가장 깔끔하겠지만 기본적으로는 Viewport 태그를 활용 하는데, viewpoert만 잘 써도 모바일기기에 딱 맞게 랜더링 시킬 수가 있습니다. Viewport는 모바일기기에 화면이..
메일링 뉴스레터 코딩 어떻게 해야 할까? 유의할 점 웹 표준화를 외쳐도 할 수 없는 그것 뉴스레터! 웹 코드는 시간의 흐름에 따라 상당한 발전을 이뤄 왔습니다. 무선인터넷의 발달과 휴대용 스마트 기기의 발달은 디자이너와 퍼블리셔에게 새로운 영역의 도전을 계속 원하고 있습니다. CSS3와 HTML5등 표준화를 위한 노력이 한창이지만 메일 클라이언트의 규격통일은 되지 않으려나 봅니다. 메일 코딩의 문제점이 부각되기 시작한것도 꽤 오래전 일인데, 아직도 크게 변한게 없습니다. 사용자마다 사용하는 메일 클라이언트가 다르고 버전이나 사용자의 환경설정에 따라서 메일 랜더링이 달라집니다. 완벽하게 어디서든 작동하는 메일링이란것은 애초에 존재하지 않을지도 모르지만 알려진 몇가지만 잘 지킨다면 호환에 크게 문제되지 않는 메일링을 만들 수 있습니다. 기본중에 기본! tab..
윤폰트, 윤디자인 폰트 매니저 업그레이드 폰트 매니저 새단장~ 더욱 편하고 세련되어 졌네? 웹 디자인을 하는 사람들에게 윤폰트는 가장 기본이 될 만큼 많이 사용되는 폰트 중에 하나 입니다. 초창기에는 시리얼로만 관리가 되었기 때문에 불법복제도 많았는데, 이러한 패단을 막기위해 폰트 매니저 프로그램을 통한 인증을 하고 있습니다. 한동안 폰트 매너저 프로그램 업데이트가 없더니 이번에 업데이트가 되었습니다. 인터페이스가 깔끔해 졌고 조금 더 편리한 기능들이 들어 갔네요. 기존의 폰트 매니저 프로그램보다 훨씬 깔끔하고 예뻐졌죠?^^ 전에는 블랙계역이라서 좀 칙칙 했는데 화사해졌습니다. 사실 폰트를 사용할 때 폰트매니저 프로그램을 별도로 오픈해 보는 일이 없긴 한데, 요건 나름 쓸모가 많아요. 폰트는 폰트관리 탭에서 관리를 할 수 있습니다. 필요한 것은..
어도비 크레이티브 슈트 단축키 배경화면 모음 포토샵, 플래시, 일러스트레이터, 인디자인 등 크레이티브 슈트의 프로그램 단축기를 바탕화면에 깔자그래픽 작업이나 디자인 작업을 하는 사람들은 포토샵이나 일러스트 등의 그래픽 프로그램을 보통 사용하게 됩니다. 요즘은 단품으로 구입하는 사람들도 많지만 이러한 프로그램들을 직업군으로 묶어 놓은 크레이티브 슈트를 구입하는 경우도 많습니다.이러한 그래픽 툴은 작업이 편리하기 때문에 마우스만으로도 충분히 작업을 진행 할 수 있지만, 키보드를 이용한 단축키를 잘 알아 두면 더욱 빠르게 작업을 진행 할 수 있고, 업무에 대한 능률도 오르게 됩니다.하지만 단축키는 잘 쓰지 않으면 쉽게 잊어버리게 되고, 자주 사용하지 않는 프로그램의 경우는 기억하기가 쉽지 않습니다. 단축키가 잘 외어 지지 않는 분들을 위해 누군가가 고맙..
뉴아이패드(New iPad)용 아이패드 디자인 가이드 (GUI PSD) (레티나 디스플레이 적용) 레티나 디스플레이 용 아이패드 디자인 가이드 뉴 아이패드가 발표가 되면서 아이패드용 디자인 GUI가 필요하게 되었습니다. 레티나가 올라 갈 때마다... 디자인이 더욱 힘들어 집니다.. 화면이 더 깔끔해 지기 때문에 세세하게 다 표현해야 하거든요..-_-'물론 디자인 하는 입장에서는 자신이 만든 디자인이 디테일하게 표현되는게 좋기는 하지만 ... 때론... 좀 쉽게 넘어가면 좋겠다는 생각이 들 때가 있거든요..ㅋ새로운 레티나 디스플레이에 대응하는 뉴 아이패드를 위한 GUI 디자인 가이드 PSD 파일 입니다. 2008년 부터 아이폰 아이패드의 GUI 가이드 파일을 만들어 배포해온 teehanlax.com에서 이번에도 발빠르게 제작을 해 주었내요. 특히 이번에는 CS6을 이용해서 제작을 했다고 합니다. iOS..
플래시 파일(FLA,SWF)파일로 FLV 파일 및 동영상 파일 상호 변환하기 인터넷을 하다 보면 요즘은 FLV파일을 자주 접하게 됩니다. 어도비의 플래시로 만들어진 플레이어가 거의 표준이 되다 시피 널리 보급이 되고 가볍게 스트리밍이 가능 하면서 플래시에 적은 용량으로 사용하기 편하다는 장점이 있어서 FLV파일이 널리 쓰이고 있는 것 입니다. FLV 파일은 무었? FLV는 Flash Video의 약자로 플래시에서 사용하는 동영상 파일 포멧 중 하나 입니다. 비슷하게 플래시에서 사용되는 파일 포멧은 .flv, .f4v, .f4p, .f4a, .f4b가 있지만 가장 포편적으로 널리 사용되는 것이 FLV 파일 입니다. 플래시 파일포멧 이지만 플래시 프로그램만 가지고는 제작이 되지 않고 물론 편집도 불가능 합니다. 플래시 프로그램에서는 단순히 FLV파일을 라이브러리에 등록해서 오브젝트로..
멋진 도장 직인을 만들 수 있는 도장서체, HJ한전B,HJ한전A 디자인 작업을 하다보면 도장 이미지를 만들일이 종종 생깁니다. 도장을 만드는 방법은 여러가지가 있지만 간단한 도장 이미지를 만든다면 한전체 폰트와 원만을 이용해서 도장을 만들 수 있습니다. 한전체는 A,B로 나누어 지는데 위의 그림을 보면 차이를 알 수 있습니다. 한전체B는 좀더 둥글둥글한 모양이고 한전서체 A는 좀 각진 모양을 하고 있습니다. 한글 뿐만 아니라 영문도 상당히 괜찮은 느낌으로 사용할 수 있습니다. 영문서체는 비교적 정리가 잘 되어있는곳도 많고 해외사이트도 많기 때문에 찾기가 쉽긴하지만 일일이 뒤지는게 귀찮습니다.. 내.. 김군은 귀찬니즘에 빠져 있으니까요..ㅋㅋ 가끔 디자인할 때 요것 써먹어야 겠습니다..^^
[Font DataBase]작은 글씨에 그만인 천리안 H 체(모리스체 9pt,morris9) 디자인 작업을 하다 보면 이미지에 종종 작은 글씨체를 사용해야 하는경우가 발생 합니다. 버튼 혹은 블릿 같은 경우에 말이죠. 특별한 경우는 직접 도트 작업을 통해 제작 하기도 하지만 작은 글씨를 지원하는 폰트로 많이 사용을 하는데 그럴때 마다 사용하는 폰트 중에 하나가 천리안 H체 입니다. 보통 작업을 많이 하게 되는 기본 폰트인 돋움과의 비교 입니다. 천리안 H체는 9, 11 폰트 일때가 가장 예쁘게 처리가 되는것 같습니다. 작은 글씨체를 가진 폰트는 영문 폰트가 가장 많고 자주 애용되는 것들이 있지만 천리안 H를 사용하면 좀더 작업을 간단하게 줄일 수도 있습니다. 큰글씨체는 별로 예쁘지 않아서 디자인 작업에는 사용되지 않습니다.돋움은 11px가 가장 작게 표현 되지만 천리안 H는 9px까지 지원되기 ..
웹 이나 블로그 에서 유용하게 쓸수 있는 색상 표 테이블 (헥사코드) 블로그를 꾸미거나 웹 관련 작업을 할때 컬러 코드를 넣는 경우가 많이 생깁니다. 디자인 작업을 하시는 분 이라면 여러가지 방법으로 컬러 코드를 알아 낼 수 있는 방법으로 컬러 값을 알아 내시겠죠..ㅎ 저 같은 경우는 포토샵으로 이것 저것 컬러 값을 찍어 보는데 생각보다 좋은 색을 알아내기 어렵더라구요. 컬러로 고민할때 한눈에 놓고 보면서 컬러의 감을 잡는데에 매우 유용한 컬러 테이블 입니다. 디자이너가 아니라도 개인블로그나 웹 사이트를 꾸밀때 참고하시면 매우 편리하게 사용할 수 있습니다. ※ 원하는 색깔을 드래그해서 복사 (Ctrl+C )해서 HTML 소스에 붙여 넣으시면 됩니다. #93DAFF #98DFFF #9DE4FF #A2E9FF #A7EEFF #ACF3FF #B0F7FF #B4FBFF #B9FF..
아이폰 디자인(PSD) 소스 - 아이폰 GUI 3.0 PSD 원본 김군이 요즘 스마트폰 때문에 정신이 없군요.. ㅎㅎ 우선 애플 앱스토어에 들어갈 어플 디자인과 모바일 페이지 구축을 하느라 정말 정신이 없습니다. 예전이 이런 가이드를 올려 놓는 외국블로거들을 보면서 왜 저런것을 만들고 있을까.. 생각 했는데.. 막상 제가 디자인을 입혀야 하는 상황이 되니 꾀나 유용 하군요.^^ 이사람들 블로그에 보면 참 다양한 정보가 많던데 디자인 할때 참고하면 유용하게 써먹을수 있겠습니다.ㅎㅎ 아이폰의 GUI가 전부 들어가 있고 좀 애매한 부분이 많이 있었는데 쉽게 적용 시킬수 있어서 너무 좋더군요. 출처 및 다운로드 : http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/ 그럼 멋지게 활용해 보세요~~
발행예정 포스트 보호되어 있는 글입니다.
발행예정 포스트 보호되어 있는 글입니다.
하늘과 구름 강조하기로 가을하늘 사진 더욱더 파랗게 만들기 천고마비의 계절 가을이 이제 완연해 졌습니다. 푸르른 하늘은 더욱더 높고 푸르게 우리를 출사의 길로 유혹하는군요. 즐거운 마음으로 찾아간 출사길에 찍어온 하늘 사진이 맘에 들지 않아도 너무 걱정하지 마세요. 우리에겐 후보정~! 이라는 아주 편리한 것이 있으니까요..ㅋㅋ 먼저 보정할 사진을 불러 옵니다. Ctrl + O 그마저도 귀찮으시다면 포토샵 배경을 더불클릭하면 오픈창이 뜹니다. 이번에는 리사이징을 나중에 할것이니까 원본과는 다르게 따로 저장을해 둡니다. Ctrl + J를 눌러서 레이어를 하나 복사해 둡니다. 자 이제 먼저 사진의 디테일을 살려주는 작업을 해 보겠습니다. Ctrl + Shift + U 버튼을 눌러서 사진을 흑백으로 전환시켜 줍니다. 다시 Ctrl + I를 누러서 레이어를 반전시켜주면 ..
[빈티지 보정]디카사진 필름사진 처럼 만드는 방법 디지털 사진에 필름의 감성을 입혀 보자 근래에 김군이 재미난 보정법을 하나 발견하고 제 포스트에 적용하기 시작 했습니다. 하다보니 느낌도 좋고 김군의 블로그가 한층 깨끗해 지는 느낌이 들더라구요. 바로 노스텔지아 보정법, 이 보정법은 디지털 사진을 필름사진처럼 만들어 주는 후보정 방법입니다. 사실 정확한 보정법의 명칭은 따로 있지 않지만 이해를 돕기위해 가장 비슷한 노스텔지아 보정법이라 칭하겠습니다. 다른 카메라는 모르겠지만 제가 쓰는 캐논400D에 보면 노스텔지어라는 픽쳐스타일이 있습니다. 노란색을 좀더 돋보이게 하고 다른색을 죽여서 부드러운 분위기로 만들어 주는것 이죠. 이것과 비슷한 방법으로 필름카메라 처럼 사진에 조금 따뜻한 느낌을 줄수 있습니다. 예제 사진을 보시면 확실히 느낌이 달라 지는것을 ..
턴테이블 믹싱은 이제 안녕, 크고 멋진 LCD창을 가진 CDJ-2000 Lets You Mix 크고 멋진 LCD를 가진 CDJ-2000 Lets You Mix 사실 레코드판을 가지고 믹싱을 하던 시대는 한참 전에 지났습니다..^^; 파이오니아 CDJ - 1000 가 믹스 턴테이블에 CD를 접목 시켰을때 한번의 혁명이 일어 났었지요 진화를 거듭한 새로운 모델이 사향을 업그레이드하고, 큰 6.1 인치 화면을 갖추어 세상에 발매 예정이라는군요. LCD화면에는 노래 정보, 앨범 아티스트 데이터 및 기타 고급 노래 정보를 표시할 수있습니다. WQVGA 화면 (480x234)을 채용했구요. 이외에도 자사의 전모델 이상의 향상된 기능을 몇가지 가지고 있습니다. 우선 사용자가 특정 노래를 가리 키도록 터치로 이동할수도 있습니다. 터치스크린 을 사용해서 편리하게 인터페이스를 이동하고 사용할수 있는것이죠. 둘째, ..
태양만 있다면 어디든 플러그인~ 해주세요 - 솔라트리 solar tree 태양만 있다면 어디든 충전소 - solar tree야외 활동이 많던 여름이 지났지만, 아직은 가을의 선선함을 느끼며 출사며 소풍이며 야외활동을 많이 할 시기 입니다. 항상 밖에서 활동하거나 여행다니면서 걱정인게 바로 휴대용 기기들의 충전 문제 인데요. 이런 문제들을 해결하기위해 나타난 해결사가 있습니다. 이름하여 솔라 트리~ 어디든 태양만 있고 세울수만 있으면 간단하게 충전 콘센트로 변신하는 아주 편리한 녀석이죠..ㅋ 점점 휴대용기기들이 늘어가고 여행을 갈일이 많아 지면서 콘센트를 사용할 일이 많은데, 해변가 같은 곳에서는 정말 유용할것 같아요. 개인이 사는것 보다는 해변에서 편의를 위해 장만해 주면 좋을 아이템..ㅋ
시력장애인을 위한 10가지의 혁신적인 아이템 시력장애인을 위한 10가지의 혁신적인 아이템 you gotta want it by (from a second story)Mike Bailey-Gates 시대는 점점더 편리하게 변하고 장애우를 위한 여러가지 아이템들도 나오고 있습니다. 장애우들을 위해 사회든 기업이든 여러가지 아이템들을 내어 놓는다는것은 참으로 반가운 일 입니다. 그들도 우리와 똑같은 사람이고 언제나 편리한 생활을 누려야할 권리가 있는데 말이죠. 아직은 사회 저변 시설들을 좀더 개선하는게 먼저 겠지만 말이죠. 10가지 혁신적 아이디어로 시각장애인에 삶을 용의하게 해주는 몇가지를 소개 합니다. 10) Siafu PC by Jonathan Lucas 루카스 디자인에서 디자인란 SIAFU . 장애우 들에게도 무한한 인터넷 서핑의 기회를 제공 합..
휴대용 노래방과 MP3 플레이어를 하나로 요즘 해외에서 우리나라 디자이너들의 활약이 눈부십니다. 여기저기에서 좋은 디자인이라는 호평들이 들려오고 있습니다. 아주 반가운 일이죠.^^ 우리나라 디자이너가 디자인한 물건중에 재미난 물건이 있어서 소개해 드릴까 합니다. 이름하여 ORIO 가라오케 MP3 ^^ 가끔 정말 답답할때나 좋은노래를 들으면 따라 부르고 싶어질때가 있죠? 그럴때 아주 유용하겠습니다. Designers: Jinsun Park & Seonkeun Park 평소에는 그냥 MP3로 가지고 다니면서 듣고 있다가, 노래가 부르고 싶어지면 스윙~^^ 데이터 베이스에 직접 연결해서 가사를 볼수도 있고, 자기가 부른 노래를 녹음도 할수 있는 휴대용 가라오케의 기능을 충실해 해 주는군요. 보이스 레코더 기능은 언급이 없지만 지금도 MP3로 보이스 ..
봉춤을 추는 USB 인형, pole dancer 성인버전과 아이용버전 봉춤을 추는 USB 인형, pole dancer 성인버전과 아이용버전 2006년 봉춤을 추는 USB인형이 나와서 한참 날리던 때가 있었습니다.ㅋㅋ 마침 크리스마스 시즌과 맞물려서 없어서 못팔정도가 되었다더군요. 가격은 53달러~ 우리나라에도 들어 왔었는지는 잘 모르겠습니다. All I want for Christmas Lingerie Fashion Show by Urban Mixer 사실 봉춤은 요런 아가씨가 나와서 멋지게 춤을 추어 주는 그 맛 입니다만.. 남성분들만 좋아 하시겠죠..ㅋ 요것이 한참 인기가 높았던 POLE DANCER 성인판 입니다..ㅋㅋ 위 아래로 움직이고 빙글빙글 돌면서 조명을 받는 그런 간단한 것 이지만 인기가 아주 높았다고 합니다. 이것이 이번에 새로 나온 유아판의 봉춤을 추는 ..
당신의 손가락 부상을 잊게 해줄 망치 당신의 손가락 부상을 잊게 해줄 망치 살면서 못질 한두번씩은 다들 해 보셨겠죠?^^ 목수는 아니지만 종종 벽에 못을 박는 다는지 하는 일을 하게 되곤 합니다. 함마 드릴이 있긴하지만, 가격도 비싸고 망치만큼 사용이 쉽지는 않죠. 못 하나 박는데 이것 저것 연장을 다 꺼내서 쓰는것도 번거롭고 말이죠. 좀더 심플한 방법으로 간편하게 못을 박을수 있지 않을까 많은 분들이 공감하시리라 생각 됩니다. 망치와 함께 필연적으로 따라오는것이 못 입니다. 이 못이라는게 머리도 작고 해서 조준해서 내려치기가 쉽지 않아요. 행여 잘못치기라도 하는 날에는 눈물 콧물 쏙 빼놓는 손가락 부상을 당하기 쉽상 입니다. 전 엊그제 집에서 망치질을 하다가 성질나서 관둬 버렸습니다 ㅡ.ㅡ;; 망치로 손을 치지 않기 위해서는 어떻하면 될까..