당신은 주제를 찾고 있습니까 “블로그 스킨 디자인 – 🔰 홈페이지형 블로그 스킨 만들기 [좐느의 SNS 마케팅을 위한 포토샵 디자인] Photoshop 2020“? 다음 카테고리의 웹사이트 ppa.dianhac.com.vn 에서 귀하의 모든 질문에 답변해 드립니다: https://ppa.dianhac.com.vn/blog/. 바로 아래에서 답을 찾을 수 있습니다. 작성자 좐느 이(가) 작성한 기사에는 조회수 15,198회 및 좋아요 290개 개의 좋아요가 있습니다.
Table of Contents
블로그 스킨 디자인 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 🔰 홈페이지형 블로그 스킨 만들기 [좐느의 SNS 마케팅을 위한 포토샵 디자인] Photoshop 2020 – 블로그 스킨 디자인 주제에 대한 세부정보를 참조하세요
📘[좐느의 SNS 마케팅을 위한 포토샵 디자인] 온라인 서점에서 확인하세요^^ https://book.naver.com/bookdb/book_detail.nhn?bid=16320074
💗photoshop cc 2020 에서 진행된 강의입니다
💗 강의 소스 및 프로젝트 다운로드
https://drive.google.com/open?id=1Ng2W0-wspaCc1gXXjUs7n84LlZ183hwY
👍 구독+좋아요+댓글 = 더 좋은 강의 {*≧∀≦}
💗 문의사항은 댓글\u0026 [email protected] 메일로 보내주세요
💗좐느의 블로그 놀러가기~ http://hanaworks.kr/
#포토샵#블로그#sns마케팅
블로그 스킨 디자인 주제에 대한 자세한 내용은 여기를 참조하세요.
[네이버 블로그] 홈페이지형 블로그 만들기(사이즈, 디자인, 투명 …
먼저, 아래 블로그 실습 파일을 다운 받아주세요. 포토샵을 다룰 줄 안다면 블로그 스킨은 원하는 이미지로 수정하여 사용할 수 있습니다.
Source: post.naver.com
Date Published: 5/20/2021
View: 8367
주제와 관련된 이미지 블로그 스킨 디자인
주제와 관련된 더 많은 사진을 참조하십시오 🔰 홈페이지형 블로그 스킨 만들기 [좐느의 SNS 마케팅을 위한 포토샵 디자인] Photoshop 2020. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
![🔰 홈페이지형 블로그 스킨 만들기 [좐느의 SNS 마케팅을 위한 포토샵 디자인] Photoshop 2020](https://i.ytimg.com/vi/7eU5ESQa7t8/maxresdefault.jpg)
주제에 대한 기사 평가 블로그 스킨 디자인
- Author: 좐느
- Views: 조회수 15,198회
- Likes: 좋아요 290개
- Date Published: 2020. 1. 30.
- Video Url link: https://www.youtube.com/watch?v=7eU5ESQa7t8
네이버 블로그 홈페이지형 블로그 만들기 기초1편 LESSON.01 스킨 만들기 및 스킨 사이즈
반응형
이제는 흔히 볼 수 있게 된 네이버 블로그 홈페이지형을 한 번쯤 만들어 보고 싶었던 초보 블로그라면 앞으로 업로드될 쉽게 배우기 네이버 블로그 홈페이지형 블로그 만들기 1~7편을 참고해주세요. 기초 1편 LESSON.01 홈페이지형 블로그 스킨 만들기와 스킨 사이즈에 대해서 알아보도록 하겠습니다. 홈페이지형 네이버 블로그를 만들기 위해서는 스킨 디자인과 디자인한 메뉴 버튼이 필요합니다. 그럼 우선 블로그 스킨을 디자인하기 위한 사이즈부터 알아보고 만드는 방법도 같이 해보도록 하겠습니다.
네이버 블로그 홈페이지형 블로그 만들기는 영상으로도 제작되어 유튜브에서 시청할 수 있게 올려두었습니다. 영상을 보면서 부족한 부분은 앞으로 작성해서 업로드되는 포스트를 참고 부탁드립니다. 유튜브 영상 같이 첨부합니다. 구글 또는 유튜브에서 “여행하는 디자이너 트래블러”를 검색하시면 쉽게 찾을 수 있습니다.
유튜브 영상
홈페이지형 네이버 블로그 만들기
01 / 02 / 03편
영상보다 글로 보면서 작업하는 게 편하신 분들을 위해서 글로 따로 작성하게 되었습니다. 작업 화면은 캡처를 이용했기 때문에 다소 화질이 좋지 못한 점 양해 부탁드립니다. 그럼 네이버 블로그 스킨 디자인하는 방법을 알아보도록 하겠습니다.
벤치마킹(bench―marking)은 좋은 방법
이미 잘 만들어져 있는 홈페이지형 네이버 블로그를 벤치마킹하여 블로그에 필요한 스킨의 사이즈와 디자인을 선택합니다. 저의 경우 가장 기본으로 많이 사용되는 구성으로 만들어진 체코 관광청 블로그를 벤치마킹했습니다. 이와 비슷한 홈페이지형 블로그 스킨을 디자인해보겠습니다.
*참고하면 좋은 홈페이지형 블로그
– 한국관광공사 네이버 블로그 바로가기
– 체코 관광청 네이버 블로그 바로가기
– 네이버 디자인 프레스 블로그 바로가기
– 수원시 공식 네이버 블로그 바로가기
01. 내 블로그에 맞는 이미지 선택하기+고퀄리티 이미지 사이트
방법 01) 포토샵을 열어 상단 포토샵 메뉴에서 File-Open을 클릭합니다. 스킨으로 사용할 사진을 선택하여 포토샵으로 불러옵니다.
블로그의 사용목적에 따라 주제도 다르고, 그에 따른 이미지도 다를 것 같습니다. 저의 경우 여행을 주로 다루고 있는 블로그였기 때문에 여행에 관련된 이미지를 선택하게 되었습니다. 스킨에 들어가게 될 이미지는 이미지 교체가 간편하도록 이미지가 들어갈 공간을 정해두게 됩니다. 이 공간의 사이즈에 맞게 적절한 이미지를 선택한 후 사이즈 조절하는 방법입니다.
*고퀄리티의 사진을 찾으려면 본인이 가지고 있는 사진도 좋습니다. 하지만 사진의 크기가 작다면 언플래쉬 사이트에서 무료로 사진을 다운로드하여서 사용하면 좋습니다. 언플래쉬(unsplash)의 가장 큰 장점은 상업적으로도 이용이 가능하며 사진의 사이즈가 2000px을 훌쩍 넘어가는 크기라 늘리거나, 줄였을 때 이미지 깨짐이 없습니다. 다만, 불법적인 사이트에 사진을 사용할 수 없다는 점을 주의해주세요.
– 무료 이미지 언플래쉬 사이트바로가기
02. 네이버 블로그 홈페이지형 스킨 사이즈 정하기
사용할 사진을 불러왔다면 아래 방법대로 진행해주세요.
방법 1) 포토샵 상단 메뉴에서 File-New를 클릭하여 새로운 캔버스를 만들어줍니다.
방법 2) 캔버스 사이즈는 Width(가로):2000px, Height(세로) 700px로 지정합니다.
*캔버스의 사이즈는 Width(가로) 1600px~2000px까지 자유롭게 해 주시면 되는데 저는 되도록 이면 1900px이 넘도록 하는 것을 권장합니다. 이번 스킨의 가로 사이즈는 2000px로 작업하였습니다. 참고 부탁드립니다. Height(세로) 값도 디자인에 따라 다를 수 있습니다. 저의 경우 이번에 작업하는 스킨은 세로 사이즈를 700px으로 작업하였습니다.
03. 캔버스로 사진 이동하기
처음에 불러왔던 스킨 사진을 사이즈 조절한 캔버스로 옮겨보겠습니다.
방법 1) 포토샵 왼쪽 툴박스에서 Move Tool(이동 툴)을 선택합니다.
방법 2) 스킨 사진을 왼쪽 마우스를 누른 상태로 캔버스로 끌어다 놓습니다. 이때 캔버스 위로 마우스의 커서가 +로 바뀌는 걸 알 수 있습니다.
04. 캔버스 크기에 맞게 이미지 줄이고, 배치하기
캔버스에 가져온 사진을 줄이고 배치하는 방법을 알아보도록 하겠습니다. 개인적으로 사진 자체를 줄이는 방법보다 캔버스 크기를 지정하고 사진을 가져와서 쓰는 것을 선호합니다. 이유는 사진의 원하는 부분만을 배치할 수 있기 때문입니다.
방법 1) 포토샵 상단 메뉴에서 Edit(편집)-Free Transform(자유 변형) 또는 Edit-Transform-Scale를 선택합니다. 단축키로는 Ctrl+T입니다.
*Transform을 사용 시 우측 레이어에는 불러온 사진이 선택되어 있어야 합니다.
방법 2) Free Transform을 누른 후 왼쪽 모서리에는 점을 마우스로 클릭한 상태에서 키보드 Alt+Shift를 누르고 사진을 줄이거나 늘리면 깨짐 없이 정사이즈로 이미지를 줄이고 늘릴 수 있습니다.
05. 스킨 이미지 저장하기 psd
저의 경우 스킨 이미지 사이즈 조절 후 저장을 했지만, 되도록이면 처음 캔버스를 만들 때 저장을 하고 작업을 시작하는 게 좋습니다. 항상 원본 psd를 저장합니다.
방법 1) File-Save As를 누른 후 파일의 이름을 지정후 psd 저장하기
06. 스킨 이미지 저장하기 jpg
방법 1) File-Save As를 누른 후 확장자 jpg로 저장하기
위 방법과 같이 저장을 완료하면 이제 홈페이지형 블로그 상단 스킨은 완성입니다. 이 스킨은 네이버 블로그에 설정에서 스킨 배경으로 직접 등록할 예정입니다. 다음 포스트에서는 메뉴 버튼을 만들어보고 위젯을 사용해서 만들어 놓은 메뉴 버튼에 링크 거는 방법을 알아보도록 하겠습니다.
LESSON.01
네이버 블로그 홈페이지형 블로그 만들기 기초 1편
스킨 만들기 및 스킨 사이즈
네이버 블로그 예쁘게 꾸미는 법 : 레이아웃, 스킨, 타이틀
728×90
반응형
레이아웃, 스킨, 타이틀을 활용하여 네이버 블로그 예쁘게 꾸미는 법
네이버 블로그에서 레이아웃과 스킨, 타이틀을 활용하여 나의 주제와 컨셉에 맞게 예쁘게 꾸미는 방법에 대해서 알아보겠습니다. 사용자가 블로그에 접속하는 순간 가장 먼저 눈에 들어오게 되는 것은 바로 그 블로그의 디자인입니다. 블로그 디자인이 주제와 컨셉에 일치하게 잘 디자인 되어 있으면 사용자에게 신뢰감을 줄 수 있습니다. 레이아웃, 스킨, 타이틀을 활용해서 더 자세하게 알아보도록 하겠습니다.
목차
1. 블로그 레이아웃 꾸미기
1) 2단 구조
2) 3단 구조
3) 1단 구조
2. 블로그 스킨 꾸미기
3. 블로그 타이틀 꾸미기
반응형
1. 블로그 레이아웃 꾸미기
가장 먼저 블로그 레이아웃 꾸미기에 대해서 알아보겠습니다. 블로그 메인 화면에서 프로필 부분을 보면 [관리, 통계] 버튼이 있습니다. [관리] 버튼을 클릭해서 블로그 관리 화면으로 넘어갑니다.
블로그 관리 화면에서 상단에 [꾸미기 설정]을 클릭합니다.
왼족 메뉴들 중 [디자인 설정]에서 [레이아웃,위젯 설정]을 클릭합니다. [레이아웃,위젯 설정]을 클릭하면 블로그 전체 레이아웃과 위젯들을 편집할 수 있는 화면으로 넘어가게 됩니다.
위 사진이 블로그 레이아웃과 위젯을 설정하는 화면입니다. 블로그 레이아웃은 크게 3가지로 구분되어 있습니다. 왼쪽부터 살펴보면 이렇습니다.
1) 2단 구조
2) 3단 구조
3) 1단 구조
본인이 생각하는 주제와 컨셉, 그리고 선호도에 따라서 레이아웃 구조를 선택하면 됩니다. 더 정확한 비교를 위해서 각 구조들을 선택했을 때 어떤 모습인지 보여드리도록 하겠습니다.
1) 2단 구조
블로그 레이아웃 2단 구조 블로그 레이아웃 2단 구조
2단 구조는 블로그 레이아웃에서 가장 많은 분들이 쓰시는 기본 레이아웃이라고 할 수 있습니다. 왼쪽에 프로필과 카테고리, 이웃 현황 등을 보여주는 위젯 1단을 보여주고, 오른쪽 두 번째 단에 포스팅들을 보여줍니다. 개인적으로 초보 블로거 분들에게 가장 추천해드리는 레이아웃입니다.
2) 3단 구조
블로그 레이아웃 3단 구조 블로그 레이아웃 3단 구조
3단 구조 는 첫 번째 단에 프로필과 카테고리, 이웃 현황 등의 위젯이 세팅되고, 두 번째 단에 검색이나 이웃 블로거들을 보여주는 위젯, 그리고 세 번째 단에 포스팅을 보여주는 레이아웃입니다. 개인적으로는 가장 추천하지 않는 레이아웃입니다. 방문자가 보기에도 지저분해 보이고, 초보 블로거가 관리하기 매우 복잡하기 때문입니다.
3) 1단 구조
블로그 레이아웃 1단 구조 블로그 레이아웃 1단 구조
마지막으로 1단으로만 구성되어 있는 1단 구조입니다. 1단 구조에서는 프로필, 카테고리, 댓글, 이웃 블로거 등 모든 위젯들이 상단과 하단에 배치됩니다. 그리고 중앙에 포스팅 영역이 배치됩니다. 가장 단순하면서, 2단 구조와 함께 초보 블로거들이 많이 선택하는 레이아웃입니다.
그리고 1단 구조는 홈페이지형 블로그로 만들 수 있는 레이아웃이기 때문에, 기업 공식 블로그나 브랜드 블로그들의 홈페이지형 블로그 제작을 위해 많이 선택되기도 합니다.
블로그 위젯
마지막으로 레이아웃 설정 화면 오른쪽을 보면 다양한 위젯들을 활용해서 블로그를 꾸밀 수 있습니다. 지도 위젯을 넣어서 본인이 방문한 곳을 표시할 수도 있고, 서재 위젯을 넣어서 본인이 읽은 책을 책장처럼 보여줄 수 있습니다. 또한 본인만의 위젯을 만들어서 인스타그램 링크를 넣거나, 배너를 달 수도 있습니다.
2. 블로그 스킨 꾸미기
블로그 스킨을 활용해서 블로그를 내 주제와 컨셉에 맞게 꾸밀 수 있습니다. [꾸미기 설정]에서 왼쪽 메뉴들 중 가장 위쪽에 있는 [스킨] 메뉴 -> [스킨 선택]을 클릭합니다. 위 사진이 바로 [스킨 선택] 화면인데, 네이버 블로그에서 제공하는 다양한 무료 스킨들을 활용해서 본인의 블로그를 꾸밀 수 있습니다. 저 스킨들 중 [정적인 프레임] 스킨을 골라보겠습니다.
위 사진처럼 미리보기로 스킨 적용 시 변경될 블로그 디자인을 보여줍니다. 별다른 특이사항 없으면 오른쪽 위에 [바로 적용]을 클릭합니다.
그러면 이렇게 바로 블로그 스킨이 실제 내 블로그에 적용되어 디자인된 것을 확인할 수 있습니다.
3. 블로그 타이틀 꾸미기
마지막으로 블로그 상단에 있는 타이틀을 이용해서 블로그를 본인 취향에 맞게 꾸밀 수 있습니다. 블로그 타이틀을 편집하는 방법에 대해 알아보겠습니다. [꾸미기 설정] ->[디자인 설정]->[타이틀 꾸미기] 순서로 클릭해주시기 바랍니다.
[타이틀 꾸미기]로 들어가면 위 사진처럼 세부 디자인 설정에서 타이틀을 꾸미고 편집할 수 있는 화면으로 들어가게 됩니다. 화면 오른쪽에 있는 리모콘으로 타이틀 영역에 있는 항목들을 편집할 수 있습니다.리모콘 맨 윗 부분부터 차례대로 살펴보겠습니다. 타이틀 제목의 글씨체와 색, 크기를 편집할 수 있고, 타이틀 제목의 위치, 높이 및 정렬을 설정할 수 있습니다.
[디자인]에서는 타이틀 영역의 스타일, 컬러 변경, 또는 직접 제작한 타이틀 파일을 등록할 수 있습니다. 먼저 [스타일]을 보면 네이버에서 제공하는 기본 그림들로 타이틀 영역을 바꿀 수 있습니다. [컬러]는 본인 취향에 맞는 단색으로 타이틀 영역의 배경색을 바꿀 수 있습니다.마지막으로 [직접 등록]은 OCQ에서 제공하는 무료 이미지를 이용하여 타이틀 영역 배경을 변경할 수 있고, 또는 다른 디자인 툴에서 제작된 본인 블로그 브랜딩을 위한 타이틀 영역용 파일을 업로드할 수 있습니다.
여기까지 레이아웃, 스킨, 타이틀을 활용하는 방법을 알아봄으로써 블로그를 꾸미는 방법에 대해 알아봤습니다. 다들 본인만의 예쁜 네이버 블로그를 디자인 해보시길 바랍니다.
▼ (광고) 블로그하려면 노트북이나 아이패드가 필요할겁니다.
https://link.coupang.com/a/v7m5Q
https://link.coupang.com/a/v7nAE
<같이 보면 유익한 네이버 블로그 콘텐츠>
네이버 아이디와 블로그 새로 만드는 법 및 블로그 추가 개설하는 방법
네이버 블로그 주제와 컨셉을 정하는 2가지 방법(feat. 이키가이)
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
반응형
[주마의 블로그] 네이버 블로그 홈페이지형 만들기: 스킨 제작
네이버 블로그를 왜 홈페이지형 블로그 로 바꿔야 할까?
1. 한 눈에 보이는 카테고리
기존 블로그의 경우, 카테고리가 왼쪽에 글 형태로 있어 이 블로그가 어떤 콘텐츠를 가지고 있는지 한눈에 볼 수 없다. 그러나 홈페이지형 블로그는 카테고리를 최상단에 노출시킴으로서 이용자들로 하여금 원하는 콘텐츠를 쉽게 찾을 수 있도록 도와주고 클릭을 유도할 수 있다. 또한, 링크 하나를 자사 웹사이트와 연결한다면 웹사이트 방문도 자연스럽게 유도할 수 있다.
2. 차별화된 첫 인상
홈페이지형 블로그는 네이버에서 제공하는 기본형 구조를 사용하는 것이 아니라, 위젯을 다양한 방법으로 배치하여
내가 원하는 블로그 혹은 우리 기업이 추구하는 이미지를 자연스럽게 보여줄 수 있다.
(왼) 블로그 변경 전 / (오) 블로그 변경 후
네이버 블로그 홈페이지형으로 바꾸는 법
총 4단계: 1. 스킨 제작 → 2. 스킨 설정 → 3. 위젯 설치하고 크기 조정하기 → 4. 위젯에 링크 달기
* 본 포스팅에서는 스킨 제작까지만 다룰 예정입니다. 네이버 블로그 홈페이지형 만들기 STEP 2도 기대해 주세요 🙂
1. 스킨 제작
1) 네이버 블로그 홈페이지형 스킨 크기
사실 스킨만 잘 제작한다면 홈페이지형으로 위젯을 설치하고 링크다는 것은 비교적 쉬운 편이다.
포토샵이 어렵고, 스킨 디자인이 힘들다고 걱정 NO! 내 블로그 이미지와 잘 맞는 좋은 퀄리티의 사진을 활용하여 메인 이미지를 만들고, 카테고리를 연결시킬 버튼만 추가해도 문제없다.
→ 상업적 사용이 가능한 무료 이미지 다운 사이트: Pixabay https://pixabay.com/ko/
이때 중요한 것은 스킨 크기!!
가로 1,920px~2,000px
세로 700px~800px
<모인 블로그>에 설정한 스킨 크기: 1,920px * 780px
물론 모니터 해상도에 따라 달라지겠지만 대부분의 모니터 해상도 가로가 1,920px이기 때문에 가로 크기를 1,920px으로 설정했다. 그리고 세로 크기는 처음 블로그에 들어왔을 때, 하단 글이 보이지 않고 카테고리까지만 보일 수 있는 크기를 원했기 때문에 여러 크기를 조정해보았을 때, 780px이 가장 최적이라고 판단했다.
(세로가 너무 길어지면 스크롤 압박이 올 수 있으니 최적의 크기를 찾는 것이 중요하겠죠?!)
(왼) 핸드폰에서 PC버전을 설정했을 때 (오) 웹사이트 크기를 25%까지 줄였을 때 스킨이 반복되는 모습
그러나, 사실 세로 크기보다 가로 크기를 1,920px 이상으로 설정하는 것은 매우 중요하다.
그 이유는 네이버 블로그는 반응형 블로그가 아니기 때문이다.
네이버 블로그는 PC버전과 모바일 버전이 따로 있을 뿐, 각 해상도에 따라 최적화된 이미지를 제공해주지 않는다.
그래서 만약 갤럭시 탭이나 핸드폰 등의 디바이스에서 PC버전으로 블로그에 접속한다면 옆면이 짤릴 수 있고, 이미지 사이즈를 너무 작게 잡을 경우 배경 이미지가 패턴처럼 반복되어 적용된다.
그러므로 가로는 웬만하면 1,920px 이상 설정하되, 이러한 부분을 감안하여 글이나 어지러운 이미지로 꽉꽉 채우는 것이 아닌 자연스러운 이미지로 오른쪽과 왼쪽에 여백을 주는 것을 추천!
2) 홈페이지 버튼 크기
버튼은 위젯 크기에 맞춰서 제작해야 위젯에 링크를 걸어 나중에 버튼의 역할을 할 수 있게 된다.
네이버에서 지원하는 위젯 크기는 가로 170px, 세로 600px, 한 줄에 5개까지 설정 가능하다.
드래그했을 때 보이는 위젯의 모습 네이버에서 지원하는 위젯 크기
그렇다고 버튼 크기를 가로 170px으로 딱 맞게 제작하는 것 이 좋을까?
NO! 드래그했을 때, 보이는 것과 같이 위젯과 위젯 사이 중간에 비는 공간이 있다.
그래서 170픽셀에 맞춰 버튼을 따닥 따닥 붙여 제작할 경우, 저 빈 공간에 마우스를 갖다대면 링크 영역이 끊기는 불상사가 발생할 수 있다. 그래서 이러한 위젯 사이의 공간을 감안하여 아래 5개의 버튼을 만들 경우, 가로는 꼭 180px로 제작하고 세로 크기는 600px 이하 원하는 크기로 제작해주면 된다.
그렇다면, 이제 본격적으로 스킨 제작 START
초보가 홈페이지형 블로그를 제작한다는 전제 하에, 버튼은 하단에 5개를 놓고 배경은 사진으로 대신한 아주 간단한 홈페이지형 블로그 스킨을 만들어보자!
1- 먼저 포토샵에서 새로운 캔버스를 배경 사이즈와 맞게 만들어준다. (1,920px * 780px)
2- 새로운 캔버스 위에 버튼의 위치를 먼저 잡아준다.
① 사각형 도구로 사각형을 만들어준 뒤, 레이어 이름을 중간 버튼이라고 작성해줍니다.
② 모양 속성에서 사각형의 높이와 넓이를 정확하게 입력해줍니다. (180px * 130px)
③ 배경과 중간 버튼의 레이어를 동시에 선택한 후, 중간 정렬합니다.
④ 배경과 중간 버튼의 레이어를 동시에 선택한 후, 아래 정렬합니다.
⑤ 중간 버튼 레이어를 마우스 왼쪽으로 클릭하고 Ctrl+Shift+Alt를 함께 눌러 오른쪽과 왼쪽에 각각 2개씩 복사해 준뒤, 각 버튼에 레이어명을 오른쪽1,2 왼쪽 1,2로 이름을 붙여줍니다.
3- 배경을 먼저 깔아주고, 그 위에 하얀색 네모로 버튼 배경을 만들어 준다.
* 본 사진은 픽사베이에서 가져온 무료 이미지입니다. 이미지 선택 시, 가로가 긴 이미지로 선택하는 것이 크기 조정에 용이합니다.
4- 블로그 이름을 수평 문자 도구로 중간에 넣어주고, 각 버튼에 들어갈 버튼 이름을 작성해준다.
* 전 버튼에 이름을 붙인 다음, 뒤에 있는 네모 상자를 삭제했습니다. 이렇듯 자신의 블로그 컨셉에 따라 버튼을 예쁘게 꾸며주세요.
5- 스킨 제작 완료
Ctrl+Shift+Alt+S를 눌러 웹용으로 저장한다.
완성
만약 여기까지 따라왔다면, 이미 홈페이지형 블로그 제작의 40%는 완료했다고 볼 수 있다.
참 잘했어요💪
<다음 포스트>
본격적으로 스킨을 블로그에 설정하고, 위젯을 설치하고, 위젯 크기를 스킨에 맞게 조정하는 작업을 할 예정
[주마의 블로그] 네이버 블로그 홈페이지형 만들기: 스킨 설정 & 위젯 설치
네이버 홈페이지형 블로그 스킨 템플릿 #1
네이버 홈페이지형 블로그 스킨 템플릿 #1
블로그를 운영하면 글쓰는 것이 중요하지만
내 스스로의 만족을 위해,
다른 사람들의 접근성을 편하게 하기 위해,
업체의 경우엔 홍보를 위해 등의 이유로
스킨을 예쁘게 디자인해서 사용하는 분들이 많이 있죠!
블로그 활동을 하다보니 저도 다양한 템플릿으로
바꾸면서 기분전환도 하고 있는데
홈페이지처럼 꾸며두고 쓰고 싶은 분들을 위해
작게나마 공유활동을 해보려고 준비해봤어요.
네이버와 티스토리 두가지 다 맞춤형으로
만들어 꾸밀 수가 있는데 아직 티스토리는
익숙치 않아조금이나마 익숙해진
네이버 스킨 디자인부터 공유를 해볼까 해요 🙂
가장 쉽게 할 수 있는 템플릿부터 공유를 하고
점차적으로 심화된(?) 위젯이 있는 형태를
공유하고자 해서 우선 처음 가져온 디자인은
홈페이지형 스킨 베이직 버전으로 가져와봤어요.
적용된 모습부터 본 후 어떻게 사용하는지
간단하게 살펴보도록 할게요!
네이버 홈페이지형 블로그 스킨 적용모습
블로그에 입혔을 때 모습은 이렇게 되어요.
아무래도 컨텐츠들이 모여야 보기가 좋은 곳이다보니
무작정 디자인부터 해두고 시작해야지! 보다는
글을 몇개씩 써두고 내블로그 성격과 분위기에 맞게
디자인을 해서 바꾸는게 좋은 것 같아요 🙂
가장 베이직해서 쉽게 할 수 있는 템플릿인데요,
타이틀 부분에는 이미지를 넓게 깔아주고
아래 부분에 위젯 5개를 설치한 형태예요.
스킨디자인
psd 파일을 열어보시면 전체적인 디자인이
되어있는 것을 보실 수 있는데요,
들어가는 텍스트와 이미지, 그리고 메뉴명,
아이콘 등을 적절하게 바꿔 넣어주고 난 후
[파일-내보내기-웹용으로저장]을 눌러주세요.단축키는 Alt+Shift+Ctrl+S 입니다.
레이아웃 및 위젯 설정
[블로그 프로필 ‘관리’ – 꾸미기설정 – 레이아웃·위젯 설정 ]홈페이지형으로 디자인을 하게 되면
위젯을 사용해 링크를 거는 형태를 만들기 때문에
가장 기본으로 해주어야 할 것이
레이아웃 설정이에요!
제가 공유하는 템플릿들은
11번째에 있는 형태로 만들어야 적용가능해요.
11번째 레이아웃을 클릭해준 후
메뉴/타이틀 순서를 바꿔주시고
위젯을 1번부터 5번까지 만들어 위치를 잡아주면 끝!
위젯 코드는 아래의 것을 순서대로 복사해서
붙여넣기 하시면 된답니다.
[위젯 코드]투명위젯이미지 주소와 href(하이퍼링크)만 변경해서
각 위젯별로 적용 을 해주시면 됩니다.
투명위젯의 높이를 조절하고 싶다면
height 값을 조금씩 조정하셔도 되어요!
1번 위젯
2번 위젯
3번 위젯
4번 위젯
5번 위젯
세부 디자인 설정
[블로그 프로필 ‘관리’ – 꾸미기설정 – 세부디자인설정 ]스킨배경: 스킨템플릿 jpg로 저장 후 직접등록
타이틀표시: 없음(체크박스 해제)
타이틀높이: 400px
* 타이틀높이는 직접 적용해보고
적당하게 수정을 해주세요.
네이버 홈페이지형 블로그 스킨 <디자인소스>
<제작 정보>
• 사용프로그램: 포토샵
• 폰트: 나눔스퀘어
• 이미지: 언스플래쉬
포토샵은 CC로 만들어졌으며,
사용하시는 버전에 따라 지원하지 않는
부분이 있을 수 있으니 참고바랍니다.
psd는 포토샵에서 열어야 수정가능합니다.
맞춤형으로 제작하기 위해선
해당 프로그램을 가지고 계셔야 해요~
폰트는 네이버에서 제공하는
나눔스퀘어로 제작되어
해당 폰트를 다운받으신 후 파일을 열어야
폰트깨짐현상이 없습니다.
‘네이버 한글한글 아름답게’ 라는 페이지에서
다운받을 수 있으니 참고하세요!
이미지, 폰트, 프로그램 등을 사용하실 땐
라이선스를 잘 확인하신 후 사용하시기 바랍니다!
네이버 홈페이지형 블로그 스킨 템플릿 파일 다운로드
블로그스킨템플릿1(댜니).psd 4.73MB 투명위젯.png 0.00MB 템플릿1_위젯코드.txt 0.00MB
재배포 및 판매금지
copyrightⓒDYANY All rights reserved.
반응형
네이버 블로그 홈페이지형 만드는 꿀팁 – 방구석 클래스
이번 방구석 클래스에서는 네이버 블로그를 홈페이지 형 블로그로 만드는 방법을 알아볼게요. 기본적으로 네이버 블로그 사용법을 이해하고, 위젯에 대한 사용법과 간단한 웹 코드인 HTML을 배워볼 예정입니다.
예제 다운은 멤버십 회원 커뮤니티에 올린 링크에서 받으실 수 있습니다.
🚀 디자인베이스 멤버십 가입하면 다양한 고급 강좌를 보실 수 있어요 🚀
┗ https://www.youtube.com/channel/UCvYnDMeL-PFZhfIz6oc_U-Q/join
*디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.
핵심 요약
전 국민 블로그이기 때문에 기본적으로 네이버 블로그 사용법을 안다는 가정하에 시작합니다!
우리는 포토샵과 아주 간단한 HTML 코드를 이용할 거예요. 포토샵은 본인이 만들고자 하는 배너나 위젯을 디자인할 때 사용할 것이라서 사용법을 모르신다면 포토샵 기초부터 학습도 가능합니다.
HTML은 웹 코딩 입문 강좌로 배우실 수도 있지만, 이번에 사용할 코드는 아주 간단해서 충분히 따라 하실 수 있습니다.
네이버 블로그 레이아웃 수정하는 방법
프로필 옆에 관리에서 두 번째 탭 꾸미기 설정에서 디자인 설정 > 레이아웃 위젯 설정을 들어가줍니다.
네이버 블로그 위젯
네이버 블로그에는 위젯을 한 줄에 최대 5개를 넣을 수 있게 되어있습니다.
위젯에 들어갈 이미지 소스는 따로 제작을 해줍니다. 네이버 블로그에서 위젯은 가로 최대 170px, 세로 최대 600px이라는 제한이 있습니다. 170*72px로 작업 후 png로 저장을 해줍니다. 위젯을 생성하는 방법은 우측 하단에 위젯 직접 등록을 눌러줍니다. 그러면 이렇게 위젯 명과 HTML 코드를 입력하면 되는 겁니다.
해당 HTML 코드에 넣을 이미지 주소는 비공개 포스팅을 하나 한 다음에 우 클릭해서 이미지 주소 복사한 후 넣으면 됩니다.
스킨 배경 등록
포토샵에서 디자인을 해 준 다음에 위젯 외에 나머지만 출력을 해줘야 됩니다. 위젯은 클릭을 해야 하기 때문에 하나하나 따로 저장을 해야 하고, 스킨 배경은 말 그대로 배경 역할을 해야 하니까 위젯 디자인은 눈을 꺼주고 저장을 해줍니다.
꾸미기 설정에서 스킨 배경을 눌러서 직접 등록을 해줍니다.
그리고 타이틀 부분은 320px로 해주세요. Psd 상에서 500으로 잡았는데, 위젯 높이 72px인 경우 320으로 해야 딱 보기 좋게 떨어졌습니다. 만약 위젯 높이나 배경 높이를 다르게 하신다면, 이 부분의 높이는 괜찮을 때까지 조절을 해주시면 됩니다 ㅎㅎ
관리 > 꾸미기 설정 > 세부 디자인 설정으로 들어가 줍니다.
이제 다른 블로그과 차별을 줄 수 있는 홈페이지형 블로그를 아주 쉽게 만들 수 있습니다. 원활한 학습을 위해 멤버십 회원을 대상으로 자료를 제공하는 데 유튜브 멤버십 회원분들은 psd와 코드 샘플 파일을 받을 수 있습니다~!
키워드에 대한 정보 블로그 스킨 디자인
다음은 Bing에서 블로그 스킨 디자인 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.
이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!
사람들이 주제에 대해 자주 검색하는 키워드 🔰 홈페이지형 블로그 스킨 만들기 [좐느의 SNS 마케팅을 위한 포토샵 디자인] Photoshop 2020
- 좐느
- 포토샵
- 포토샵기초
- 포토샵강의
- 포토샵 강좌
- 포토샵cc
- photoshop
- 어도비
- adobe
- 프리미어강의
- 블로그
- 블로그스킨
- BLOG
- 디자인
- DESIGN
- sns 마케팅
- sns
- sns design
🔰 #홈페이지형 #블로그 #스킨 #만들기 #[좐느의 #SNS #마케팅을 #위한 #포토샵 #디자인] # #Photoshop #2020
YouTube에서 블로그 스킨 디자인 주제의 다른 동영상 보기
주제에 대한 기사를 시청해 주셔서 감사합니다 🔰 홈페이지형 블로그 스킨 만들기 [좐느의 SNS 마케팅을 위한 포토샵 디자인] Photoshop 2020 | 블로그 스킨 디자인, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.
