"웹디자인 & 포토샵"
250
-
[비공개] 장면 생성기(Scene Generator)
장면 생성기를 이용하면 나만의 사진을 만들 수 있습니다. 무료 버전의 포토샵 파일을 내려받아 원하는 아이템을 배치해 만들 수 있고 온라인으로 만들 수도 있습니다.Black + Gold Stationary Mock-UpI Am Creator Free VersionCreative Scene Generator FreeIso. Art Scene Generator FreeFancy Items Scene Generator Demo온라인 사이트http://www.immagipic.com/포토샵이 없더라도 온라인으로 만들 수 있습니다. 위데모 버전의 풀버전을 구매해 만들 수도 있습니다.좌측에서 카테고리를 선택하면 여러 가지 아이템이 나오고 선택하면 이미지가 나타납니다. 벽부터 시작해 책상, 기타 아이템 순으로 배치하면 되고 깊이를 조절하려면 좌측 상단의 화살표 아이콘을 클릭합니다. 다 만들어지면 우측 상단의 버튼을 클릭하면 png 파일로 내려받을 수 있습니다.대충 만든 이미지입니다. 책상 위에 놓여진 이미..추천 -
[비공개] 부트스트랩 테마 6종
부트스트랩 템플릿 6종입니다. 이전의 템플릿보다는 퀄리티가 좀 나은 것 같습니다. 부트스트랩에서 테마란 디자인의 변경을 위한 CSS 파일을 말하는데 우리나라에서는 템플릿을 테마로 부르고 있더군요. 이 테마의 변경만으로 간단하게 디자인이 변경됩니다. 이미 만들어진 부트스트랩 사이트를위한파일은 정식으로 말하자면 템플릿으로 해야 합니다.일부는다운로드 하려면SNS에 공유해야 합니다. Seven - HTML Single Page Creative Portofolio Template 다운로드 사이트 데모 사이트 Pluton - Free Single Page Bootstrap Html Template 다운로드 사이트 데모 사이트 Smak - Free HTML single page template 다운로드 사이트 데모 사이트 Momentio - Free HTML Single Page Web Theme 다운로드 사이트 데모 사이트 “Boxify” HTML5/CSS3 Template for Codrops! 다운로드 사이트 데모 사이트 Brandy – Fr..추천 -
[비공개] 나눔 바른 고딕체 웹폰트로 사용하기
나눔체 중 바른 고딕이 구글에 웹폰트로 등록돼있지 않아 웹폰트로 변환했습니다. 바른 고딕은 4종입니다. 본고딕과 아주 흡사합니다. NanumBarunGothicBold.zip NanumBarunGothicLight.zip NanumBarunGothicRegular.zip NanumBarunGothicUltraLight.zip구글 드라이브구글 드라이브에 파일을 업로드 했으니 스타일시트에 아래처럼 사용할 수도 있습니다. 경로가 길어서 구글의 URL 단축기(Shortner)를 사용해봤지만 적용이 안됩니다. 서버에 설치하면 보다 짧아지겠는데 제 서버는 트래픽 제한이 있어서 많은 링크가 있을 경우 감당하지 못할 것 같습니다.@import url("https://googledrive.com/host/0BxmAw3HA4YGCflZpYWI1M3BIYUI2Zm9CUDhKaXVqZGFYV29CQ05xN2pKTlo5YjVWUkJPeWs/nanum-barun-gothic-bold.css");@import url("https://googledrive.com/host/0BxmAw3HA4YGCfkJWdlpTdWd6NndmT3BZaXR5ek1oSTBsYVotUmJuQWtKSnV2QVJXa3g4dn/nanum-barun-gothic-light.css");@import url("https://goo..추천 -
[비공개] 서울시체를 웹폰트로 사용하기 - 전체 서체 업데이트
무료 폰트인 서울시체를 웹폰트로 사용하기 위해 몇년 전부터 구글에 연락을 했지만 서울시로부터 폰트만 받고 웹폰트 작업은 이뤄지고 있지 않고 있습니다. 그래서 어쩔 수 없이 웹폰트로 만들어봤습니다. 한글 폰트를 웹폰트로 사용하기란 참 어렵죠. 영문 폰트와는 달리 글자 수도 많아서 개인이 만들기는 거의 불가능하죠. 그나마 무료로 공개된 폰트는 제한이 많습니다. 상업용으로 사용할 수 없다는 것이죠. 네이버에서 무료로 공개된 폰트 목록을 보면 왜 무료로 공개했는지 의심스러울 정도의 제한입니다. 비영리 목적으로 사용하라는데 웹사이트가 대부분이 영리를 목적으로 하는 것이므로 일반 웹사이트에서는 사용할 수 없죠.웹폰트 만드는 방법은 파일 용량을 줄이고 여러 형태의 확장자를 가진 폰트 파일로 만드는 과정을 거쳐야 하는데 ..추천 -
[비공개] 부트스트랩 무료 테마 12선
부트스트랩 템플릿12종입니다. 일부 템플릿은 자바스크립트 에러 메시지가 나오고구글 맵이 나타나지 않습니다. 위 코드에서key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc& 부분을 제거하고 저장하면 됩니다.Barrier- a business template다운로드 사이트 데모 사이트Blue OnePage HTML5 Business Template다운로드 사이트데모 사이트 없음Bondy — Free Multipurpose Bootstrap 3 One Page다운로드 페이지 데모 사이트Oleose — Eye Catching Mobile App Landing Page다운로드 페이지 데모 사이트SevenApp — Free Beautiful Mobile App Landing Page다운로드 페이지 데모 사이트Brandi HTML5 Bootstraped Business Template다운로드 페이지 데모 사이트 없음Small-apps-onepage-html5-app-landing-page다운로드 페이지 데모 사이트 없음Butterfly – Free Bootstrap Theme다운로드 페이지 데모사이트Cyprass – Html5 responsive business template다운로드 페이지 데모 ..추천 -
[비공개] 마이크로소프트의 새로운 텍스트 에디터 - 비주얼 스튜디오 코드(Vis..
어도비가 텍스트 에디터인 브라켓(Brackets)을 내놓더니 마이크로소프트(Microsoft)에서도 텍스트 에디터를 출시했습니다. 어도비는 기본적으로 IDE 급에 해당하는 WYSWIG편집기인 드림위버(Dreamweaver)를 갖고 있는데 반해 MS는 기본적인 편집기가 메모장 또는 노트패트 정도 밖에 없었습니다. 하지만 전문적인 편집기에 해당하는 비주얼 스튜디오가 있습니다. 이들 두 가지 프로그램은 무겁고 유료이며 러닝커브(Learning Curve: 프로그램을 사용하기 위해 배우는데 걸리는 시간)가 상당합니다. 코드를 작성하기 위해 해당 프로그램을 사용하는 방법을 배워야 하죠. 하지만 텍스트 편집기는 기본적인 사용법만 알아도 바로 코드를 작성할 수 있습니다. 이들 거대 회사들이 텍스트 편집기의 중요성을 알게 된 것 같습니다. https://code.visualstudio.com/ 공식 명칭이 비주얼..추천 -
[비공개] 이제는 SVG 시대
웹사이트에서 아이콘은 주로 이미지를 사용해왔습니다. 몇 해전에 폰트 아이콘이 등장하면서 이미지 아이콘이 사라지는 듯 싶더니 다시 이미지로 전환되고 있는 추세입니다. 이미지도 그냥 이미지가 아닌 SVG 이미지입니다. 폰트 아이콘은 폰트로서의 기능을 그대로 구현합니다. 즉 색상이나 크기 변경이 가능한 것이죠. 아무리 크게 해도 흐려지거나 깨지는 일이 없습니다. 가장 큰 단점은 하나의 아이콘으로 다양한 색상을 만들 수 없다는 것입니다. 한가지 색으로만 아이콘이 만들어지는 것이죠. SVG는 Scalable Vector Graphics의 첫 글자로 크기 변경이 가능한 벡터 이미지를 의미합니다. 벡터는 그래픽 디자인에서 크기가 변경되면 수학적 계산에 의해 이미지를 재생성하는 역할을 합니다. 보통의 이미지는 크기가 늘어나면 이미지가 재생성 되는 것이 아..추천 -
[비공개] 폰트 이야기 - 명조체? 또는 고딕체?
우리가 사는 세상은 폰트와 관련하여 두가지 미디어로 분류됩니다. 하나는 인쇄물을 통한 미디어이고 다른 하나는 웹을 통한 미디어입니다. 인쇄물을 통한 미디어는 주로 명조체를 사용하고 웹에서는 고딕체를 사용합니다. 다 이유가 있더군요. 우선 폰트를 구분하는 명조체와 고딕체, 이에 더하여 자유체에 대해 알아보겠습니다. 폰트와 관련하여 동일한 의미의 많은 용어가 있습니다. 폰트는 영어이고 한글로는 가장 많이 사용하는 것이 한글인 "글꼴"이 있고 한문으로는 "서체(書體)"가 있으며 영어를 많이 사용하다보니 글꼴이라는 순수 한글로 사용하는 이도 많습니다. 제 경우는 폰트라는 단어가 익숙하기 때문에 책에서도 폰트라는 단어를 사용하지만 출판사에서 리뷰할 때는 글꼴로 전환하려고 해서 의견 충돌이 자주 있습니다. 제 경우는 순수 ..추천 -
[비공개] 나눔 바른펜 웹폰트 사용하기
나눔 바른펜은 네이버에서 만든 폰트 시리즈 중 하나로 정직하게 꾹꾹 눌러 쓴 듯한 손글씨체로 고딕체를 바탕으로 하여 담백하고 절제된 느낌이라고 합니다. 구글 웹폰트에 이미 여러 가지가 업로드 돼있지만 나눔 바른펜은 없어서 웹폰트로 변환했습니다. 나눔펜은 R(Regular)과 B(Bold) 버전이 있습니다. 두가지 모두 작은 글자라도 손글씨 치고는 바른 글자라서 가독성이 좋습니다. 감성이 필요한 블로그 글에 사용하면 좋을 듯 합니다. Nanum-barun-pen.zip @import url("https://googledrive.com/host/0BxmAw3HA4YGCfkpJRUw0RGNraDFnVzRFdjhaQnRFQ3BzZ00tRFZobGlKcmprb1hiSUFvZkE/nanumbarunpenr.css");@import url("https://googledrive.com/host/0BxmAw3HA4YGCfnE1U2tYVjN2UkVLWnEzaVdsWDRUZ3VFbmpJckF3UG56WkpLSUxKMXFaTlU/nanumbarunpenb.css"); 구글 드라이브에 파일을 업로드 했으니 스타일시트에 위처럼 사용할 수도 있습니다. 경로가 ..추천 -
[비공개] 제주서체 웹폰트 사용하기
국내 무료 폰트 중 수정이 자유롭고 배포가 가능한 폰트를 대상으로 웹폰트로 변환해 공유하는 작업을 계속 하고 있습니다. 이런 작업을 포털에서 작업해 서버에 저장하고 링크만 공유할 수 있도록하면 좋을텐데 개인이 해야하는 상황입니다. 구글에서는 유료 폰트라도 자체적으로 구매해서 누구나 사용할 수 있도록 하고 무료 폰트의 경우 요청을 하면 웹폰트로 등록해 쉽게 사용할 수 있도록 하고 있습니다. 한글 폰트는 용량이 커서 웹폰트로 사용하기 어렵지만 가장 많이 사용하는 글자인 2350 개로 줄여서 새로 만들면 아주 많이 줄어듭니다. 제주서체 안내 바로가기 제주서체는 제주특별자치도의 상징성과 문화적 고유성을 살리고 국제도시로서 디자인적 예술적 품격을 갖춘 문화예술의 이미지를 담은 미래 지향적 서체 개발을 통해 도민 및 국..추천
1510개
1035342개
711560개
