이미지를 사용하지 않고 CSS를 활용한 초간단 다이나믹 텍스트 메뉴를 구현한 웹 디자인 소스 예제입니다. 이 웹 디자인 메뉴 소스는 웹 사이트와 블로그 모두 적용할 수 있으니 필요에 따라 유용하게 활용하시길 바랍니다. 물론 이미지를 이용한 메뉴가 화려한 맛은 있겠지만 그만큼 페이지로딩에서 텍스트 보다는 효율적이지 못하기에 상황에 따라 적절히 활용하시길 바랍니다. [예제 적용 데모] Menu 1 Menu 2 Menu 3 Menu 4 Menu 5 [Cascading Style Sheet] #menu_exam a, #menu_exam a:visited { text-decoration:none; background-color:#fff; color:#000; display:block; width:10em; hei..

Design Information/Design Resources 2009. 8. 11. 23:34

자동차의 주행 궤적으로 아주 멋진 폰트를 만든다는 자체만으로도 꽤나 흥미로운 일이 아닐 수 없는데 그 궤적을 이용해 자유롭게 활용할 수 있는 멋진 폰트인 'iQ font'가 만들어졌으니 타이포그래피 분야에 새로운 획을 그은 셈이기도 합니다. 더군다니 'iQ font'는 자동차가 그려낸 최초의 글꼴이라고 할 수 있겠습니다. 두 명의 타이포그래퍼 'Pierre & Damien / plmd.me' 그리고 프로 레이서 'Stef van Campenhoudt'이 자동차와 함께 폰트를 디자인 했는데, 멋진 iQ font가 어떻게 탄생되었는지 그 제작과정을 담은 영상을 통해 궁금증을 풀어볼 수 있습니다. iQ font - When driving becomes writing / Full making of from wi..

Design Information/Design Fonts 2009. 8. 4. 15:17

이미지 설명과 캡션이 함께 노출되는 뉴스형 슬라이드 갤러리 - JQuery Photo Slider 웹디자이너와 웹 개발자들에게 가끔씩 유용한 하나의 소스가 큰 힘이 되기도 합니다. 오늘은 이미지 갤러리 소스를 소개하려고 합니다. 지금까지 다양한 이미지 갤러리 소스들이 공개되었지만 구현하고자 하는 서비스 형태에 맞춰 제어가 가능한 이미지 갤러리 소스는 보기 힘들지 않았나 싶습니다. 이번에 소개하는 JQuery Photo Slider는 이러한 기대사항을 어느 정도 충족시켜 줄 수 있는 유용한 이미지 갤러리 소스라고 볼 수 있습니다. 뉴스 슬라이드 이미지 갤러리 형태라고 보시면 이해가 빠를 것 같습니다. 그리고 JQuery Photo Slider는 다음과 같은 특징을 가지고 있습니다. 1. 슬라이드 쇼 이미지..

Design Information/Design Resources 2009. 8. 2. 15:37

앞서 소개했던 '전문 디자인을 위한 고급 폰트 컬렉션 10선 - 1편'에 이어 2편을 공개합니다. 1편에서 공유했던 고급 디자인 폰트 무료 다운로드가 조금이나마 도움이 되었는지 모르겠습니다. 인터넷 공간에는 수많은 디자인 폰트들이 상용과 프리로 공존하지만 전문가가 아닌 이상 자신의 크리에이티브를 돋보이게 해 줄 전문 디자인을 위한 고급폰트 컬렉션을 고르는 것은 결고 쉬운 일이 아닙니다. 다행스럽게도 유능한 그래픽 디자이너들이 선정한 25개의 디자인을 위한 고급 폰트를 선별해 놓아 어렵지 않게 활용할 수 있게 되었습니다. 참고로 이번에 소개하는 무료 다운로드 고급 폰트 중 일부는 해당 사이트에 Sign Up(회원 등록)을 해야 무료로 다운로드 할 수 있는 경우도 있으나 부담없이 가입하셔서 다운로드 하시고 ..

Design Information/Design Fonts 2009. 8. 1. 07:12

