웹통의 웹으로 통하는 세상

2015/01 (15)

웹디자인 핵심이 담겨있는 무료 전자책 18권 소개

웹통 디자인 창고/유용한 디자인 자료 블로그-관리자 2015. 1. 28. 16:29

웹디자인 관련 무료 EBOOK 소개 오늘은 지난해 출시된 웹디자인 관련 무료 전자책을 소개해 드릴까합니다. 총 18권의 전자책으로 CSS, HTML, SVG, 자바스크립트, 웹 기초, 반응형 웹 디자인 등 각 분야의 도움이 되는 내용을 담고 있습니다. 아쉽게도 모든 문서는 영문으로 제작되어 어느정도 웹언어에 대한 지식이 없다면 이해하기 쉽지 않을것 같습니다. 저도 사실 전부 이해는 되지 않았습니다. 다만 몇가지 책은 현재 진행되는 프로젝트에 많은 도움이 될정도로 핵심적인 내용을 담고 있습니다. 아래의 웹디자인 전자책을 통해 웹에 대한 이해도를 높여보세요.~~ Adaptive Web Design by Aaron Gustafson (HTML) Aaron Gustafson이 작성한 웹디자인 전자책입니다. 웹디..

쇼핑몰 디자인제작에 유용한 유저인터페이스 포토샵 소스

웹통 디자인 창고/포토샵 자료 블로그-관리자 2015. 1. 26. 15:02

2015년 트랜드에 어울리는 쇼핑몰 UI 키트 모음 불과 얼마전까지만 해도 옷한벌 살려면 1시간 이상은 길거리를 헤매야 했었는데요. 지금은 쇼핑몰을 통해 집에서 손쉽게 물건을 구매할수 있게 되었습니다. 정말 놀라운 발전이라고 할수 있습니다. 지금 이순간에도 쇼핑몰 산업은 꾸준히 진화되고 발전되고 있습니다. 특히 스마트폰의 보급화로 2015년은 모바일 거래량이 pc를 추월할지도 모르겠습니다. 오늘은 시시각각 변화하는 쇼핑몰 트랜드에 도움이 되는 유저인터페이스(UI) 팩키지 포토샵 소스를 소개해 드리겠습니다. 전자상거래 사이트를 개발할때 일관성 있는 디자인과 고객의 편의를 생각한 인터페이스를 만드실 수 있습니다. 총 11가지의 UI를 활용하여 멋진 쇼핑몰을 꾸며보세요. Retro eCommerce PSD U..

[움짤만드는법] 누구나 쉽게 만들수 있는 GIF 제작 도구 소개

IT&COMPUTER/프로그램 블로그-관리자 2015. 1. 22. 14:13

온라인 GIF 애니메이션 메이커 7종 소개 "움직이는 짤방" 줄여서 움짤은 gif 애니메이션 형식으로 만들어진 이미지파일을 말합니다. 여러개의 이미지들이 정해진 순서대로 무한 반복하거나 애니메이션 완료후 멈추도록 하는 방식이 있는데요. 보통 움짤은 무한 루프로 동일 영상을 반복적으로 보여주는 방식으로 만들어집니다. 이러한 gif는 포토샵 또는 포토스케이프 등 설치형 프로그램으로 제작되어 지고 있지만 온라인상에서 설치없이 이미지 또는 동영상을 편집하여 gif로 만들어 주는 도구들도 많이 있습니다. 오늘은 언제든지 인터넷만 가능하다면 gif 움짤을 만들수 있는 온라인 애니메이션 도구를 소개해 드리겠습니다. 총 8가지의 도구들로 동영상 또는 이미지를 손쉽게 gif로 만들어 낼수 있으며 빠르게 공유할 수 있는 ..

이미지를 돋보이게 하는 폴라로이드 사진 프레임 포토샵 소스

웹통 디자인 창고/포토샵 자료 블로그-관리자 2015. 1. 21. 13:47

감성적인 폴라로이드 액자 포토샵 템플릿 모음 폴라로이드는 카메라의 한 유형으로 촬영후 바로 사진을 현상하여 즉석에서 결과물을 얻을 수 있는 기기입니다. 폴라로이드 사진은 정사각형의 크기를 사용하여 일반사진과 비율에서 차이점이 있으며 사진 색감 또한 조금 뿌옇고 바랜느낌을 받을수 있는데요. 이러한 폴라로이드만의 특징을 잘 표현한다면 유사하게 포토샵에서 만들어 낼수 있습니다. 오늘은 폴라로이드 사진 프레임 포토샵 소스를 소개해 드리겠습니다. 레이어가 살아있는 포토샵 원본으로 다운이 가능하여 사진 프레임에 이미지만 삽입하면 멋진 폴라로이드 효과를 만들수 있습니다. 다양한 스타일의 액자 프레임으로 멋진 이미지를 연출해보세요. Polaroid Free PSD Template 벡터 방식으로 제작된 폴라로이드 액자 ..

