[블로그 설정하기] 미리캔버스, 파비콘을 이용한 티스토리 블로그 로고 아이콘 설정

안녕하세요, 도아입니다.

 

오늘 쓸 블로그 글은 첫 블로그 설정하기입니다.

 

다들 요새 블로그를 이용하여 수익 창출, 일기장, 팁 소개, 리뷰 등을 많이들 활용하시고는 하는데요,

이 블로그를 시작하기 위한 첫걸음! 바로 이 블로그를 표현하는 로고/아이콘을 미리캔버스, 파비콘을 사용하여

더 쉽고 편하고 빠르게! 그리고 예쁘게 설정하실 수 있는 방법을 알려드리고자 합니다.

 

---

1. 디자인 툴 "미리캔버스"로 로고 쉽게 만들기

---

로고를 더 예쁘게 만들고 싶으신가요?
그럼 미리캔버스를 이용하면 됩니다!
무료 애플리케이션 미리캔버스를 이용하여 로고/프로필/커버 홈까지 꾸미는 방법, 지금 안내드릴게요.

처음 티스토리 블로그를 개설하신 당신,

이름도 정하고, 쓸 내용도 이것저것 정리해 놓고, 닉네임까지 전부 정리해 놓았는데...

 

세상에, 그림의 "그" 자도 모르는데 내 블로그를 표현하는 로고, 그리고 아이콘, 예쁘게 꾸미고 싶은데 어떡하지? 싶으셨나요!

 

고민을 해결해 줄 "무료" 웹사이트인 [미리캔버스]를 이용하시면 됩니다.

 

매우 광고 같지만ㅎㅎ 광고는 절대 아니며, 사실 블로그를 저도 개설하고 꾸미는 데 있어 어떻게 할지 고민하다가 알게 된 소중한 웹사이트이고 매우 쉽게 나만의 디자인을 프로페셔널 디자이너처럼 만들어낼 수 있어 이렇게 소개하게 되었습니다.

 

∇ 무료 디자인 웹사이트 "미리캔버스"  ∇

https://www.miricanvas.com/

디자인 플랫폼 미리캔버스

 

상기 웹사이트를 통해 접속하시면 하기와 같은 화면이 뜨실 텐데요,

 

 

이 화면에서 "바로 시작하기" 버튼을 누르셔서 바로 정사각형 캔버스로 생성하시거나,

"템플릿 보러 가기"에서 내가 먼저 어떤 템플릿을 사용할지 미리 골라볼 수도 있습니다.

 

저는 여기서 바로 시작하기를 눌러 진행했습니다.

---

 

 

그럼 이렇게! 바로 시작하실 수 있도록 페이지가 준비되며

좌측에 템플릿을 설정할 수 있는 화면이 나오게 됩니다.

 

템플릿 화면에서 둘러보시다가, 원하시는 템플릿을 고르신 후 적용하시면 편집할 수 있도록 그 템플릿을 불러올 수 있습니다.

 

 

템플릿을 찾는데 스크롤하기 지겨우시다면 검색창을 이용하여 원하는 템플릿을 찾아볼 수 있어요!

 

 

예를 들어, 저희는 오늘 블로그 로고/프로필을 세팅할 거니까 로고를 찾아봐도 되겠죠?

 

여기서 원하시는 템플릿을 골라주시면 됩니다.

 

 

짜잔! 이렇게 전 예시로 저 템플릿을 선택했어요!

이제 불러온 템플릿에서 문구를 내가 원하는 대로 변경하거나, 삽입 이미지를 변경하거나, 꾸밀 수 있습니다.

 

저는 예시로 [도아 Blog] 요 문구를 이용해서 변경해 볼게요!

 

 

이렇게 한 번 폰트와 글자들을 조정해 바꿔보았습니다.

 

그 외 왼쪽 사이드바 메뉴의 요소, 텍스트 등을 사용하여 더 꾸밀 수 있으며, 배경도 추가할 수 있으니 한 번 다양한 기능을 사용해 보세요!

 

이제 이걸 저장해 줄게요.

 

 

상단 오른쪽의 다운로드 버튼을 누른 뒤, 원하시는 파일 형식을 눌러주세요.

 

저는 여기서 티스토리 블로그를 위한 파일을 만들 거기 때문에, PNG 파일로 저장해 줬어요!

원하시면 JPEG나 다른 형식의 파일로도 저장이 가능합니다.

 

 

