'웹디자인 강좌' 태그의 글 목록

웹디자인 강좌 (19)

[ 포토샵 메탈 텍스트 강좌 ] 환상적인 격자모양 메탈 재질 텍스트 만들기

포토샵&일러스트 강좌 블로그-관리자 2012. 7. 25. 10:37

환상적인 메탈 포토샵 텍스트 효과 안녕하세요. 웹통입니다. 오늘은 메탈 텍스트 제 2탄 격자무늬 메탈 포토샵 효과를 강좌하겠습니다. 이번 강좌는 재질과 스타일로 모든걸 다 표현하다보니 빠른시간안에 제작하실수 있을겁니다. 중도에 포기 마시고 끝까지 만들어보세요. 혹시 관련 소스만 필요하시다면 하단에 포토샵 소스 원본파일을 올려놓겠습니다. 다운받아서 사용하세요. 본강좌는 해외 유명싸이트를 참고하여 제작하였습니다. 원본은 따로 링크 드리겠습니다. 원본보기 준비물 하단의 재질패턴과 메인폰트를 다운받아 주세요. 링크된 싸이트는 동시에 두개의 파일을 받을수 있습니다. 다운이 완료된후 다시 다른패턴을 다운받아주세요. Font – SF Sports Night ----> 메인폰트입니다. Grungy Stripes Pat..

[ 포토샵 무료 소스 ] 유료소스 빰치는 포토샵 하이퀄리티 디자인 무료 소스

웹통 디자인 창고/포토샵 자료 블로그-관리자 2012. 7. 3. 14:01

유료소스 빰치는 포토샵 하이퀄리티 디자인 요즘 포토샵 유료소스 기본이 삼만원이 휠쩍 넘는데요. 필요한 소스만 알뜰하게 사용한다면 간혹 구매도 괜찬습니다. 하지만 디자인 작업할때 다양한 소스를 기반으로 자신이 원하는 스타일을 만들려면 한두개 가지곤 어림도 없죠.. 물론 감각이 뛰어나거나 자체적으로 엘리먼트를 제작할수도 있지만 작업시간이 배로 늘어나서 곤란한 상황이 발생하곤 합니다. 그래서 유료소스 빰치는 포토샵 무료소스를 소개해 드릴까합니다. 저작권 때문에 재배포는 안되지만 수정 및 이미지사용이 가능한 무료 소스입니다. 다운방법 : 각 제목을 클릭하면 해당페이지의 이동합니다. 거기서 다운로드 버턴을 클릭해주세요. 보시기전에 아시죠? 손가락 꾹~~ First-Aid medical kit icon 구급용 가방..

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

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

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

[ 플래쉬 무료 소스 ] 역동적인 XML 무료 플래쉬 소스 모음

웹통 디자인 창고/유용한 디자인 자료 블로그-관리자 2012. 5. 3. 10:51

역동적인 XML 무료 플래쉬 소스 파일 요즘 추세가 HTML5라고는 하지만 아직까진 홈페이지를 만들때 플래쉬는 중요한 역할을 하고 있습니다. 향후 어도비사에서도 두고만 보고있진 않을것 같습니다. 자 그럼 싸이트 제작시 유용한 무료 플래쉬 소스를 소개해드리겠습니다. 무료라 하지만 유료못지 않은 퀄리티에 놀라실꺼에요. 대표적인 것만 링크드리고 더 필요하신분은 싸이트 보시고 다운 받아주세요. 다운방법 : 해당 제목을 클릭하여 다운페이지로 이동후 하단에 있는 다운버턴을 클릭해주세요. 보시전에 아시죠? 손가락 꾹~ Black Pad 블랙패드는 아이패드나 갤럭시탭 느낌의 플래쉬 소스입니다. 100% 너비 싸이즈로 제작되어 유동적인 레이아웃이 가능하며 전체 화면 모드가 지원됩니다. 모든 페이지는 외부 xml파일에서 ..

[ 포토샵 셀프 만삭사진 ] 만삭사진 포토샵으로 완벽 보정 노하우