인보이스 양식이 필요없는 온라인 거래명세서 작성 도구

IT&COMPUTER/프로그램 블로그-관리자 2015. 1. 19. 16:46

온라인 영문 인보이스 작성 도구 10종 소개 인보이스란 발송인이 수하인에게 보내는 거래상품명세서를 말하는데요. 인보이스에는 상품명 및 수량, 단가, 인도 조건 등의 상세한 거래 내용을 명시 해야합니다. 이러한 거래명세서는 엑셀 또는 워드 등으로 작성 직접 작성하거나 양식을 다운받아 편집하여 만들수 있지만 도구없이 웹 브라우저 상에서 특정 템플릿을 활용하면 전문적인 결과를 만들낼 수 있습니다. 오늘은 온라인상에서 영문 인보이스를 만들수 있는 사이트를 소개해 드리겠습니다. 컴퓨터에 인터넷 연결만 되어있다면 언제든지 송장 생성기로 빠르게 거래명세서를 만들어 낼 수 있습니다. ^^ 영문 인보이스 생성기로 편리하게 문서를 작성해 보세요.~ Quick Invoices 미리 작성된 인보이스 양식에 내용만 작성하면 바..

복고풍 디자인에 유용한 레트로 스타일 영문폰트 모음

웹통 디자인 창고/폰트 자료 블로그-관리자 2015. 1. 16. 16:20

빈티지 & 레트로 스타일 무료 영문폰트 모음 레트로란 과거를 회상하며 그것을 재현하려는 것을 말합니다. 최근들어 방송가에서도 흘러간 90년대의 노래를 다시 대중에게 재현하여 뜨거운 반응을 얻고 있는데요. 단순히 그때 그 시절의 노래만 보여줬다면 큰 호응 얻지 못했을것 같습니다. 과거의 추억과 현대의 상황을 절묘하게 연결하여 시대의 감성으로 재창조한것이 공감을 이끌어낼수 있었습니다. 레트로 디자인도 단순히 과거 유행했던 것을 사용하는것이 아니라 현대적 감성에 접목하여 새로운 의미와 가치를 창조하는것이 중요한데요. 오늘은 레트리 디자인을 제작할때 유용한 영문 폰트를 소개해 드리겠습니다. 복고풍의 글씨체로 세련되고 현대적인 감각으로 재탄생한 폰트입니다. 빈티지 폰트를 사용하여 친숙하면서도 새로운 복고풍 디자인..

다양한 직업에 맞게 선택할 수 있는 워드 이력서 양식

웹통 디자인 창고/유용한 디자인 자료 블로그-관리자 2015. 1. 15. 13:59

4가지 직업 테마로 제작된 무료 워드 이력서 양식 이력서를 지원하는 회사 또는 직종에 맞게 컨셉을 잡는다면 인사담당자에게 전문적인 인상을 심어줄 수 있습니다. 모든 직종에 동일한 형태의 이력서를 사용하기 보다는 사진작가의 이력서에 포토폴리오 사진들을 배경처럼 사용한다거나 디자이너의 창의력을 어필할 수 있는 시각적인 요소를 사용한 차별화된 이력서를 만든다면 좀더 좋은 점수를 받을수 있을것 같습니다. 오늘은 워드문서로 제작된 4가지 컨셉의 이력서 양식 템플릿을 소개해 드리겠습니다. 포트폴리오, 크레이티브, 모던, 뉴스레터 스타일로 각 최대 20개 이상의 다양한 양식이 포함되어 있습니다. 포트폴리오,크레이티브는 디자인 또는 사진에 관련된 직종에 적합하며 모던 스타일은 일반적인 사무직, 뉴스레터 스타일은 기자,..

40000개 이상의 전세계 유명 브랜드의 벡터 로고를 다운받을 수 있는 사이트

웹통 디자인 창고/유용한 디자인 자료 블로그-관리자 2015. 1. 14. 15:13

