그동안 웹상에서는 JPG, PNG, GIF 포맷의 이미지가 많이 사용됐는데 최근 새로운 이미지 포맷이 개발돼 화제입니다. 이미지는 주로 JPG 형식을 사용하지만 용량을 줄이기 위해 압축 시 로스가 많았지만 그런대로 쓸만 했습니다. 최근에 개발된 BPG 포맷은 JPG와 동일한 화질을 유지한 채 2분의 1 크기 이상으로 줄일 수 있습니다. BPG는 Better Portable Graphics(더 좋은 휴대용 그래픽)의 약자입니다. BPG는 동영상의 새로운 기술인 HEVC(High Efficiency Video Coding)에서 파생된 것입니다. 동영상은 하나의 프레임의 이미지를 연속 동작으로 보여주는 것인데 이 기술의 하나의 프레임이 BPG인 것입니다. 그동안 사용됐던 H.264/MPEG-4 AVC 기술을 ..
웹디자인을 하다보면 이미지 사용은 필수입니다. 이미지가 사이트의 품질을 좌우하기 때문이죠. 워드프레스 테마를 선택하더라도 좋은 이미지를 사용하면 멋진 사이트처럼 보이기 때문에 선택하는데 많은 영향을 미칩니다. 이미지 산업도 아주 큰 범위로 성장하고 있습니다. 저는 해외의 대표적인 이미지 사이트인 iStockphoto나 Shutterstock을 주로 이용하는데 이들 사이트가 한국어를 지원해서 사용하기도 편리해졌습니다. 이번 글에서는 Shutterstock 사이트를 이용하는 방법을 알아보겠습니다. http://www.shutterstock.com 셔터스톡은 여러 사이트를 점검해봤는데 검색이 가장 편리한 사이트입니다. 수천만장의 이미지에서 원하는 이미지를 찾기 위해서는 카테고리를 축소해서 찾게 되는데 클릭만으..
빠른 속도를 위해 SSD를 사용하는데 계속 사용하다보면 용량이 늘어나 파일을 이동해야 하는 일이 발생합니다. 설치 초기부터 관리했어야 함을 절감합니다. 각종 프로그램을 다시 제거하고 하드디스크로 이동해주고 있는 상황입니다. 처음 사용 시작할 때 웬만한 프로그램은 하드디스크에 설치할 것을 권장합니다. 그래도 사용하다보면 SSD에 새로 설치한 프로그램도 없는데 용량이 줄어들더군요. 폴더를 검색해보니 TEMP 폴더에 임시파일들이 계속 저장돼서 그렇더군요. 임시 파일을 계속 삭제해 주기도 불편하고 다른 하드디스크로 설정해주면 편리할 것 같습니다. 우선 하드디스크인 D 드라이브에 D:\Temp 폴더를 하나 만듭니다. 제어판의 시스템-->고급 시스템 설정-->환경변수를 클릭합니다. 사용자 변수 패널에서 TEMP와 ..
포토샵 자료를 오랫만에 올립니다. 어제 책 이미지를 만들기 위해 구글 검색 도중 발견한 사이트인데 책이나 팜플렛, 명함, 잡지, 등 각종 3D 출판물 이미지를 2D 이미지를 이용해 만들 수 있는 액션입니다. 이런 액션을 만들 수 있는 포토샵도 대단하지만 이런 액션을 만든 사람도 대단하고 이런 대단한 액션을 무료로 사용할 수 있게한 사이트도 대단합니다. 위 이미지는 잡지를 찍은 사진 같지만 왼쪽 오른쪽 두가지 2D 이미지를 이용해서 만든 3D 이미지입니다. http://www.psdcovers.com/ 위 사이트로 이동해서 Actions 버튼을 클릭하면 여러 가지 액션이 있는 페이지가 나옵니다. 내려받기 버튼을 사용해서 파일을 내려받습니다. 일련번호로 돼있으니 여러 개를 받을 때는 어떤 액션인지 이름을 수..
최근 다폰트 추천 폰트 Cellos Script 34,859 downloads (5,665 yesterday) Free for personal use Download Donate to author CellosScript_PersonalUse.ttfNote of the authorNOTE: This font is for PERSONAL USE ONLY! To purchase a commercial license, visit: http://www.aringtypeface.com/cellos-script For questions or proposals, feel very free to mail contact@aringtypeface.com Visit my website: http://www.aringtypef..
포토샵으로 웹디자인을 할 경우 폰트 아이콘으로 많이 사용하는 폰트 어썸 아이콘 폰트를 사용하는 방법에 대해 알아보겠습니다. 폰트 어썸은 트위터 부트스트랩에서 사용하도록 만들어졌지만 부트스트랩을 사용하지 않더라도 웹디자인에 사용할 수 있도록 돼있고 IE7 버전까지 지원하며 아이콘의 수도 계속 늘어나서 현재 360개를 사용할 수 있어서 많은 웹 개발자나 디자이너들이 선호하는 폰트 아이콘입니다. http://fortawesome.github.io/Font-Awesome/ 우선 폰트를 컴퓨터에 설치하기 위해서 위 사이트에서 노란색 버튼을 클릭해서 파일을 내려받아 압축 해제합니다. 폴더로 들어가서 ttf나 otf 폰트를 마우스 오른쪽 클릭해서 설치합니다. 폰트가 5종류가 있는데 나머지는 웹폰트 전용입니다. 첫번째..
어도비 제품이 크리에이티브 클라우드로 전환되면서 포토샵이나 일러스트레이터를 사용하면 웹디자인이 한결 쉬워집니다. 이전 글에서 포토샵으로 만든 이미지에서 스타일시트를 추출할 수가 있고 일러스트레이터로 디자인하면 형태 그대로 보존하면서 스타일시트와 이미지를 내보내기(Export) 할 수 있습니다. 이번 글에서는 포토샵으로 디자인할 경우 많이 사용하는 셰이프 툴의 포토샵 CC에서 개선된 기능에 대해 알아보겠습니다. 포토샵 CC에서 새 문서를 만들고 도구 모음에서 셰이프 툴을 선택합니다. 라이브 셰이프가 가능한 것은 직사각형 툴과 둥근 직사각형 툴입니다. 둥근 모서리의 라이브 기능을 알아보기 위해서 우선 직사각형 툴을 선택합니다. 옵션 바에서 내부 색상과 테두리 색상, 테두리 폭을 설정하고 문서에 클릭 드래그하..
CSS Copy 기능은 포토샵 CS 6.1 버전에서 업데이트 된 기능입니다. 포토샵 CC에서는 기본으로 설치돼 있습니다. 이것은 포토샵을 이용해서 버튼이나 HTML 요소를 이미지로 만들고 CSS Copy를 선택하면 스타일시트를 자동으로 만들어주는 기능입니다. 이를 그대로 스타일시트에 붙여서 사용하면 됩니다. 하지만 포토샵의 모든 효과가 스타일시트로 전환되는 것이 아니라 일부는 스타일시트를 생성하지 못합니다. 그래서 제3자 확장 프로그램이 개발됐습니다. 우선 포토샵 CC의 CSS Copy 기능을 알아보겠습니다. 포토샵 CC로 직접 버튼을 만들어도 되지만 부트스트랩 PSD 파일을 이용해보겠습니다. 이 파일을 포토샵 CC에 열고 기존에 열려있는 요소들을 안보이도록 눈아이콘을 모두 꺼준 다음 버튼 그룹의 Mai..
사진 이미지의 크기를 변경하는 것은 이미지의 픽셀을 늘리는 것이기 때문에 원본 이미지가 흐리게 되는 현상이 나타납니다. 포토샵의 이미지 리사이즈 기능은 이전 보다 훨씬 개선되면서 단순히 이미지 크기 변경 뿐만 아니라 선명효과, 노이즈 제거 효과등을 한 곳에서 처리할 수 있는 하나의 툴로 진화된 기능을 보여주고 있습니다. 이미지 크기 변경을 하면서 편리하고 한층 강화화된 것입니다. Ctrl+Alt+i 키를 누르면 창이 나타납니다. 이전 버전과는 달리 이미지 미리보기 창이 있습니다. 이미지 크기 변경을 하면서 미리볼 수 있으니 편리해졌습니다. 커서를 이미지에 올리면 네모로 변경되고 클릭하면 창의 이미지 위치가 변경됩니다. 기능이 더 좋아진 것은 우측 하단을 클릭 드래그해서 창 크기를 변경할 수 있다는 점입니..
어도비가 마침내 모든 프로그램을 클라우드 서비스로 시작했습니다. 프로그램을 구매해야 하는 단계에서 구독하는 단계로 진화했습니다. 진화한 것인지 퇴보한 것인지는 앞으로 지켜봐야겠습니다. 일반적으로 프로그램이란 것은 구매해서 내것으로 소유하고 언제든 사용할 수 있어야 하는데 CC 버전 부터는 소유자가 아닌 임차인이 됩니다. 사실 구매 버전이라도 소유하는 것이 아니라 라이센스만 취득하는 것이죠. 소유권은 제작자에 있습니다. 하지만 구독의 경우 사용하지 않더라도 돈이 나가고 있다는 강박관념이 자리잡게 됩니다. 프로그램을 항상 사용하는 직업 디자이너의 경우는 다르겠지만 취미로 사용하는 경우는 한달에 몇번 정도 사용하는데 월 이용료를 꼬박꼬박 내야한다는 것이 부담이 됩니다. 종량제가 어떨지... 마스터콜렉션의 경우..
다폰트의 경우 폰트를 만든 사람이 직접 업로드해서 폰트를 소개하는 곳이지만 이러한 작업을 원치않는 경우 좋은 무료 폰트를 만나기 어렵습니다. freetypography.com은 이러한 폰트를 찾아서 소개하는 사이트입니다. 대부분이 상업용으로 사용해도 되는 폰트이지만 전체를 확인해보지는 않았으니 상업용으로 사용할 경우 일일히 확인하시는 것이 좋습니다. http://freetypography.com 이곳의 폰트를 몇가지 알아보겠습니다. Drebeden Accent Mosaic Leaf Prosto Valentina GOTA
각종 웹브라우저가 지속적으로 업그레이드되면서 CSS3 규칙의 채용이 더욱 늘어나는 추세입니다. 그러면서 스타일시트만으로 멋진 웹페이지를 만들 수 있죠. 이전에는 포토샵이나 파이어워크로 만든 이미지로 버튼, 메뉴바, 아이콘 등에 사용했습니다. 이러한 이미지를 사용하면 반응형 모바일 디자인에서는 레이아웃을 벗어나게 됩니다. 그래서 포토샵으로 만든 UI 그래픽 디자인도 사라질 전망입니다. 스타일시트만으로 얼마든지 위와같은 모양을 만들 수 있기 때문이죠. 부트스트랩 관련 프로젝트 중에는 위와같은 psd 파일을 만들어놓은 것이 있습니다( http://gui.repixdesign.com/#bootstrap ). CSS 만으로 얼마든지 만들 수 있는데 왜 이런 것을 만들었을까요. 포토샵으로 레이아웃 디자인을 먼저 만..
최근 다폰트 추천 폰트입니다. Recorda Script RecordaScript_Personal_Use_Only.ttfNote of the authorNOTE: This font is for PERSONAL USE ONLY! To purchase a commercial license, visit: http://www.mawns.com/fonts.html?font=recorda-script For questions or proposals, feel very free to mail info@mawns.com Visit my website: http://www.mawns.com Like my fonts on Facebook: http://www.facebook.com/mawnsfonts First seen ..
며칠전에 어도비에서 CS2 프로그램을 무료로 개방한다는 글이 올라왔는데 구글에서 검색해보니 전혀 아니었습니다. 오늘도 다른 분이 이와 같은 내용의 글을 올렸더군요. 해외의 블로그에서 무료로 개방한다는 글이 올라오면서 한국에서도 이런 글을 보고 올린 글 같습니다. 이런 일이 일어난 연유를 알아보니 어도비의 실수라는 생각이 듭니다. 문제의 발단은 어도비의 프로그램은 인터넷으로 인증을 거치는데 CS2는 2005년에 나온 프로그램이라서 2012.12.13일부로 인증 서버 가동을 중단했습니다. 그런데 이 프로그램을 갖고 있는 고객들이 재설치를 할 때 기존의 시리얼 번호로 인증이 안되므로 시리얼 번호와 프로그램을 내려받아 사용할 수 있도록 했습니다. ("Effective December 13, Adobe disab..
최근 다폰트에 업로드된 추천 폰트입니다. January ScriptNote of the authorNOTE: This font is for PERSONAL USE ONLY! To purchase a commercial license, visit: http://www.mawns.com/fonts.html?font=january-script For questions or proposals, feel very free to mail info@mawns.com Visit my website: http://www.mawns.com Like my fonts on Facebook: http://www.facebook.com/mawnsfonts First seen on DaFont: 01-08-2013 개인용 무료입니..
최근 다폰트에 올라온 추천 폰트입니다. Smell The Roses 개인용 무료입니다. Calendary Hands Note of the authorNOTE: This font is for PERSONAL USE ONLY! To purchase a commercial license, visit: http://www.mawns.com/fonts.html?font=calendary-hands For questions or proposals, feel very free to mail info@mawns.com Visit my website: http://www.mawns.com Like my fonts on Facebook: http://www.facebook.com/mawnsfonts First seen o..