수많은 타이포그래피 디자이너와 대중들은 자신의 아름다운 크리에이티브를 더욱 더 빛나게 할 폰트 타입을 선택하게 됩니다. 이런 관점에서 아래에 소개하는 다양한 콘셉트의 폰트들을 무료로 사용할 수 있다는 것은 참으로 행복한 일이 아닐 수 없습니다. 아주 가끔씩은요. 앞으로 2편에 걸쳐 공유될 폰트 컬렉션에서는 일부는 최고의 폰트를 무료로 다운로드 할 수 있고, 보다 깨끗하고 전문적인 디자인을 위한 고품질의 산세리프(Sanserif) 폰트들도 찾게 될 것입니다. 그리고 무엇보다도 웹 상에서 하이퀄리티 디자인 폰트들을 무료로 다운로드하여 여러분들의 크리에이티브를 더욱 돋보이게 하는데 활용 할 수 있을 겁니다. 1편에서는 우선 10개의 최고급 디자인 폰트를 폰트 모양을 미리 볼 수 있는 타입페이스 이미지와 무료 ..

Design Information/Design Fonts 2009. 8. 1. 00:54

웹디자이너에게는 웹페이지의 빠른 로딩과 효율적인 웹디자인을 위해 이미지 최적화는 필수 과제이자 중요한 비중을 차지합니다. 웹페이지에 포함된 이미지가 동일한 퀄리티로 보이면서 절반에 미치지 못하는 이미지 용량을 가지고 있다면 웹사이트 방문자에게 그만큼 쾌적한 서비스환경을 제공하게 되어 호감도를 높게 합니다. 이미지 최적화는 오래전부터 거론되어 왔지만, 일부 전문가 그룹 외에는 심도깊은 기술적인 접근과 실무에서 활용은 매우 부족하고 어려운 부분이어서 초보 웹디자이너들에게는 다소 개념적 접근조차 힘든 이미지 최적화 기술이었습니다. 최근 SMASHING MAGAZINE에 JPEG 와 PNG 이미지의 최적화 기술 자료가 업데이트 되었는데 웹디자이너들이 이미지 최적화 기술과 개념에 대해서 쉽게 이해할 수 있는 좋은..

Design Information/Design Resources 2009. 7. 17. 08:05

브러쉬 포트폴리오(Brush Portfolio)에서 활동하는 디자이너 'Susan Libertiny'이 자신의 여권 스탬프를 스캔하여 포토샵 브러쉬 세트를 만들었고, 몇 가지 우표 스탬프도 포함된 'Passport-Mail Stamps' 브러쉬 세트를 무료로 배포했다. 그녀는 자신이 만든 포토샵 브러쉬(Brushes)들이 디지털 스크랩북 프로젝트와 개성 있는 디자인 작업을 하는 디자이너들에게 도움이 되길 바라는 차원에서 공개한다고 했다. 'Passport-Mail Stamps' 포토샵 브러쉬(Brushes)는 13가지로 470pixel ~ 1400 pixel(픽셀) 사이즈 등으로 구성되어 있으며, Creative Commons Share Alike 3.0 라이센스에 위배되지 않는 한 프리로 사용할 수 있..

Design Information/Design Resources 2009. 7. 8. 13:55

무려 34,000 컷(Cut)의 초고해상도 무료 텍스쳐(Texture) 이미지를 마치 윈도우 탐색기 폴더처럼 찾아보기 쉽게 잘 정리해 놓았고, 이미지 키워드를 이용해 검색할 수 있는 기능까지 지원하고 있는 유용한 디자인 소스 사이트 'CGTextures.com' 입니다. CGTextures는 그동안 고품질의 텍스쳐 이미지 때문에 고민해 온 포토샵, 페인터 등 그래픽 어플리케이션을 사용하는 그래픽 디자이너와 3D, MAYA 등 컴퓨터 그래픽(CG) 작업을 하는 CG 아티스트에게는 더없이 유용한 디자인 소스 사이트가 되지 않을까 싶습니다. 고해상도 텍스쳐 이미지 무료 다운로드 검색을 제공하고 있는 'CGTextures.com'의 특징은 개별 텍스쳐 이미지마다 분류 레이블 잘 정리해 놓은 것이 눈에 띄는 부분..

Design Information/Design Resources 2009. 4. 21. 18:25