방대한 전세계 기업 로고를 보유한 사이트 소개 세계의 브랜드 로고를 자유롭게 다운받을수 있는곳을 발견했습니다.^^ 바로 Brandsoftheworld라는 사이트입니다. 40000개 이상의 방대한 벡터 방식의 로고를 보유하고 있는데요. 전세계 사용자들에 의해 로고가 등록되는 방식이다 보니 지속적으로 업데이트가 이루어지고 있습니다. 놀라운점은 유명 브랜드를 검색하면 메인 로고 뿐만아니라 계열사 또는 연관되는 로고까지 다운이 가능합니다. 다운받은 파일은 EPS형식의 벡터로 제작되어 해상도 걱정없이 인쇄 또는 수정이 가능하구요. 허가를 받지 않은 국제 저작권과 상표권 위반행동은 법적인 제재를 받을수 있습니다. 그럼 Brandsoftheworld 사이트에 대해 좀더 알아보겠습니다.~ Brandsoftheworld..

레이어명을 한번에 바꿀 수 있는 포토샵 스크립트 소개

웹통 디자인 창고/포토샵 자료 블로그-관리자 2015. 1. 13. 15:20

대량으로 레이어명을 변경해주는 포토샵 스크립트 포토샵에서는 반복되는 작업을 자동화를 통해 생산성을 향상시킬수 있는 방법들이 있습니다. 대표적으론 스크립트, 플러그인, 액션이 있습니다. 그 중에 스크립트는 좀더 진보된 자동화 기술을 사용할 수 있으며 포토샵에 기본으로 내장된 스크립트만 해도 빈레이어 삭제, 레이어 스타일이 포함된 레이어 통합, 마스크 레이어 통합 등 작업에 꽤 도움되는 스크립트를 사용할 수 있습니다. 또한 추가적으로 스크립트 설치하여 확장하여 사용이 가능한데요. 오늘은 포토샵에서 레어어의 이름을 한번에 모두 변경할 수 있는 매우 유용한 스크립트를 소개해 드리겠습니다. 레이어 이름을 변경하기 위해선 레이어명을 더블 클릭하여 일일이 수정해줘야 합니다. CS6 부터는 TAB을 누르면 다음 레이어..

기업이미지통합전략(CIP)에 유용한 포토샵 애플리케이션 목업 디자인

웹통 디자인 창고/포토샵 자료 블로그-관리자 2015. 1. 12. 15:43

기업 아이덴티티 제작에 유용한 포토샵 CIP 모형물 템플릿 기업이미지통합전략 (corporate image identity program) 줄여서 CIP는 체계적으로 기업의 이미지를 단일화 시키는 작업을 말합니다. CIP는 크게 베이직 시스템과 애플리케이션 시스템으로 나뉠수 있습니다. 베이직 시스템은 심벌, 로고, 색채, 케릭터 등 기업을 대표할수 있는 이미지를 말하며 서식류, 의류, 차량, 사인류 등의 베이직 시스템을 응용하여 적용시킨 것을 어플리케이션 시스템이라고 합니다. 오늘은 CIP 어플리케이션 제작에 도움이 되는 포토샵 목업 소스를 소개해 드리겠습니다. 봉투, 편지지, 팩스지, 명함, 시계, 사원증, CD 등 주로 문구류에 관련된 템플릿 소스입니다. 로고 또는 심볼만 있다면 실제로 제작하기전에 ..

네거티브 스페이스로 두가지 의미를 가진 로고 디자인 소개

크레이티브 디자인 블로그-관리자 2015. 1. 9. 14:20

이중적인 의미를 내포한 로고 디자인 소개 건축에서는 네거티브 스페이스를 물체에 의해 둘러 싸여서 생기는 공간이라고 표현합니다. 면에 의해 불완전하게 둘러싸여 완결되지 않은 소극적 공간이라고 할수 있는데요. 이러한 방법은 그래픽 아트에서도 많이 사용되고 있습니다. 보이는 면(positive space)과 안보이는 면(negative space)의 이중적인 이미지를 이용하여 디자인안에 두가지의 의미를 부여할수 있습니다. 오늘은 네거티브 스페이스로 만들어진 로고 디자인을 소개해 드리겠습니다. 총 20가지의 로고 디자인으로 심볼 또는 로고안에 비지니스 메세지가 숨겨져 있습니다. 작은 로고안에 상상하는 것보다 훨씬 많은 내용을 삽입할때의 핵심은 창의력입니다. 아래의 자료들의 숨겨진 의미를 찾으면서 창의력을 키워보..

다양한 특수문자로 구성된 무료 딩벳폰트 모음

웹통 디자인 창고/폰트 자료 블로그-관리자 2015. 1. 8. 15:02

