실무 웹표준 지침서, '크리에이티브 디자이너를 위한 웹표준' 근래에 들어 심심찮게 회자되는 단어가 바로 '웹표준'이 아닐까 싶다. 웹2.0 시대가 도래한 이후 다양한 플랫폼이 사용되기 시작했고 그로 인해 웹디자인 분야는 또 한번의 격동기 아닌 격동기를 거치게 된다. 특정 웹브라우저에 비중을 두고 HTML, Java, 플래시 같은 플러그인 요소를 접목해 완성하는 일반적인 웹디자인 스타일만으로는 경쟁력을 갖추기 힘든 시장상황이기도 하다. 비록 웹 환경을 구축하는 큰 맥락은 같을지 모르지만, 사용하는 웹브라우저가 다르고, 모바일 웹페이지 그리고 웹2.0 으로 지칭되는 블로그, SNS, 위젯에 이르기까지 콘텐츠의 효율적인 연동이 요구되는 오늘의 상황에선 어쩌면 웹표준이 필수요소인 것은 부인하기 어려운 까닭이다...

Design Information/HTML5 and CSS3 2010. 6. 4. 13:22

힙합(Hip Hop), 폰트로 거듭나 신세대의 자유와 개성, 거침없는 감성을 디자인하다. 우리가 알고 있는 힙합(Hip Hop)은 대중음악의 한 장르라는 인식이 크다. 하지만 이제 그 영역의 경계를 넘어 디자인의 한 요소로 거듭나기를 시작하고 있는 듯 하다. 원칙과 통제보다는 자율과 개성을 추구하는 신세대. 그들만의 자유롭고 거침없는 감성을 담은 '무료 힙합 폰트(Hip Hop Font) 100선' 이 해외 디자인 블로그를 통해 공유되어 활용할 수 있도록 소개한다. 이 유용한 무료 힙합폰트 디자인 리소스는 2004년부터 웹디자인, 웹 개발, 웹 매니저먼트 서비스를 해 온 newevolutiondesigns.com이 최근 블로그를 운영하면서 공유한 자료이다. 트루타입(True Type) 형식의 폰트이며, ..

Design Information/Design Resources 2010. 6. 3. 07:04

포토샵 CS5의 Refine Mask 기능을 학습하기 좋은 추상적 배경 합성 예제 한 장의 모델이미지를 가지고 포토샵을 이용, 백그라운드에 추상적 구성(abstract composition)을 가미 몽환적이면서 아름다운 이미지로 표현할 수 있는 사용예제 입니다. 이 예제를 통해서 모델의 머리결을 보다 정교하게 마스킹할 수 있는 포토샵 CS5의 'Refine Mask'의 놀라운 기능과 마스크 레이어 리터칭의 효과적인 사용법을 익힐 수 있으며, 외부 브러시 불러오기, 패턴 생성과 적용 방법에 대해서도 학습할 수 있습니다. 위의 이미지는 ADOBE TUTORIALS 블로그에서 제공하는 How to create an abstract composition using Photoshop 예제를 바탕으로 직접 작업해 ..

Design Information/Designer Portfolio 2010. 5. 6. 12:20

CSS3를 활용, 타이포그래피 삽입 방법을 설명하려고 합니다. 테이블 태그 또는 이미지를 사용하지 않고 css3를 이용하여 박스를 구현하고, 그라데이션 효과와 그림자 효과를 표현하고 입체적인 타이포그래피를 구현하는 방법은 아래와 같습니다. 참고로 본 예제는 Firefox3.6, Safari 4.0 이상에서 직접 확인할 수 있으며, IE8.0에서 CSS3 이 구현되지 않아 확인이 불가하기에 위의 첨부이미지로 실 적용효과를 대체합니다. CSS3 정의. #insetBgd { width: 500px; height: 100px; background: -moz-linear-gradient(-90deg,#003471,#448CCB); background: -webkit-gradient(linear, left top,..

Design Information/HTML5 and CSS3 2010. 3. 22. 00:44

