'홈페이지 제작' 태그의 글 목록

홈페이지 제작 (24)

빠르고 효율적인 HTML5 제작을 위한 유용한 도구

IT&COMPUTER/프로그램 블로그-관리자 2014. 10. 17. 10:05

개발자와 디자이너를 위한 HTML5 제작 도구 HTML5 등장이후 많은 개발자와 디자이너들의 관심이 모아지고 있습니다. HTML5는 개발자와 디자이너의 작업을 단순화해줄 뿐만 아니라 혁신적이고 현대적인 웹 응용 프로그램 개발을 할수 있습니다. 가장 큰 특징은 웹브라우저에 상관없이 플래시, 자바, 실버라이트와 같은 설치형 애플리케이션 없이 작동이 가능하고 동영상이나 사운드를 플러그인 없이 직접 웹페이지에서 즐길수 있어서 편리하게 웹을 이용할수 있게 도와주는데요. 아직까진 우리나라에선 HTML5의 관심에 비해 활용이 많지 않지만 향후 인터넷 브라우저와 모바일 시장에서 점차적으로 HTML5로 대체되지 않을까 생각이 드네요. 오늘은 HTML5 제작에 도움이 되는 6가지의 도구를 소개해 드리겠습니다. HTML5 ..

웹디자인 초보자를 위한 무료 포토샵 템플릿 10종

웹통 디자인 창고/유용한 디자인 자료 블로그-관리자 2014. 4. 4. 11:52

홈페이지 제작에 유용한 포토샵 소스 모음 무료 홈페이지 템플릿은 처음 시작하는 웹디자이너에게 좋은 출발점이 될수 있습니다. 인터페이스, 버턴, 레이아웃, 배너 등 웹을 만들때 필요한 모든 요소가 포함되어 있어서 빠르게 사이트를 구축할수 있는데요. 요즘엔 카페xx, 고도x 같이 저렴한 가격에 홈페이지 빌더를 제공하는곳이 많아 외형만 만들어도 쉽게 자신만의 웹사이트를 제작할수 있습니다. 오늘은 색상, 폰트, 배경 등 자신이 표현하고 싶은 요소를 편집할수 있는 포토샵 PSD 웹사이트 템플릿 소스를 소개해 드리겠습니다. 완벽한 사용자 정의로 신속하고 쉽게 웹을 만들어 보세요. Free WIP Template PSD 사진, 포트폴리오, 제품소개 등 다양한 분야에서 활용할수 있는 심플한 레이아웃의 템플릿입니다. D..

스마트폰에 최적화된 반응형웹사이트 템플릿 무료 소스 모음

웹통 디자인 창고/유용한 디자인 자료 블로그-관리자 2014. 2. 14. 15:58

반응형 홈페이지 제작에 유용한 무료 템플릿 모음 요즘 웹디자이너에게 핫이슈라고 할수 있는 반응형 웹사이트는 모든 브라우져와 모바일 기기에서 자동으로 크기를 변환해주는 방식을 말합니다. 최근 스마트폰 사용자가 많아지면서 모바일 방문자 유입이 급속도록 증가함에 따라 반응형 홈페이지에 대한 관심도 날로 증가하고 있습니다. 하지만 아직까지는 미디어쿼리를 지원하지 않는 익스플로러 구버전 등 호환성에 문제가 많아 현 상황을 지켜보는 사람들도 많은데요. 윈도우 XP 업데이트 종료 이후에 구버전의 익스플로러 사용자들이 대거 8이상을 사용한다면 빠른시간안에 반응형 웹디자인이 대세가 되지 않을까 생각이 드네요. 오늘은 평면디자인, 반응형 레이아웃, JQuery 슬라이더와 같은 놀라운 기능이 포함된 반응형 웹사이트 HTML..

스마트폰에서 홈페이지를 테스트하기 위한 유용한 도구 모음