활용도 높은 딩벳폰트 10종 소개 딩벳 폰트는 알파벳 또는 한글이 아닌 기호, 심볼, 아이콘 등 글꼴과 함께 사용하기 위해 고안된 간단한 이미지형 폰트를 말합니다. 이러한 딩벳 폰트의 가장 큰 장점은 이미지 편집 없이 필요에 따라 크기와 색상을 변경하여 사용이 가능하다는 점인데요. 단순히 폰트의 보조 역할 보다도 디자인 자료로 충분히 활용이 가능하며 아이콘 방식의 빠른 소통을 하는 세대에게 직관적인 디자인 표현을 할수 있습니다. 오늘은 매력적이고 독특한 디자인의 딩벳 폰트를 소개해 드리겠습니다. 동물, 자전거, 리본, 나비, 화살표 등 매우 활용도 높은 일러스트로 제작된 폰트입니다. 새로운 소통의 수단이 될수 있는 딩벳폰트로 멋진 디자인을 만들어 보세요.~ Farm & Wild Animals 양,말,돼지..

눈 내리는 효과를 만들 수 있는 포토샵 스노우 브러쉬 모음

웹통 디자인 창고/포토샵 자료 블로그-관리자 2015. 1. 7. 13:25

겨울 디자인 테마에 유용한 포토샵 눈 브러쉬 소개 잠시 포근했던 날씨가 다시 추워지기 시작하네요. 저는 여름과 겨울중 선택하라고 하면 차라리 더운 여름을 택할것 같아요. 겨울만 되면 내복에 두꺼운 양말, 목도리, 핫팩 등 따뜻할만한 모든것을 준비해도 살속을 비집고 들어오는 한기가 너무 싫습니다. ㅜㅜ 그렇지만... 겨울이 좋은점이 하나 있는데요. 바로 눈입니다. 하얀 눈이 내려올때는 잠시남아 마음이 평온해지고 기분이 무척 좋아집니다. 내린후엔 또 싫지만요. 사설이 너무 길었네요. 오늘은 겨울 테마에 잘 어울리는 포토샵 눈 브러쉬를 소개해 드리겠습니다. 눈도 내리는 형태에 따라 함박눈, 싸락눈, 가루눈, 날린눈, 진눈깨비 등 다양한데요. 총 15가지의 눈 브러쉬를 사용한다면 대부분의 눈 내리는 장면을 표현..

뛰어난 2D 벡터 그래픽 애니메이션 SVG 강좌 소개

포토샵&일러스트 강좌 블로그-관리자 2015. 1. 6. 14:24

벡터 그래픽 SVG의 활용도 높은 강좌 모음 SVG는 XML 기반의 2D 벡터 그래픽 파일 형식입니다. 다른 애니메니션 방식과 가장 큰 차이점은 해상도입니다. 어떤 장치 또는 브라우저에서 픽셀에 대한 걱정 없이 동일한 해상도를 보여줄수 있어서 매우 활용도가 높습니다. 현재 SVG는 그래픽 전문 프로그램들이 많이 개발되어서 예전에 비해 빠르고 쉽게 애니메이션을 제작할 수 있습니다. SVG 그래픽 도구는 얼마전에 포스팅한 내용을 참고하시면 도움이 되실것 같구요. (하단 관련글 참조) 오늘은 SVG 애니메이션을 배울수 있는 몇가지 강좌를 소개해 드리겠습니다. 버턴, 애니메이션, SVG 파일 변환 등 기본적인 SVG 활용 강좌들입니다. 다만 영문으로 제작되어 내용을 쉽게 이해하기 어려운데요. 구글 크롬 자동 번..

희망찬 2015년의 첫 시작은 새해 컴퓨터 배경화면으로 출발해보세요.

IT&COMPUTER/컴퓨터 배경화면 블로그-관리자 2015. 1. 2. 16:43

희망찬 새해를 여는 2015년 HD 컴퓨터 바탕화면 해피뉴이어~~ 희망찬 2015년이 시작되었습니다. 새로운 생각, 새로운 희망, 새로운 계획... 모든게 초기화 된것 같은 마음인데요. 작년 한해의 안좋은 일들은 모두 잊어버리고 긍정적인 에너지로 2015년 시작하기 위해서 먼저 주변 환경에 작은 변화을 주는건 어떨까요? 예를들면 가구의 위치를 변경한다든지, 집안청소, 커튼 심지어 컴퓨터 배경화면을 변경해도 산뜻한 새출발의 느낌을 받을수 있습니다. 오늘은 새해를 맞이하여 새로운 변화의 시작점이 될수 있는 멋진 컴퓨터 배경화면을 소개해 드리겠습니다. 이런 작은 변화가 2015년에 어떤식으로 영향을 줄지는 모르지만 배경화면을 교체함으로써 신년 느낌을 느껴보세요.~ 18 Beautiful 2015 New Yea..

Copyright © 웹통의 웹으로 통하는 세상 All Rights Reserved
Designed by JB FACTORY

티스토리툴바