사진이야기/사진 촬영 강좌 블로그-관리자 2012. 4. 26. 13:08

셀프 만삭사진 보정 노하우 요즘 성장앨범 가격이 너무 올랐더군요. 저가형이 60~70인데 저같은 서민은 엄두가 나지 않습니다. 그렇다고 첫애인데 소홀하게 보낼수도 없고, 그래서 몸으로 때우는 성장앨범을 만들기로 작심했습니다..쿄쿄.. 만삭사진은 태교여행으로 가평가서 찍고 애 태어나면 셀프스튜디오 반, 직접촬영 반 으로 앨범을 제작해볼려구요. 앞으로도 꾸진히 포토샵을 이용한 성장앨범 관련 포스팅을 만들 생각입니다. 많은 관심부탁드려요 태교여행 장소 처음에는 제주도를 생각했는데 제가 운전을 못하는 관계로 중간에 포기하고 가평으로 다녀왔습니다. 첫날 제이든가든 수목원 ---> 근처펜션 ---> 다음날 남이섬 아주 간단한 계획이지만 인천에서 전철로 2시간반 걸리고 비까지 와서 힘들었네요. 그래도 태교여행&만삭사..

[ 포토샵 사진효과 ] 감성이 묻어나는 로모사진 만들기

포토샵&일러스트 강좌 블로그-관리자 2012. 4. 17. 15:13

감성이 묻어나는 로모사진 만들기 옛날에 많이 사용되었던 반자동 토이카메라로 찍은 사진을 로모그라피라고 합니다. 색상이 일반 카메라에 비해 굉장히 특이하고 렌즈 광량의 차이로 인해 바깥쪽 부분이 어두운 비네팅 효과가 나타납니다. 이번 강좌는 값비싼 토이카메라를 구입하실 수 없는 분들을 위해 포토샵으로 로모사진 효과를 낼수 있는 방법을 알려드리겠습니다. 전체 소요시간은 10분내외이니 포기하지 마시고 끝까지 한번 따라해보세요. Step 1 이번에 사용되는 이미지는 저작권 관계로 링크를 통해 다운을 받으셔야합니다. 귀찬으신 분들은 다른사진을 사용하셔도 되요. http://www.sxc.hu/photo/1150828 www.sxc.hu 싸이트는 무료이미지로 유명한 싸이트입니다. 가입만 하면 좋은 이미지를 많이 구..

[ 자바스크립트 무료 메뉴소스 ] 드롭다운 메뉴 무료로 만들어주는 프로그램 - DHTML Menu Builder Free Version-

IT&COMPUTER/프로그램 블로그-관리자 2012. 4. 13. 12:13

DHTML 메뉴 생성기 무료버전 메뉴를 만들때 플래쉬 또는 html로 제작을 많이 해보셨을꺼에요. 오늘은 DHTML을 이용한 프리 드롭다운 메뉴 빌더를 소개해드립니다. 저도 우연찬게 찾은거라 아직 응용해서 사용해보진 않았지만 정말 쉽고 빠르게 자바스크립트를 메뉴 파일이 생성 가능합니다. 정식명칭은 DHTML Menu Builder Free Version 입니다. 유용하게 사용해주세요~~ ^^ DHTML Menu Builder 설치하기 저작권 문제로 직접 홈페이지 들어가셔서 다운 받으셔야합니다. 우선 아래 주소을 클릭해주세요. http://www.dhtml-menu-builder.com/free-dhtml-menu/getkey.php 상단에 보시면 Please enter your E-MAIL일 보이실꺼에요..

[ 포토샵 텍스트 효과 ] 텍스트 배경을 이용한 포토그래피 기법

포토샵&일러스트 강좌 블로그-관리자 2012. 4. 10. 13:26