IT&COMPUTER/프로그램 블로그-관리자 2014. 1. 15. 09:51

크로스 브라우저 호환성 테스트 프로그램 소개 최근 지하철에서 사람들을 보면 스마트폰을 이용하여 게임이나 웹서핑을 즐기는 분들을 쉽게 볼수 있습니다. 10명중 9명은 스마트폰을 사용할 만큼 스마트폰는 대중화되어 이제 우리 생활에서 땔수 없는 중요한 요소중에 하나가 되었는데요. 웹통의 블로그 방문자 비중을 보면 모바일로 접속한 방문자가 전체에 30~40% 정도 유입되고 있으며 꾸준이 늘어나고 있는 추세입니다. 점차 늘어나고 있는 모바일 시장에 대비하기 위해선 사용자에게 PC와 동일한 정확한 서비스를 제공하여야 합니다. 오늘은 스마트폰에서 웹사이트가 정상적으로 작동하고 있는지 테스트할 수 있는 프로그램 몇가지를 소개해 드리겠습니다. 안드로이드, iOS, 윈도우 등 다양한 운영체계와 브라우저에서 자신의 홈페이지..

초보자도 가능한 홈페이지 제작 무료 프로그램 WEBYDO 소개

IT&COMPUTER/프로그램 블로그-관리자 2014. 1. 8. 15:26

2014년 새로운 시대를 선도하는 홈페이지 제작 도구 WEBYDO 홈페이지를 제작할수 있는 대표적인 프로그램으로 드림위버를 꼽을수 있는데요. 드림위버는 강력한 기능으로 비교적 쉽게 웹사이트를 구축할수 있지만 전문 교육기관에서 최소 3개월이상 교육을 수료하거나 많은 시간을 들여 독학으로 배워야 다룰수 있는 프로그램입니다. 그럼 꼭 HTML5, CSS3, 드림위버를 배워야 홈페이지를 만들수 있을까요? 아닙니다. 최근들어 웹기술이 더욱더 발전하면서 클릭 몇번만으로도 웹상에서 사이트를 뚝딱 만들수 있는 서비스들이 속속 등장하고 있습니다. 그중에 Webydo는 모든 기능을 브라우저를 통해 웹사이트를 구축하는 플래폼을 제공하고 무료 호스팅 서비스를 이용할수 있는 도구인데요. 디자이너는 코드를 작성하거나 개발자에 의..

무료 갤러리형 워드프레스 테마로 포토폴리오 홈페이지를 만들어보자

웹통 디자인 창고/워드프레스 자료 블로그-관리자 2014. 1. 2. 11:13

무료 포토폴리오 워드프레스 테마 22종 포트폴리오는 상대방에게 자신의 실력을 보여줄 수 있는 가장 확실한 방법중에 하나인데요. 예전에는 인쇄물로 포트폴리오를 표현하였지만 최근들어선 지속적인 업데이트와 커뮤니티가 가능한 웹상으로 포토폴리오를 많이 제작합니다. 물론 개인 또는 소규모 회사에서 홈페이지 제작은 비용면에서 많은 부담을 주는데요. 기본적인 갤러리 형태의 웹사이트만에도 50~100만원의 비용이 들어갑니다. 물론 앞으로의 유지보수 비용까지 생각한다면 쉽게 선택을 못하는게 현실인데요. 오늘은 사진, 디자인, 제품쇼케이스 등 갤러리 형태의 포트폴리오 웹사이트를 제작할수 있는 무료 워드프레스 테마를 소개해 드리겠습니다. 설치형 블로그로 잘 알려진 워드프레스는 다양한 테마를 사용하여 손쉽게 웹을 구현할수 있..

드림위버 템플릿 무료 소스로 최신 홈페이지를 제작해보자.~

웹통 디자인 창고/유용한 디자인 자료 블로그-관리자 2013. 12. 26. 15:07

