블로그 썸네일 디자인 3종

• 블로그 썸네일 디자인을 제작할 때의 권장 사이즈 -> ( 936px X 936px )
  ( 정사각형으로 잡고 제작할 것 )

  ( PC에서 936x936으로 제작할 경우, 모바일에서는 936X468로 가로가 긴 직사각형으로 짤려서 보임 )
  

1. 정사각형

( 이미지 비율과 블로그형 썸네일 비율이 둘다 1:1로 같으므로 별다른 작업 필요 없음 )

• PC와 다르게 모바일에서는 위 아래가 짤리게 나타나므로 중앙에 중요 키워드가 들어가있다면 좋은 디자인임

2. 직사각형

( 직사각형의 이미지 비율은 1:1이 아니므로 블로그형 썸네일 비율에 맞춰 1:1 비율로 만들어주는 작업 필요 )

1. 썸네일로 사용할 이미지를 포토샵으로 가져옴
   

2. 해당 이미지의 픽셀을 맞추기 위해 이미지 크기로 들어감
   

3. 스타일 비율 조정을 설정해놓고 폭과 높이에 주목
   

4. 스타일 비율 조정을 설정해놓았으므로 폭에 대한 픽셀을 바꾸면 동일 비율을 유지하면서 높이도 자동을 바뀜
   

5. 다음과 같이 폭이 400px로 변경되었으며 동일 비율을 유지하며 높이도 변경됨

   

6. 블로그형 썸네일 비율인 1:1로 맞추기 위해 캔버스 크기로 들어감

   

7. 이미지 크기에서 폭은 이미 400px로 맞춰놨으므로, 1:1 비율을 맞추기 위해 캔버스의 높이를 폭과 같은 400으로 설정

   

8. 이미지 폭의 크기가 400px이면서 전체 이미지가 1:1 비율을 유지하는 썸네일이 완성됨

   

3. 원형

1. 원 모양을 잡기 위해 새로 만들기

2. 썸네일의 크기를 설정하고 배경 내용을 투명으로 설정

   

   

3. 투명 레이어( 배경 )에 원을 만들기 위해 새로운 레이어 추가( 원 )

   

   

4. 원 레이어가 선택된 상태에서 원의 색을 설정한 후( 아무거나 ), 타원도구를 선택

   

   

5. 타원 도구가 선택된 상태로 투명 레이어의 중앙을 더블클릭, 이후 중앙부터 체크하고 원의 크기 설정

   

   

6. 원에 넣을 썸네일 사진을 가져옴

   

7. 만약 사진을 가져왔을 때 저 부분에 자물쇠 마크가 있다면 더블클릭하여 해제해줌

   

8. 이동 도구를 클릭하고 썸네일사진을 드래그하여 원 레이어까지 옮김

   

   

9. 옮겨진 썸네일 레이어에 우클릭 클리핑 마스크 만들기 선택 -> 원 영역만 보이게 됨

   

   

10. 썸네일 사진의 크기를 조절하기 위해서 "ctrl + t" 를 눌러 썸네일 사진의 크기 가늠좌 나타나게 함
    ( 단, 반드시 Shift누르면서 조절할것 -> 이래야 사진의 비율이 유지되면서 크기가 조절됨 )

    • 마우스를 통해 사진을 이동하면서 원으로 보여줄 부분을 바꿀 수 있음

    

11. 조절이 끝났다면 사진을 자르기 위해 ctrl을 누른 상태에서 타원레이어의 그림 클릭

    

    --> 그럼 아래와 같이 원의 영역이 선택됨

12. 이미지탭의 자르기를 통해 해당 영역만 남기고 나머지 자름

    

    --> 그럼 아래와 같이 원 크기만큼 잘림 ( 쓸대없는 배경 부분까지 잘림 )

    

13. 이후 필요에 따라 텍스트 레이어 추가

14. 텍스트 레이어의 변경사항은 아래의 설정에서 바꿀 수 있음

15. 이후 png 파일로 저장