저는 원래 블로그 포스팅 시에 썸네일을 별도로 제작하진 않았었는데요. 지난 비슷한 글에도 남겼었지만 텍스트를 씌운 이미지보다 그냥 텍스트가 없는 연관된 이미지를 썸네일 대표 이미지로 사용하는 편이었습니다.
하지만 실제로 포스팅을 해보고 다음 검색으로 찾아보면 대부분 내가 원했던 대표 이미지가 나오지 않고 엉뚱한 이미지가 나와서 지난 수개월 동안 의아해했었습니다. 하지만 이걸 다음 검색 측의 버그라고 생각했었고 언젠가 고쳐지겠지라고 막연하게 생각을 했었거든요. ( 대체 왜 내가 설정한 대표 이미지가 안나오는거냐구.... )
근데 최근 다음 검색에서 썸네일(대표이미지)이 누락되서 고객센터에 문의를 남겼더니 다음 검색에서는 티스토리에서 선택한 대표 이미지를 검색대에 보여주는 것이 아니라 복잡한 여러가지 로직을 통해서 다음 로직에 의해 선택된 썸네일을 보여준다고 합니다.
완전 이건 뭥미(?) 라는 생각이 들었던 거죠. 그래서 다음 포스팅부터는 블로그 썸네일을 만들어서 사용하려고 합니다. 아마도 다음에서는 1:1 비율로 썸네일로 사용하기 좋은 이미지를 판독하여 검색대에 대표 이미지를 띄워준다는 합리적인 생각이 들었습니다. ( 이제서야... )
구글이야 검색대에서 썸네일 노출을 하지 않기에 별로 상관이 없지만 다음 같은 경우 적절한 이미지의 썸네일을 사용해야만 노출 대비 클릭율이 높아질것이 자명하기 때문입니다. 제가 티스토리 블로그 썸네일 이미지 만드는 방법은 총 세가지 방법을 알아보도록 하겠습니다.
1. 프로그램 설치 없이 그림판으로 만드는 방법
2. 무료 포토샾 사이트인 픽슬러( pixlr )를 이용한 방법
3. 포토스케이프라는 무료 설치 프로그램을 이용한 방법입니다.
우선 세가지 다 먼저 배경 이미지로 쓸만한 놈을 구하는 것이 먼저입니다. 이번 포스팅에서는 아래의 티스토리 이미지를 사용해보도록 하겠습니다.
블로그 썸네일 이미지 만들기 사전 준비물 : 썸네일에 사용할 배경 이미지 한장. 물론 배경 이미지 없이 단색으로 채운다거나 할 수 있지만 추천되지 않겠죠? 원하는 방법을 확인해보도록 합시다.
목차
1. 블로그 썸네일 그림판으로 만드는 방법
그림판을 이용하면 아무런 준비 없이 가장 빠르고 편하게 만들어낼 수 있다는 장점이 있습니다. 하지만 여러 효과를 줄수 없으니 아무래도 퀄리티가 좀 부족하겠죠. 제한적으로 만들 수 밖에 없지만...
아주 간단하니까 하나씩 따라가봅시다.
1.1 그림판으로 배경 이미지를 연 뒤 크기를 250 * 250 으로 맞춘다.
가로, 세로를 250씩으로 맞추되, 비율이 맞지 않는 경우 '가로 세로 비율 유지'를 해제한 뒤에 다시 250, 250으로 변경하여 맞춰준다.
이 해상도의 크기는 꼭 250이 아니라 300, 400 원하는 수준으로 맞춰도 됩니다. 단지 1:1 비율로 맞추는 것이 썸네일에서 안잘리는 방법이기 때문입니다.
1.2 테두리 만들기
1-2) 직사각형 도형 추가 버튼을 누른 뒤 직사각형을 그린 다음 직사각형 마우스 우클릭하여 윤곽선 - 윤곽선 없음을 선택하여 도형 윤곽선을 없애줍니다.
1.3 썸네일 마커 처리
1-3) 또 우클릭 후 혹은 도구 메뉴에서 채우기 - 마커를 선택해줍시다.
1.4 마커위에 텍스트 삽입
1-4) 도구에서 '텍스트 삽입' 버튼을 눌러 적당히 폰트를 넣습니다. 글씨 크기와 컬러를 배경색과 대비하여 잘 보이도록 넣어주면 됩니다.
1.5 완성 이미지를 블로그에 업로드
1-5) 완성된 블로그 썸네일 이미지를 블로그에 업로드 한다.
허접하나마 블로그 썸네일 이미지를 그림판으로 만들어봤습니다. 그림판이라서 허접하다기보다 제가 감각이 떨어져서 그렇지 생각보다 그럴듯 하게 만들수 있습니다.
1순위로 뽑은 것은 어느 윈도우 PC에나 있는 프로그램이며 방법 또한 간단하고 금방 끝나기 때문입니다. 그리고 이정도 효과만으로도 충분히 썸네일로는 충분하지 않을까 생각이 되어 1순위로 꼽습니다.
2. 픽슬러(pixlr)로 블로그 썸네일 이미지 만들기
두번째 방법은 누구나 사용하는 브라우저에서 무료 포토샵 사이트에 접속해서 만들어내는 방법입니다. 이 방법도 별도로 어떤 프로그램을 설치하지 않아도 되고, 무료이기 때문에 좋습니다. 그리고 무료 포토샵을 지향하는 만큼 그림판보다 이미지를 더 많이 꾸밀 수 있다는 장점이 있습니다.
그럼 시작해볼까요?
2.1 플래시 허용 처리
2-1) 브라우저 설정에서 픽슬러 사이트 플래시 사용 권한 허용으로 변경!
하지만 처음 접속하는 PC의 경우 플래시를 사용할수 없도록 브라우저에서 막기 때문에 브라우저에서 픽슬러 사이트에 플래시 사용 권한을 허용으로 변경해줘야 합니다. 크롬 기준으로 설명하겠습니다.
가. 사이트 설정을 엽니다.
나. Flash 설정 부분을 '허용' 으로 바꿔줍니다.
다. 다시 픽슬러 pixlr 사이트에서 새로고침을 하게 되면 정상적으로 나오게 됩니다.
2.2 썸네일로 사용할 이미지 불러오기
2-2) 픽슬러(pixlr) 사이트에 접속한 뒤 배경 이미지를 불러온다.
https://pixlr.com/editor/ 사이트 접속!
CREATE A NEW IMAGE는 아무것도 없이 이미지를 새로 만들거나 클립보드 즉 Ctrl + C로 이미지를 복사해두었다면 이 메뉴에서 불러와서 올려놓을 수 있습니다. 그리고 선택해야 할 OPEN IMAGE FROM COMPUTER는 컴퓨터에 이미지 파일이 저장되어있는 경우입니다. 마지막으로 "OPEN IMAGE FROM URL"은 이미지 파일의 URL 주소가 있는 경우 URL에서 불러올 수 있는 메뉴입니다. 상황에 따라서 적절하게 사용하면 될듯 합니다. 이번 포스팅에서는 PC에 저장되어있으므로 두번째 메뉴를 사용해서 열도록 하겠습니다.
2.3 이미지 사이즈 변경
2-3) 사이즈를 250 * 250으로 변경해준다.
상단 이미지 - 이미지 사이즈 메뉴를 선택 한 뒤 250 * 250으로 입력해주어 1:1 비율로 맞춘 뒤에 OK를 눌러줍니다.
constrain proportions는 비율 제한이므로 체크 해제 후에 OK를 눌러줍시다.
2.4 가우시안 필터 효과 추가
2-4) 필터 - 가우시안 필터 효과를 줍니다.
갑자기 한글판으로 바꾸었는데 "언어 - 한국어" 를 선택하시면 한국어 버전으로 사용하실 수 있습니다. 가우시안 흐림효과는 이미지를 보시고 적당히 선택해서 넣어주시면 될 것 같습니다. 전 기본 선택 값인 50으로 진행하겠습니다.
2.5 글자 박스 만들기
2-5) 반투명 글자 박스 만들기
흔히들 썸네일을 만들때 반투명 글자 박스를 넣고 거기에 글자가 잘 보이도록 포스팅 제목을 넣는데요. 여기서 조금만 집중하고 봐주세요~ 찬찬히 보면 어렵지 않습니다. 따라만 하면 되요.
제가 1~4번 순서로 써놓은대로 클릭하거나 조절만 하면 됩니다. 1번 모양 버튼을 눌러서 새 레이어를 추가하세요. 2번 도형 추가 버튼을 누르세요~ 3번. 추가할 도형의 투명도를 조절하세요. 4번. 도형 크기를 적당히 그리세요. 어떤가요? 이제 그럴듯 해지지 않았나요?
2.6 썸네일 글자 넣기
2-6) 썸네일에 글자를 새겨봅시다.
'A' 모양의 텍스트 입력 버튼을 누른 뒤 그림에서 좌클릭을 하게 되면 글자를 입력 할 수 있는데요. 여기서 글자를 입력 한 뒤 크기, 스타일, 색을 적당히 조절해서 넣어줍니다. 역시 저는 감각이 똥이라서 이쁘게 뽑아내질 못하는 것 같습니다.
2.7 만들어진 사진 저장
2-7) "편집 - 저장"을 누른 뒤 적당한 경로에 사진을 저장해준다.
적당한 이름과 적당한 경로를 찾아서 저장해주시면 됩니다.
2-8) 이제 저장된 사진을 불러와서 상태를 봅시다.
음... 제가 못만들어서 그렇지 그림판보다는 좀 더 나은 결과물이 나올 것이라 예상 됩니다. 이것 외에도 포토샵의 이것저것 기능들을 넣을 수가 있으니 당연히 더 고퀄의 썸네일 만들기가 가능할 것이라고 생각되기도 하고요. 단지 웹사이트이기도 하고 플래시를 사용해야 하기도 하니까 그림판보다는 다소 불편 할수는 있습니다. 이것도 익숙해지면 만드는 건 아주 순식간일 듯 합니다.
3. 블로그 썸네일 포토스케이프로 만들기
세번째로 추천할만한 프로그램은 대망의 포토스케이프입니다. 설치형이기 때문에 병적으로 내 윈도우에 무언가를 설치하는 것을 싫어하는 사람들에겐 맞지 않습니다. 대신 설치형이기 때문에 기능도 많고 빠릅니다. 하지만 픽슬러(pixlr) 처럼 포토샵을 표방하는게 아니기 때문에 레이어 개념이 없어 레이어 단위의 작업이 되지 않아 반복적인 작업에는 적당하지가 않습니다.재활용 안됨.
자, 그럼 포토스케이프로 블로그 썸네일 만들기 시작해보겠습니다.
혹시 포토스케이프가 없다구요?
공식 홈페이지에서 다운로드 해줍시다.
http://photoscape.co.kr/ps/main/download.php
포토스케이프 (PhotoScape) : 재미있는 사진편집 프로그램
뽀샤시, 뽀샵, 사진편집기, 사진편집 프로그램 소프트웨어, 사진편집, 세피아 다운로드 포토스케이프(PhotoScape)는 디카와 폰카 사진을 쉽게 향상,보정,편집하는 "재미있는 사진편집 프로그램" 입니다. 아래의 다운로드 버튼을 눌러 설치파일을 다운로드 받은 후 실행하면 가장 최신의 포토스케이프가 자동 설치됩니다. 포토스케이프는 윈도우 XP, Vista, 7, 8, 10, 2000, NT 에서 동작합니다. 윈도우 98, Me 사용자는 포토스케이프 3.4
photoscape.co.kr
설치가 되었다면 이제 시작해줍시다.
3-1 ) '사진편집'에서 원하는 이미지를 불러온 뒤 크기 조절을 해줍니다.
여기서도 크기 조절을 하면서 가로:세로 비율 유지를 체크해제 해준 뒤에 확인을 눌러줍니다.
3-2) 반투명의 글자 박스를 그려줍시다.
1. 개체를 누른 다음 2. 채워진 도형을 선택합니다. 3. 투명도를 낮춘 다음에 4. 그림에 네모 글자 박스를 그려줍시다. 어떤가요? 이제 모양이 좀 채워져서 그럴듯 해졌군요. 이제 마지막으로 글자를 넣어봅시다.
3-3) 글자 박스 위에 글자를 넣는다.
자, 이제 다 왔습니다. 'T'자 모양의 텍스트 입력 버튼을 눌러 텍스트를 넣어줍니다. 글꼴, 크기, 컬러 굵기 등을 조절해서 적당한 글자를 넣어줍시다. 같은 작업을 세번이나 하는데 역시 감각이 늘지를 않네요. 저장을 해도 되지만 Ctrl+C로 이미지를 전체 선택하여 복사해서 붙여넣기도 됩니다.
세번째 작업이라 그런가 아님 설치형 프로그램의 힘인지 포토스케이프로 만든 결과가 제 마음에는 가장 드는 것 같습니다. 이제 앞으로는 썸네일을 만들어서 포스팅을 하려고 합니다. 저는 1,2,3 상황에 맞게 골고루 선택해서 쓰지 않을까 개인적인 생각이 듭니다. 여러분도 썸네일 뭘로 만들까 , 또 어떤 방법으로 만들지 궁금할 수 있는데 자신의 상황과 취향, 입맛에 맞는 방법을 선택해서 만드시길 바라겠습니다.
여기까지 블로그 썸네일 만들기(티스토리) 정리가 끝났습니다. 감사합니다.
이렇게 하시고 다음에서 썸네일이 만들어진게 안뜬다라고 하실수도 있겠는데요. 다음에서는 현재 대표이미지로 설정된 이미지를 보여주는게 아니라 자체적으로 포스팅을 분석하여 적당한 이미지를 대표로 보여주게끔 되어있다고 하니 참고하시기 바랍니다.
'blog' 카테고리의 다른 글
| 티스토리에서 애드센스 AMP 자동 광고 설정은 아무 의미가 없다. (12) | 2020.04.21 |
|---|---|
| 티스토리 블로그 다음 검색 누락 확인 방법 (11) | 2020.04.16 |
| 내 블로그에 이유없이 스크롤이 생긴다. 구글 번역 기능 때문에? (3) | 2020.03.22 |
| 애드센스 수익 이름(명의자) 달라도 지급 가능하네요. (16) | 2020.03.01 |
| 티스토리 모든 글 목록 만들기 / 가져오기( from 다음) (4) | 2020.02.11 |
| 티스토리 글(포스팅)에 차트 넣기(charjs) (21) | 2020.02.07 |
| 다음을 보지만 구글을 생각한다 (0) | 2020.01.30 |
| 티스토리 다음 썸네일 누락 (2) | 2020.01.27 |