웹디자이너에게 추천하는 드림위버 템플릿 무료 소스 드림위버는 초창기 매크로미디어에서 개발한 웹개발 도구입니다. 2005년에 어도비에서 인수후 매년 지속적으로 업데이트되어 현재까지 많은 웹디자이너와 개발자들이 사용하는 프로그램인데요. 하드코딩에 익숙한 개발자에겐 불필요한 코드가 생성되어 작업량만 더 늘어난다고 불평하시는 분들도 계시지만 처음 웹에 입문하거나 디자이너에겐 시간을 절약해주고 잘 알지 못하는 기능을 구현할수 있도록 도와주는 유용한 도구입니다. 오늘은 드림위버를 이용하여 좀더 수월하게 홈페이지를 제작할수 있도록 도와주는 CSS3와 HTML5를 이용한 웹 템플릿을 소개해 드리겠습니다. 새로운 언어가 익숙하지 않거나 웹을 이제 시작하는 분들에게 참고자료 또는 웹사이트 제작할때 많은 시간을 절약할수 있..

웹디자이너를 위한 종합선물세트! 포토샵 PSD 무료 디자인 모음

웹통 디자인 창고/포토샵 자료 블로그-관리자 2013. 11. 14. 11:09

홈페이지 제작에 유용한 포토샵 소스 모음 웹디자이너는 이미지, 동영상, 음성 등을 다듬어 사용자들이 쉽게 이용할수 있는 홈페이지를 만드는 직업입니다. 여러 분야의 전반적인 지식이 필요한 만큼 끊임없는 노력이 요구되는 직업인데요. 웹디자이너의 기본이 되는 스킬중에 포토샵은 디자이너의 상상력을 구체화시켜주는 도구입니다. 포토샵을 이용하여 아이콘, 인터페이스, 배경, 패턴 등 홈페이지을 구성하는 요소들을 만들수 있는데요. 모든 구성물을 웹디자이너의 손으로 제작하기엔 좀 어려움이 많으실꺼에요. 물론 홈페이지 제작 에이젼시나 기업 규묘가 크다면 이미지 또는 소스를 구입하여 사용하겠지만 프리랜서 또는 소규모 업체에선 저작권이 없는 프리소스 위주로 작업의 효율을 높일수 밖에 없습니다. 오늘은 UI키트, 아이콘, 패턴..

홈페이지 제작할때 꼭 확인해야하는 크로스 브라우저 호환성 테스트

IT&COMPUTER/프로그램 블로그-관리자 2013. 10. 30. 11:55

모든 브라우저에서 쉽게 호환성 테스트를 해보자 처음 블로그 또는 홈페이지를 만들때 가장 많이하는 실수중에 하나가 자신이 사용하는 브라우저만을 이용하여 테스트를 하는것 입니다. 홈페이지를 방문하는 사람들은 다양한 브라우저와 해상도를 사용합니다. 인터넷 익스플로러에서 잘 보이지만 구글 크롬에서는 깨져보이거나 메뉴가 엉망으로 된다면 구글 방문자는 기대할수 없는데요. 이렇게 동일한 홈페이지가 달라보이는 이유는 화면 해상도, 개인 환경설정, 브라우저의 플러그인 또는 추가 기능, 브라우저 종류에 따라 다르게 보일수 있습니다. 그럼..호환성 테스트를 하기위해 모든 브라우저를 설치해서 확인해 봐야할까요? 아닙니다. 굳이 많은 시간과 노력을 들여 노가다로 확인해볼 필요없이 BrowseEmAll를 사용해보십시오. Brow..

HTML5와 CSS3의 새로운 기능을 이용한 홈페이지 무료 템플릿 디자인 22종

웹통 디자인 창고/유용한 디자인 자료 블로그-관리자 2013. 10. 21. 14:35

