• 2017. 3. 15.

    by. 무라언니레시피

    반응형

    포토샵 한글판을 이용한 홈페이지 형 블로그 만들기 1탄



    안녕하세요

    아이언스카이입니다


    저는 티스토리 말고도

    네이버 블로그를 하나 더 가지고 있는데요


    이번에 네이버 블로그를

    홈페이지처럼 상단의 메뉴를 클릭해서

    원하는 곳으로 이동이 가능하게끔

    홈페이지 형 블로그로 바꿔 보려고 합니다


    홈페이지형 블로그를 만들기 위해

    포토샵 cs6 한글판, IMAGEMAPIC 이라는 프로그램을

    함께 사용할 거구요


    포토샵은 필요하니까 미리

    준비해 주시면 좋습니다^^







    기존에 있었던 제 네이버 블로그입니다
    기본스킨에 밋밋한 그냥 블로그였었죠ㅜㅜ

    이제 이 블로그를 들어오자마자 

    화사해 보일 수 있는 사진을 입혀
    그럴듯해 보이는 홈페이지 형 블로그로 탈바꿈시켜 볼게요!!







    먼저 블로그 메인화면에 보이고 싶은

    사진파일을 준비해야 합니다

    "이때 중요한 것은 사진파일 자체의 크기가

    큰 것을 준비하셔야 해요"

    처음부터 사진파일이 작으면 작은크기의 사진을

    확대해서 블로그에 채우기 때문에
    결국 흐릿흐릿 ㅜㅜ


    이건 아래 쭉 내려가 보시면 

    저의 실패작을 보실 수 있답니다ㅜ


    사진이 준비되면 저장해 놓고, 포토샵을 킨 다음
    File -> Open 을 클릭해서 사진을 불러옵니다!

    단축키 : Ctrl + O






    사진을 불러오면 이것을 블로그 상단에

    채워지는 크기에 맞게
    포토샵 cs6 crop tool 로 잘라줄 거예요






    크롭툴은 포토샵에서 사진을 자를 때 쓰는 기능이구요


    왼쪽 빨간색 친 부분의 아이콘을 클릭하시면

    아래처럼 자르는 모양으로 바뀐답니다

    이 때 저처럼 왼쪽에 포토샵 한글판 도구가

    보이지 않으시는 분들은

    메뉴에서 window -> tools 를 체크하시면 옆에 생긴답니다






    저는 블로그를 꽉 채울 수 있도록
    가로 2000px , 세로 650px 크기로 만들어 볼게요


    포토샵 크롭툴을 클릭하면 위에 파란색으로 친 것처럼

    직접 크기를 정할 수 있는데요

    포토샵 메뉴 상단에 Custom 으로 되어 있는지 확인하시고
    각각 2000px, 650px 이라고 입력하시면 됩니다








    그리고 사진을 잘랐으면 파일에 들어가 

    다른이름으로 저장하기를 눌러
    jpg 파일로 저장해 주시면 됩니다






    파일이름을 넣고 저장하기를 누르면

    위의 옵션창이 하나 뜨는데요

    저와 같은 크기로 하셨다면 손댈 것 없이

    OK를 클릭하시면 됩니다






    그리고 다시 네이버 블로그로 돌아와

    이번에는 위젯부분을 수정할 차례입니다


    포스트쓰기 옆에 '관리'라는 글씨를 클릭하셔도 되고,
    윗부분에 내 메뉴를 클릭해서 '관리'로 들어가셔도 됩니다





    관리 -> 레이아웃 위젯 설정 클릭







    레이아웃 위젯 설정을 클릭해서 들어가면
    현재 제 블로그가 어떻게 구성되어 있는지 보실 수 있답니다

    프로필, 카테고리, 달력, 인스타그램 위젯 등의
    순서로 되어 있는 게 보이시죠





    이제 이 위젯들을 정리하기 위해서
    아래 부분들을 확인합니다


    중앙정렬
    포스트 영역은 넓게
    메뉴사용설정에서 타이틀은 체크 해제


    여기에서 타이틀은
    '즐거운무라언니의 일상이야기'라고 적혀있는
    캐릭터 부분이 타이틀입니다






    그리고 위에 있는 프로필부터 모든 위젯을
    모두 아래로 내려놔 주세요

    아래에 계속 위젯들을 놓으실 분들은
    놓을 순서에 맞게 아래로 내리면 됩니다!

    자 그리고 이제 투명한 위젯 5개를 만들어
    위쪽에 위치시킬 건데요







    투명한 위젯을 만들지 않으면 어떻게 되느냐
    바로 이렇게 됩니다

    즉, 상단에 내가 선택한 사진이 들어갈 공간이 없이
    바로 전체보기 목록이 나와 버려서

    홈페이지형블로그를 

    만들지 못하는 것입니다





    때문에 사진을 놓을 자리를 미리
    투명위젯으로 만들어 공간확보를 하는 것입니다







    자 그럼 기존에 있던 위젯들을 모두 아래로 내려 놓았으면
    오른쪽에 위젯직접등록을 클릭합니다






    이 부분은 html 코드인데요


    가로 170, 세로 550 의 1행 1열인 테이블 하나를
    각각 5개를 만드는 것입니다

    즉, 한 칸 짜리 긴 사각형을 

    만든다고 생각하시면 됩니다

    <table width="170" height="550">
    <tr><td></td></tr></table>

    html 코드는 절대 오타가 있어서는 안 됩니다
    오타표시도 안 날 뿐더러 실행이 되지 않아요






    html 코드를 적고 다음을 클릭하면
    저렇게 긴 사각형으로 미리볼 수 있구요


    위 사진처럼 되는 게 정상입니다
    이렇게 되면 등록을 클릭하시면 돼요





    투명1이라고 적은 투명위젯 한 개를 완성하면
    저렇게 아래쪽에 생기는데요
    이걸 '포스트영역' 위쪽에 놓아줄 겁니다





    그리고 역시 투명위젯 2, 3, 4, 5번도 

    같은 html 코드를 써서
    똑같이 만들어 주시면 됩니다

    나중을 위해 숫자로 표시해 주는 게
    좋더라구요





    투명위젯 5개를 모두 만들었으면
    위쪽에 나란히 배치합니다





    이제 적용을 눌러서 확인해 볼까요~!

    적용을 클릭하면 다시 한 번 

    확인하는 창이 나오는데
    확인을 클릭하세요







    위 사진에서 주황색으로 표시한 부분이
    우리가 만들어 준 투명위젯 5개가 나란히 있는 부분입니다

    투명위젯 상단에 토끼그림이 있는 부분은
    기본스킨이라 미리 없애주시고 하시면 더 좋겠죠!

    위에서 말씀드린 대로
    이렇게 투명위젯을 만들어 공간을 확보하지 않으면



    homepage 형태의 메뉴들을 놓을 수 있는

    자리가 없답니다






    자 그럼 여기까지 됐으면
    이제 처음에 저장한 사진을 네이버 블로그에 적용해 볼게요

    블로그 상단에
    내 메뉴 -> 리모콘 클릭






    전체박스에서 사용하지 않음 체크


    그룹박스에서 사용하지 않음 체크






    스킨배경 -> 직접등록 클릭

    상단영역에서 찾기를 클릭해서 사진을 불러오면 되구요
    패턴영역은 블로그 양옆에 들어가는 패턴이므로
    이 부분은 마음대로^^






    직접등록으로 상단영역에 사진을 찾아
    확인





    헐.......
    처음에 제가 넣고싶은 사진은 크기가 작았었나 봅니다

    원래 작은 크기여서
    블로그 크기를 감당할 수 없었던 거죠

    사진이 확대되니까 엄청 흐려져서
    실패 ㅜㅜ

    그래서 다시 찾았습니다







    다시 적용한 사진의 화질이
    확실히 다르게 보이시죠?

    그래서 처음에 언급한 사진크기에 대한 얘기가
    바로 이 부분 때문에 그렇습니다

    여기까지는 따라오기 쉬우셨을 거예요
    1탄에서는 포토샵 cs6 한글판을 이용해

    사진작업을 하고,

    홈페이지 형 블로그 만들기 준비만 한 건데요


    2탄에서는 이제 상단 이미지에
    메뉴를 직접 적고,


    homepage처럼 클릭하면 이동이 가능하게끔
    홈페이지 형 블로그를 만들어 볼게요~!



    * Homepage blog, 홈페이지형 블로그 만드는 방법 2탄 보러가기 *

    [코딩IT] - [Homepage Blog] 포토샵 cs6 한글판을 이용한 홈페이지 형 블로그 만드는 방법 2탄


    그리드형(광고전용)