홈페이지형 블로그 스킨 작업 가이드-3

카테고리 없음

by 세아,한율이네 2016. 7. 28. 16:24

안녕하세요. 게으름의 아이콘 세아아빠입니다.ㅋㅋㅋ

오늘 포스팅은 홈페이지형 블로그 만들기 중 가장 손이 많이 가는 메인 이미지 바꾸기 입니다.

어느 블로그를 방문할때 가장 먼저 보이는 곳이며 블로그의 첫인상을 결정하는 곳인만큼 많은 애정을 쏟아 디자인 하시면 나도 기분 좋고 방문자도 기분좋겠죠? ㅋㅋㅋ

제 네이버 블로그 스킨이 어땠는기 기억나시나요? 기억 안난다 치고 다시 보여드리겠습니다.

이미지를 보니 기억 나시나요?

이 스킨은 여러 스타일 중에 한 종류일 뿐이고 이 강좌를 보시고 각자 취향에 맞게 디자인 하시면 될것 같습니다.

그럼 이제 본격적으로 이런 스타일의 스킨을 어찌 만드는지 시작해보겠습니다.

먼저 배경 이미지로 사용하실 이미지부터 찾아볼까요? 제가 예전에 포스팅했던 무료 그래픽 소스 다운로드 받는곳

http://pixabay.com 에서 이미지를 찾아보시고 다운받으세요.

이미지를 다운 받으시고 포토샵을 실행하세요

포토샵 실행 후 다운받으신 이미지를 불러옵니다. 전 제 스킨에 사용한 이미지를 쓰겠습니다.

보통은 새 캔버스를 만들어서 하기도 하는데 전 그냥 이미지 위에서 바로 작업합니다.

이미지는 불러왔는데 어디서부터 시작할지 막막하죠? 가장 먼저 할일중 하나가 이미지의 영역 설정을 해야 합니다.

이게 무슨 얘기냐 하면 홈페이지형 블로그의 스킨은 "바로가기버튼"을 만들어 줄수가 있는데 네이버에서는 그 버튼을 만들수 있는 영역을 제한했습니다.

"백문이불여일견 " 아래 스샷을 보면 바로 이해가 될겁니다.

다른건 볼 필요 없고 빨간박스안의 숫자만 보시면 됩니다. 966X611 이란 숫자가 보이시죠?

이건 가로 세로의 화면 크기를 나타내는 것인데 가로가 966픽셀 , 세로가 611픽셀이란 얘기입니다. 바로가기 버튼들은 저 영역안에만 만들수 있다는 것이죠. 세로는 어느정도 줄이고 늘리고가 가능한데 가로는 966으로 고정입니다. 이건 절대(?) 못바꿉니다. 네이버가 저렇게 하라고 정한거라 ㅋㅋㅋ

그런 저 영역 설정을 어찌해야 하느냐~ 다른 강좌에서는 포토샵의 "Rulers"(혹은 눈금자) 기능을 이용해서 가이드 라인을 만들고 진행하는데 전 그런거 안합니다. 가이드라인 만들면 편하긴 한데 작업하다보면 자꾸 눈에 거슬려서 잘 안씁니다. ㅋㅋㅋ 저만의 방식이긴 한데 이게 더 편해요.

"Rectangle Tool"와 "Aline" 기능을 이용합니다.

그전에 이미지 사이즈부터 조정합니다.

불러온 이미지는 백그라운드로 되어 있습니다.

이걸 레이어 복사하기에 마우스로 끌어다 놓아 복사본을 만들고 아래 레이어는 눈을 꺼줍니다.

그 후 복사한 이미지를 선택하고 Ctrl+Alt+C 를 눌러 캔버스 이미지 조정 창을 열어 다음과 같이 사이즈를 조정합니다.

세로 사이즈는 임의로 설정했고 가로 사이즈는 2000픽셀로 맞추셔야 합니다.

세로 사이즈는 마음대로 늘리고 줄여도 되지만 가로사이즈를 2000으로 맞춰야 이미지가 넓게 보여지게 됩니다. 와이드 모니터에서는 끝부분에서 겹쳐지게 보여지지만 와이드 모니터 쓰는 사람은 별로 없으니 이 부분은 패스~ㅋㅋㅋ 그리고 꼭 와이드로 안하셔도 됩니다. 그럴땐 가로 사이즈를 2000보다 작게 설정하시면 되겠습니다~