HTML5를 이용한 무료 홈페이지 디자인 22종 HTML5가 등장하면서 기존 HTML에서 구현하기 힘든 몇 가지 가치있고 혁신적인 기능을 가져왔습니다. 개발자와 디자이너들은 HTML5를 새로운 기능을 이용한 실험적인 웹사이트를 지속적으로 개발하고 있는데요. 구글 크롬, 윈도우 익스플로우, 사파리 등등 선도적인 웹브라우저의 최신버전에서는 이러한 기능을 대부분 지원하고 더 발전된 기능을 추가하는 작업을 하고 있습니다. 오늘은 HTML5와 CSS3를 이용한 하이퀄리티 웹 템플릿을 소개해 드리겠습니다. 이 컬렉션은 이제 시작하는 초급 웹 디자이너 또는 개발자에게 중요한 참고자료가 될수 있으며 새로운 웹 프로젝트를 진행할때 귀중한 시간을 절약할수 있는 바탕을 만들어 드립니다. Restaurant Website T..

웹사이트 제작에 유용한 무료 웹 UI 테스트 도구 모음

IT&COMPUTER/프로그램 블로그-관리자 2013. 8. 19. 17:52

웹 사이트를 미리 테스트 할 수 있는 도구 모음 웹 사이트 제작에 가장 중요한 단계는 웹 사이트 테스트입니다. 웹 사이트 테스트는 속도 테스트, 보안 테스트, 크로스 브라우저 호환성, 접근성 테스트, 반응성 설계 시험 등과 같이 웹 사이트를 실행할때 발생되는 문제점을 필요한 시험을 통해 미리 점검하여 보완하는 것을 말합니다. 특히 사이트의 속도, 디자인, 크로스 플랫폼 테스트는 검색엔진 순위에 매우 중요한 요소중에 하나입니다. 오늘 소개해드릴 프로그램은 웹 사이트를 미리 테스트 해볼수 있는 훌륭한 도구들을 소개해 드리겠습니다. 사이트 오픈전에 꼼꼼히 테스트해보고 수정해서 보다 완벽한 웹 사이트를 구축해보세요. PageSpeed Insights 페이지 로딩 속도는 웹 사이트의 가장 중요한 요소중에 하나입니..

최근 유행하는 웹사이트, 홈페이지 포토샵 무료 템플릿 소스 모음

웹통 디자인 창고/포토샵 자료 블로그-관리자 2013. 6. 7. 15:03

현대적 디자인 감각이 돋보이는 웹 사이트 포토샵 소스 모음 PSD 웹사이트 템플릿은 개인 사이트, 포트폴리오, 비지니스 사이트를 제작할때 매우 유용한 소스입니다. 예전엔 해외 템플릿의 디자인이 국내에 맞지 않아 활용도가 많이 떨어졌는데요. 현재는 국내에서도 조금만 수정하면 멋진 홈페이지를 만들수 있을정도로 퀄리티가 높아졌습니다. 무료 홈페이지 소스는 PSD 원본으로 다운이 가능하기 때문에 원하는 디자인으로 수정이 가능합니다. 오늘 소개해드릴 웹사이트 템플릿을 통해 디자인 작업시간을 대폭 줄이고 컨텐츠에 더 많은 시간을 투자해보세요. "BiZ" Business Website PSD Templates 비즈 템플릿은 디자인 제품/서비스를 판매용 디자인 소스입니다. 깨끗하고 매끄러운 형태의 레이아웃 구조로 비지..

[ 홈페이지 무료 디자인 ] 2013년 뉴 트랜드 웹사이트 디자인 포토샵 PSD 소스 모음

웹통 디자인 창고/포토샵 자료 블로그-관리자 2013. 2. 22. 09:09