텍스트 배경으로 글자만들기 오늘은 정말 독특하고 재미있는 텍스트 효과를 알려드리겠습니다.~ 초보자도 쉽게 따라할수 있는 기법이라 쉽게 만드실수 있을꺼에요. 다만....쉽게 만들수는 있지만 노가다(?) 부분이 많아서 시간은 좀 오래 걸리실 것 같습니다. 포토샵 텍스트 효과는 광고 타이틀이나 이벤트 페이지등 다양한 부분에서 사용가능하니 배워두시면 유용하게 사용하실수 있을꺼에요~ 본강좌는 해외싸이트 강좌를 한국어로 번역하고 좀더 쉽도록 수정하였습니다. 원본보기 Step 1 포토샵 실행후 new document 을 size 1920 × 1200픽셀로로 색상은 # 242424설정하여 만들어주세요. 배경레이어를 복제하여 Filter – Artistic – Film Grain을 아래와 같은 수치로 적용합니다. 복제한..

[ 포토샵 텍스트효과 ] 깨진유리 느낌 3D텍스트 포토샵 효과

포토샵&일러스트 강좌 블로그-관리자 2012. 4. 5. 17:07

깨진유리 3D 텍스트 효과 3D효과를 이용한 깨진 유리 텍스트효과를 만드는 과정을 강좌하겠습니다. 일러스트레이터를 이용하여 3D텍스트를 만들고 포토샵으로 불러와 유리느낌이 나도록 효과를 주는 과정을 자세하게 설명하겠습니다. 소프트웨어 : 어도비 일러스트 레이터, 어도비 포토샵 Step 1 우선 일러스트를 실행시킨후 new document 을 size 2 x 2in 로 설정하여 만들어주세요. 그리고 text툴을 사용하여 아래와 같은 설정으로 "GLASS"라고 써주세요~ Step 2 텍스트를 벡터속성으로 변환해주겠습니다. Type>Create Outlines 을 이용해서 변환시켜주고 색상을 #BFBFBF로 넣어주세요. Step 3 유리깨진 모양을 만들기 위해 팬도구를 사용하여 임의의 모양을 만들어주세요. S..

[ 포토샵 타이포그래피 ] 타이포그래피 폰트 조합공식 기초강좌

웹싸이트 디자인강좌 블로그-관리자 2012. 3. 14. 13:31

타이포그래피 어떻게 만들면 될까? 여러분들도 기본적인 이론 및 실무 대한 지식이없는 경우 폰트를 결정하고 어떻게 조합해서 배열을 할지 고민을 많이 하셨을꺼에요. 지금도 저는 폰트가 디자인 과정에서 가장 어려운 부분중에 하나라고 생각합니다. 무조건 이쁜글꼴로 캔버스를 채우는것 보다 여러 폰트를 어떻게 사용하느냐에 따라 완성도에서 많은 차이가 날수 있습니다. 이제부터 초보자를 위한 타이포그래피 만드는 방법을 소개하겠습니다. "얼마나 많은 폰트를 사용해야합니까?" 창의적이지 않은 일반적인 디자인 패턴에 많을 많이 사용하는 분들께는 두개 이상의 글꼴을 권장하지 않습니다. 모든 글꼴은 사람의 성격과 유사한 성질을 지니고 있습니다. 전혀 다른 성질의 성격을 지닌 두사람이 같은 업무를 할경우 좋은 시너지효과를 낼수 ..

[ 포토샵 텍스트효과 ] 물속에 잠긴 텍스트 바위섬 만들기

포토샵&일러스트 강좌 블로그-관리자 2012. 3. 9. 19:15

환상적인 물속 텍스트 바위섬 만들기 오늘도 한껀 건진느낌입니다. 해외 유명 포토샵강좌에 신기한 효과가 있더군요. 한글로 번역해서 다시 올려드립니다. 강좌를 통해 포토샵의 다양한 필터 사용법을 얻으실수 있을꺼에요. 원본파일은 맨 하단에 링크 걸도록 하겠습니다. 레이어는 살아있지만 텍스트는 합해서 변형이 불가하세요. 그럼 이제 어메이징한 강좌를 시작해보겠습니다. 1단계 캔버스 만들기 새로운 캔버스를 만들고 해상도는 300 픽셀 캔버스 사이즈는 1450 X 650 픽셀로 설정합니다. 컬러 모드가 RGB로 해주세요~ 2단계 구름 렌더링 새 레이어를 만들고 그것을 "구름"이라고 지정합니다. 전경색을 흰색 후경색을 흑백 설정한 상태에서 Filter > Render > Clouds을 적용합니다. 구름 레이어를 클릭하..