여기서 고해상도 다운로드로 눌러주시면 이미지가 깨지지 않는 상태로 저장이 되어요 :3

---

2. 미리캔버스로 이미지 사이즈 변환하는 법

---

이제 조그만 아이콘으로 들어갈 이미지 사이즈 변환도 함께 진행해 볼게요.

 

우선 티스토리 이미지 사이즈를 알아보겠습니다!

 

티스토리 메인 썸네일의 경우 비교적 큰 이미지를 올릴 수 있고,

아이콘은 32x32 혹은 64x64,

파비콘은 파비콘을 이용하여 생성된 ico 이미지를 올릴 수 있어요.

 

 

그래서 저희는 이 아이콘을 우선 미리캔버스를 통해서 사이즈 조정을 해볼게요!

 

앞서 미리캔버스에서 저장했던 이미지 파일을 미리캔버스 내에서 알아보기 쉽도록 제목도 수정해 줄게요.

 

 

이 상태에서 다시 미리캔버스 - 나의 워크스페이스로 돌아가주세요.

 

 

그럼 이렇게 [내 디자인] -> 내가 만든 디자인이 나열되는데요, 여기서 블로그 로고 요 친구를 복사해 줄 겁니다.

 

 

요기 보이시는 세 개의 점을 클릭해 주시면 됩니다.

그 뒤, 이런 화면이 보이실 거예요.

 

 

이 화면에서 [사본 만들기]를 눌러 복사해 주세요!

 

 

그럼 요렇게 두 개가 생기게 됩니다.

 

이 복사본을 눌러 들어가 주세요!

 

 

그리고 왼쪽 맨 위의 세 줄을 누르시면 저렇게 제목-복사본 밑에 [1080px X 1080px] > 이렇게 써져 있을 거예요!

저걸 누르시거나,

오른쪽 위의 크기 조정 버튼을 눌러서 크기 변경을 진행해 주시면 됩니다.

 

저희는 티스토리에 쓸 64px X 64px로 변경을 진행해 줄 거예요.

 

 

직접 입력 > 잠금 버튼 클릭(비율 잠금, 선택 옵션) > 숫자 수정

 

 

위의 화면처럼 수정하셨다면, 적용하기를 누른 후 위에 저장했던 방법과 같이 저장해 주시면 됩니다.

---

3. 파비콘 ico 파일로 변환하기

---

이제 파비콘으로 ico 형식의 파일을 만들어 줄 거예요.

 

어디서 만드느냐! 바로 파비콘 이미지 파일 변환 사이트입니다.

 

▽ 파비콘 이미지 파일 변환 사이트 ▽

https://www.favicon-generator.org/

Favicon & App Icon Generator

 

여기에 먼저 들어가시면, 이런 창이 있을 거예요.

 

 

여기서 [파일 선택]으로 맨 처음에 저장해 주었던 고화질 로고 이미지를 선택해 주신 후,

[Create Favicon] 버튼을 눌러 변환해 주시면 됩니다.

 

그러면 이렇게 이미지가 뜰 거예요.

 

 

[Download the generated favicon]이라고 써져 있는 파란 글씨를 클릭해 주시면,

압축 폴더가 하나 다운로드하여집니다.

 

이 압축 파일을 푼 뒤, 따로 저장해 주세요!

---

4. 티스토리 내 로고/아이콘 설정

---

 

이제 저장한 이미지들을 설정하러 가볼까요?

 

티스토리 이미지의 경우 블로그 설정에서 맨 하단 [관리 - 블로그] 탭에서 설정하실 수 있어요.

 

 

이제 여기서 보이는 블로그 설정 메뉴에서, 이미지를 설정하실 수 있습니다.

 

 

상기 이미지의 플러스(+) 버튼을 누른 후 맨 처음 저장해 주셨던 고화질 이미지를 넣어주세요.

 

 

여기 아이콘에는 64x64로 저장했던 파일을,

파비콘에는 아까 저장해서 압축 해제 했던 폴더 내 ico 형식의 파일을 불러와 주신 후 저장해 주시면 됩니다.

 

참 쉽죠!

 

이제 여러분들도 예쁜 로고/아이콘 쉽게 생성하셔서 블로그를 예쁘게 설정해 보세요 :3

 

궁금하신 점은 언제나 댓글로 물어보셔도 됩니다!

 

그럼 이만 :3