유료 디자인 빰치는 홈페이지 오픈 소스 소개 요즘엔 홈페이지 제작에 관련된 오픈소스가 많아서 디자인 작업할때 오랫동안 고민할 필요가 없습니다. 만들려는 주제에 부합되는 소스을 찾아 내부만 어느정도 뜯어고치면 만족스러운 홈페이지을 제작할 수 있는데요. 오늘은 다양한 주제에 사용할수 있는 홈페이지 무료 디자인 소스을 소개해드리겠습니다. 수정이 가능한 PSD파일로 제작되어 원하는 스타일로 조금만 수정하시면 제작기간을 대폭 줄이실수 있을꺼에요. 본문 보시기전에~ 꾹!! Restaurant Menu Free PSD Template Aman Dhingra의 레스토랑 홈페이지 디자인 소스입니다. 음식점, 요리, 레스토랑, 푸드 관련 웹사이트을 구상하신다면 유용하게 사용하실수 있는 자료입니다. 포토샵 PSD파일로 다운..

[ 웹싸이트 템플릿 소스 ] 2013년 뉴트랜드 홈페이지 템플릿 포토샵 PSD 소스

웹통 디자인 창고/포토샵 자료 블로그-관리자 2012. 11. 15. 14:02

웹싸이트 제작에 유용한 포토샵 원본 PSD 예전에 비해 해외 무료 웹싸이트 템플릿의 수준이 많이 달라 진것같습니다. 외국 특성상 인터넷 속도에 최적화에 맞추다보니 다소 심플한 느낌의 자료들이 많았는데요. 최근들어 화려하고 다양한 기능이 포함된 자료들이 많이 올라오는것 같습니다. 오늘은 그중에 한국 웹싸이트 제작에 유용하게 사용할수 있는 포토샵 소스들을 소개해 드리겠습니다. 다운방법 : 각 해당 제목을 클릭하면 상세이미지 및 다운로드가 페이지로 이동합니다. Layman Politics – News and Politics Free PSD Website Template 아마추어 정치 뉴스 커뮤니티 싸이트 템플릿입니다. 사용하기에 따라 다양한 커뮤니티 싸이트로 변형이 가능하며 깔끔한 레이아웃과 인터페이스 구조가..

간단하게 웹싸이트 또는 어플을 미리 만들어볼수 있는 무료 Mockup 툴

IT&COMPUTER/프로그램 블로그-관리자 2012. 8. 7. 10:46

9가지의 무료 와이어프레임과 맥업툴 대부분의 웹 디자이너 및 개발자 분들은 Wireframes와 mockup 어플 리케이션 사용해 보셨을꺼에요. 맥업툴은 웹 싸이트 또는 어플리케이션 제작전에 프로포타입 UI를 구성하기 위해 사용되고 있습니다. 보통 제작전에 시안이나 스토리보드을 만들어 시행 착오를 줄이고 제작기간을 단축하는데요. 이과정을 프로그램을 이용하여 만든다고 생각하시면 됩니다. 오늘은 무료로 사용할수 있는 설치형 Wireframes와 mockup 어플 리케이션을 소개해드리겠습니다. 맥업툴을 사용하여 회사에서 인정받는 사원이 되어 보세요~ 다운방법 : 각 해당 제목을 클릭후 링크된 페이지에서 다운 받으시면 됩니다.~ Pencil Project Pencil Project는 웹디자인 / 윈도우 7 Ae..

[ 무료 웹템플릿 ] 홈페이지 제작시 꼭 필요한 프리 웹템플릿 디자인 소스 모음

웹통 디자인 창고/포토샵 자료 블로그-관리자 2012. 5. 21. 11:53