[ 포토샵 텍스트효과 ] 메탈느낌의 고급스러운 로고만들기

포토샵&일러스트 강좌 블로그-관리자 2012. 3. 6. 13:32

메탈 텍스트 효과로 로고 만들기 오늘은 비도오고 좀 무거운 분위기의 포토샵 효과를 만들어 봤습니다. 메탈느낌의 재질에 입체감을 줘서 고급스러운 텍스트효과를 만들어 보겠습니다. 강좌를 보기 싫으신분은 하단에 포토샵 소스를 그냥 다운받아 변형하여 사용가능하십니다. 그래도... 만든사람의 성의를 생각해서 한번 따라 만들어보시면 정말 감사하겠습니다.^^ 1단계 텍스트 만들기 600x300의 캔버스를 새로 만들고 바탕이 될 배경을 지정을 합니다. 배경색상은 되도록 어두운계열로 선택하셔야 나중에 보기 좋습니다.~ 중간에 변경가능하니 원하시는 색상으로 넣어주세요. 폰트는 Philosopher을 사용했습니다. 제가 알기론 무료폰트인것같은데 쉽게 구하실수 있을꺼에요. 없으시면 얇고 뚜렷한 폰트로 지정하시면 됩니다. 글꼴..

[ 포토샵 브러쉬 ] 수준높은 디자인을 위한 포토샵 브러쉬 5종

웹통 디자인 창고/포토샵 자료 블로그-관리자 2012. 2. 28. 18:01

완성도를 높여주는 포토샵 브러쉬 5종 멋진 디자인을 한층더 돋보이게 해주는 브러쉬 10종을 소개합니다.~ 브러쉬는 디자인을 더욱더 풍성하게 할뿐아니라 작업속도를 비약적으로 단축시켜줍니다. 되도록 다양한 브러쉬를 보유하는게 작업효율을 높이는 길이라 생각이 듭니다. 이번에 소개할 브러쉬는 사이버틱한 분위기를 연출할때 유용한 브러쉬입니다. 많이 받아가세요 ^^ 다운후 댓글과 공감은 저에게 많은 힘이됩니다.~ 댓글 꼭 남겨주세요~ Abstract Butterfly Brushes Doom Abstract Brush Set 2 Abstract Bruhses 3 Abstract brush pack vol. 8 Abstract brush pack vol. 7

[ 포토 틸트쉬프트 효과] 런닝맨에서 자주사용되는 틸트쉬프트 기법

포토샵&일러스트 강좌 블로그-관리자 2012. 2. 27. 13:35

토이느낌의 틸트쉬프트 효과주기 요즘 방송에서 자주 사용되고 있는 틸트 쉬프트 효과에 대해 알아보겠습니다. 꼭 장난감 모형물 같이 보이게 만드는 효과를 틸트쉬프트라 합니다. 이효과를 줄수 있는 렌즈는 수백만원이 넘는 고가의 렌즈라 저같은 일반서민은 구경조차 할수 없는 장비죠. 하지만 굳이 고가의 장비없이도 틸트쉬프트의 효과를 낼수 있는 방법이 있습니다. 하단의 웹싸이트로 들어가시면 무료로 이미지만 있으면 틸트 쉬프트 효과를 낼수 있습니다. 자 사용방법은 간단합니다. http://labs.artandmobile.com/tiltshift 우선 틸트쉬프트 효과를 줄 이미지 한장을 준비합니다. 되도록 사람이나 자동차 사물이 많은 사진이 제대로된 효과를 보실수 있습니다. ( 상기 이미지는 카페24에서 받은 무료이미..

[ 포토샵 폰트 ] 블링블링~ 귀여운 포토샵 영문폰트 3종

웹통 디자인 창고/폰트 자료 블로그-관리자 2012. 2. 22. 09:49