디자인 소스 - 빛망울 효과(Bokeh Effects) 패키지, 고해상도 무료 이미지 42장 영화, 드라마 또는 사진 등에서 다소 몽환적이면서 환상적인 분위기를 연출해 내는 빛망울을 보게 됩니다. 이런 빛망울을 '보케(Bokeh)'라고 일컫는데 단어가 일반인들에게는 다소 생소할 수도 있습니다. 주로 영상이나 포토그래피, 디자인 분야에서 자주 쓰이는 용어인 '보케(bokeh)' 는 야간에 얕은 심도를 활용해 촬영하다보면 뒷배경에 꼬마 전구같은 조명이 있는 경우, 초점이 맞지 않는 영역에서 조명 빛이 살짝 퍼지면서 빛망울처럼 예쁘게 맺히는 것을 볼 수 있는데 이런 현상을 지칭하는 말입니다. 연출에 따라 몽환적인 느낌을 자아내면서 환상적인 분위기를 연출하기도 합니다. 때로는 렌즈의 초점을 인위적으로 안맞게 조..

Design Information/Design Resources 2010. 3. 15. 04:15

3D 모델은 건축, 인테리어, 컴퓨터 그래픽 등 다양하고 폭넓은 산업분야에서 사용되어 오면서 현실에 가장 가까운 가상의 결과물을 미리 구현해 볼 수 있다는 점에서 각광을 받고 있다. 최근들어 최고의 화제작 영화 '아바타'의 흥행에서 알 수 있듯이 대중들도 2차원적인 2D 보다는 3차원적인 3D 콘텐츠에 관심이 높아지고 있음을 엿볼 수 있고 더불어 3D 인터페이스, 3D LED TV 출시 등 실 생활 깊숙히 3D 열풍이 불고 있다. 하나의 3D 장면이 완성도 높게 구현되기 위해서는 시점에 따라 공간감과 입체감을 충분히 구현해 줄 수 있는 다수의 3D Model이 잘 조합되어 있어야 한다. 그러기에 작업자는 상황에 맞게 3D Model을 그리거나 기존에 제작된 리소스를 활용해 표현하곤 하는데 다양한 오브젝트..

Design Information/Design Resources 2010. 3. 3. 17:14

2010년 웹디자인 트렌드는 '어떤 변화와 요소들이 가장 쟁점이 될 것인가?'는 디자이너, 개발자 모두에게 아주 중요한 리소스입니다. 그런 연유로 새로운 한해가 시작되면 전문가들이 향후 트렌드 전망을 매체를 통해 발표하고 현업 실무 디자이너와 개발자들은 업무 지침으로 참고하여 프로세스에 반영하게 됩니다. 최근 해외 웹 트렌드 및 디자인 아이디어를 공유하는 해외 유명 사이트 '웹 디자이너 월(Web Designer Wall)'에서 디자인 전문가들이 2010년 디자인 트렌드 예측한 'Design Trends (Predictions) in 2010' 이란 글을 발행했습니다. 그 개요를 정리해 보면 'HTML5' 와 'CSS3'을 가장 큰 변화로 전망했고, 소셜 네트워크 서비스(SNS)인 트위터(twitter)..

Design Information/HTML5 and CSS3 2010. 1. 23. 08:57

세계적으로 통용되는 영문폰트는 수십만 가지에 이르고, 고급 폰트들 중에도 상용 폰트 못지 않게 무료 폰트도 꽤 많이 찾아 볼 수 있습니다. 그 수를 헤아리기 힘든 다양하게 많은 폰트들을 머리 속에 꿰고 있어 디자이너가 디자인 컨셉에 맞춰 언제든지 자유롭게 활용할 수 있다면 더할 나위 없이 좋은 일이 아닐 수 없습니다. 최근 instant Shift 에서 놀라운 퀄리티의 무료 폰트를 다운로드 할 수 있는 링크를 담은 '35 Stunning Free Fonts To Enhance Your Designs'라는 글을 발행했는데 그 중에서 개성이 강하고 놓치기 아까운 무료폰트만을 따로 선별해 소개해 봅니다. 여기에 소개하는 무료폰트의 링크는 별도의 참조를 통해 다운로드 될 수도 있고 해당 폰트의 다운로드 경로도 ..

Design Information/Design Fonts 2010. 1. 12. 10:25