하이퀄리티 무료 웹싸이트 템플릿 모음 모든 웹디자이너의 고민중에 하나가 디자인 작업시 필수 디자인요소와 레이아웃을 짜는데 많은 시간을 소요한다는 점입니다. 이럴때 고품질의 웹싸이트 템플릿이 있다면 작업속도을 비약적으로 향상시킬수있습니다. 하지만 고품질의 디자인 템플릿은 대부분 유료고 psd파일을 찾는것 자체가 힘이들수도 있습니다. 여기에 그런 고민들을 해결할 웹싸이트 템플릿 31가지을 소개해 드리겠습니다. 컨셉에 맞는 디자인을 골라 변형하여 사용하시면 시간을 절약하실수 있을꺼에요~ 다운방법 : 각 제목을 클릭하면 해당페이지의 이동합니다. 거기서 다운로드 버턴을 클릭해주세요. 보시기전에 아시죠? 손가락 꾹~ Layout Grunge para Portfolio Gratuíto 디자인 포트폴리오 싸이트에 적합..

[ 플래쉬 무료 프로그램 ] 1분만에 플래쉬를 제작할수 있는 초간단 플래쉬 무료 프로그램

웹싸이트 디자인강좌 블로그-관리자 2012. 5. 15. 15:17

1분만에 플래쉬을 제작할수 있는 프로그램 액션스크립트는 커녕 플래쉬에 플짜도 모르는 상황에서 메뉴나 배너를 제작하려면 너무 암담하실꺼에요. 특히 플래쉬 같은 경우엔 퀄리티 높은 무료소스를 구하기가 어려워서 난감하죠. 그런분들을 위해 무료 플래쉬 생성 프로그램을 소개해 드릴까합니다. 간단한 내용만 입력하면 플래쉬가 뚝딱하고 생성되서 참 편리해요. 다만 샘플 틀에 맞쳐서 제작해야 하기 때문에 변형이 어렵고 무료 버전은 플래쉬 하단에 광고 링크가 달려 있습니다. 유료로 전환하려면 29달러정도을 지불하셔야합니다. 급하게 플래쉬를 제작하거나 링크 부분이 상관없으시다면 정말 훌륭한 플래쉬 생성 싸이트입니다. Step 1 싸이트에 들어가 보시면 상단메뉴에 MENUS / TEXTS / BANNERS / BUTTONS ..

[ 포토샵 ] 활용도 100% 하이퀄리트 폴더 아이콘

웹통 디자인 창고/포토샵 자료 블로그-관리자 2012. 2. 8. 13:22

웹활용도 100% 아이콘 소스 원래 아이콘 강좌로 만들려고 했는데.. 오늘은 시간이 너무 없어서 원본소스로 포스팅합니다. 포토샵 레이어를 전부 살려놔서 좀 너저분 하실꺼에요. 각 부분에 색상만 변경하거나 부분수정이 가능한 소스라 활용도가 높습니다. 활용범위 제한은 없습니다. 마음되로 사용하셔도 되지만 다운받기 전에 댓글 적어주시면 더욱 힘이나서 많이 올리겠습니다. 다운받고 댓글 필수 !!!!!!!

홈페이지 인터페이스 정말 쉽게 만들어보자

웹싸이트 디자인강좌 블로그-관리자 2011. 12. 28. 16:53

웹통을 개설하고 첫번째 포스팅입니다.~ 저도 비록 잘하진 못하지만 이제 시작하시는 웹디분들에게 조금이나마 도움이 되고자 웹통을 만들었습니다. 대부분의 강좌는 해외 유명강좌를 번역하거나 실무에서 사용되는 유용한 팁을 소개해드리는 형식으로 포스팅할 예정입니다.~ 많은 관심 부탁드립니다.~ 웹통이 전하는 심플한 홈페이지 인터페이스 디자인 STEP 1 먼저 포토샵을 실행후 아래와 같이 설정합니다. STEP 2 배경이 되는 레이어를 선택후 더블클릭하시면 레이어 스타일이 화면에 나옵니다. 레이어 스타일 좌측에 COLOR OVERLAY 색상을 진한 갈색으로 선택해주세요 STEP 3 새로운 레이어를 만든후 상단 적당한 부분에 직사각형 박스를 만들어 줍니다. STEP 4 다시 새로운 레이어를 추가한후 원형 선택툴을 이용..

1