이벤트 활용에 좋은 귀여운 영문 폰트 3종 오랜만에 레어아이템 건진 느낌이네요. 좀 살찐 폰트지만 활용도 높은 폰트입니다. 화이트데이 / 발렌타인데이 / 빼빼로데이 등 이벤트 디자인할때 유용한 디자인입니다. 어렵게 구한 포토샵 영문폰트 3종입니다.~ 혹시 멋지게 디자인하신 분은 이미지컷 등록해주시면 감사하겠습니다. Doughboy_Beta ■ 파일정보 - 형식 : 영문폰트 - 제작자 : A free display font by Lucas Sharp - 출처 : behance.net - 라이센스 : 무료로 사용하실수 있습니다. 단,상업적용도일 경우 제작자에게 미리 알려야합니다.(behance.net) ■ 다운로드 다운후 덧글하나가 저에겐 많은 힘이 됩니다.^^ 덧글 및 다음뷰 추천버턴 눌러주세요~ ■ 사용..

[ 포토샵 ] 자유의여신상 10초안에 사라지게 하는 기술 (CS5의 신기능)

포토샵&일러스트 강좌 블로그-관리자 2012. 2. 9. 10:10

Content-Aware Fill 기능 CS5부터 추가된 놀라운 기능중 하나인 컨텐츠 인식은 이미지안에 사물을 주변배경을 이용하여 자연스럽게 제거하는 기능입니다. 자유의 여신상 쯤은 10초안에 간단히 사라지게 하는 마술같은 기능이죠. 사용방법이 너무 간단해서 처음 포토샵을 시작하시는 분들도 쉽게 사용하실수 있습니다. 우선 작업할 자유의 여신상 사진을 불러오겠습니다. SIZE : 800 X 533 픽셀 자유의 여신상을 선택하는 방법은 팬툴/라쏘툴/마법봉 등 원하시는 스타일로 작업영역을 선택해주세요. 저는 간단하게 라쏘툴로 설정해보겠습니다. 자유의 여신상이 선택되셨으면 메뉴에서 Edit-Fill을 선택하고 Contents-use에서 Content-Aware를 선택하고 확인을 누르시면 짜잔~~ 정말 간단하게 ..

[ 포토샵 ] 메탈 텍스트 효과 소스

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

메탈느낌 텍스효과 소스 이소스는 기존에 제가 가지고 있던 파일에서 수정해서 다시 올립니다. 출처를 알수없어서 되도록 변형해서 사용해주시기 바랍니다. 원본파일이라 폰트만 변경해주시면 수정하시는데 어려움이 없으실겁니다. 다만 두꺼운 글자체로 하셔야 제대로된 효과를 보실수 있습니다. 여러분의 댓글에 웹통은 힘과 용기를 얻습니다. 되도록 추천 또는 댓글 꼭 부탁드립니다.

웹디자인에서 자주쓰이는 리본만들기 (원본소스 포함)

웹싸이트 디자인강좌 블로그-관리자 2012. 2. 7. 12:59

이번엔 사진이나 리스트노출에 자주 사용하는 리본을 만들어 보겠습니다. 이번강좌도 어김없이 해외강좌를 번역 보강하여 제공드리는점 알려드립니다. 리본 캔버스 설정 500 × 500 픽셀 캔버스을 만들어 리본을 만들어보겠습니다. 배경 텍스쳐만들기 배경텍스쳐가 되는레이어을 하나추가하여 색상을 # cccccc로 적용합니다. 이제 필터 이동> 노이즈> 노이즈 추가 를 선택후 10%의 양으로 가우시안을 설정합니다. 그리고 배경 텍스쳐의 레이어 불투명도를 15%로 변경합니다. 이부분은 완성에서 그리 중요한 내용은 아닙니다. 다만 나중에 리본위쪽으로 배치하여 질감을 줄수도 있습니다. 이미지 외각틀 만들기 이제 사진이 들어갈 부분의 형태를 만들어 보겠습니다. 캔버스의 중앙에 사각박스를 배치합니다. 사진외각을 보기좋게 효과..

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

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

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

1