[포토샵강좌] 쉽게 쇼핑몰 상세페이지 만들기

안녕하세요 샵인사이드 플레이팁입니다 오늘은 상세페이지 쉽게 제작하는 방법에 대해 알아보도록 하겠습니다 먼저 포토샵을 켜주시고요 (cs6 영문판) 파일 > 새파일 혹은 단축키 Ctrl + N을 쓰셔서 가로 900px 세로 4000px짜리 새 종이를 열어주세요 가끔 세로길이가 너무 길다고 생각하시는 분들이 있는데요 저희는 오늘 상세페이지를 만들것이기 때문에 세로길이는 이정도가 보통이구요, 이거보다 더 길어질 수도 있습니다 새 종이가 나왔으면 이렇게 작은 화면으로 보이실거예요 이걸 100퍼센트로 보기 위해서 왼쪽 도구모음에서 돋보기툴을 더블클릭해서 화면을 100퍼센트로 봐주세요 이제 가운데에 (쇼핑몰)로고를 넣어줄텐데요 왼쪽 컬러픽커에서 마음에 드는 색을 선택하신 후에 (도구모음)위쪽 타입툴 선택해주시구요 폰트와 폰트의 사이즈를 설정해주신 후에 자신의 로고를 써줍니다 다음으로 아래쪽에 주의사항을 한번 써줄텐데요 클릭 먼저 하신 후에 글씨체와 글씨크기, 색을 선택하시고 주의사항을 써줍니다 왼쪽 도구모음에서 라인툴 선택해주시구요 상단 옵션바에서 두께는 3px 색상은 회색으로 골라주신 후에 주의사항 앞쪽에 꾸밈을 주도록 하겠습니다 이제 상세페이지의 레이아웃을 한번 잡아볼텐데요 왼쪽 도구모음에서 렉탱글(직사각형)툴을 선택하신 다음에 사진이 들어갈 위치를 잡아주세요 저는 이 맨 아랫쪽에 디테일컷을 넣을것이기 때문에 이 아랫쪽 위에 타이틀로 Detail View를 써주도록 하겠습니다 윗쪽 주의사항과 마찬가지로 라인툴을 이용해서 앞쪽에 경계선을 줘보도록 하겠습니다 이렇게 레이아웃을 다 잡으셨으면 오른쪽 레이어창에 쉐입레이어가 여러개 생기셨을 텐데요 순서가 헷갈리지 않도록 (레이어)이름을 바꿔보도록 하겠습니다 레이어의 이름은 이름 위쪽 더블클릭으로 바꾸실 수 있습니다 이제 상세페이지에 넣을 이미지를 불러오는데요 이쪽 포토샵 속 빈공간(짙은회색)을 더블클릭 하시거나 단축키 Ctrl + O를 누르시거나 아니면, 파일 > 오픈으로 사진을 불러오시면 됩니다 사진을 다 불러오셨으면 이동툴을 선택해서 위쪽(옵션바에서) 오토셀렉트 선택 옵션은 레이어로 바꾸어 주시구요 해당 사진을 보여주고 싶은 위치에 있는 쉐입레이어를 클릭해서 선택해주신 다음 불러온 사진 위에서 Ctrl + A 모두선택 Ctrl +C 복사 상세페이지로 오셔서 Ctrl + V 붙여넣기 해줍니다 '001세로' 쉐입레이어 바로 위쪽에 사진(레이어)을 이동시켜주신 다음에 사진(레이어)에서 우클릭 크리에이트 클리핑마스크(클리핑마스크 만들기)를 눌러줍니다 이동툴로 사진의 위치를 조절해주시구요 편집 > 변형 크기를 이용해서 크기도 줄여주시면 됩니다 나머지 사진들도 마찬가지로 Ctl + A 전체선택, Ctrl + C 복사 그리고 상세페이지로 오셔서 Ctrl + V 붙여넣기해서 클리핑마스크 걸어주시거나 아니면 이돌툴을 클릭해서, 사진을 먼저 클릭해주시고 드래그 & 드롭 방식으로 떨어뜨려 주시면서, 사진을 모두 복사 붙여넣기 해주세요 그리고 이런식으로 (레이어) 정렬을 잘 해주신 다음 각자 위치에 맞는 쉐입모양 바로 위쪽에(겹치도록) 위치 시켜주세요 그리고 여기에서, 클리핑 마스크를 각자 걸어주셔야 되는데요 사진(레이어) 위에서 우클릭 > 클리핑마스크 걸어주지 않으셔도 키보드 Alt 키를 누르신 상태로 쉐입레이어와 사진레이어 사이를 잘 클릭하시면 클리핑 마스크가 걸어집니다 클리핑마스크가 모두 걸어졌으면 사진을 클릭해서 크기와 위치등을 조절해줍니다 자 이렇게 상세페이지 정리하기가 끝났는데요 상세페이지를 이것보다 길게 만들고 싶으신 분들은 단축키 Ctrl + Alt + C를 누르셔서 페이지를 위쪽으로 올리시고 추가할 높이를 입력하신 후에 확인을 눌러주신 다음에 (아랫쪽으로) 사진들을 추가하시면 됩니다 이 상세페이지 레이아웃같은 경우는요 레이아웃 구성을 다르게 해서 몇개정도 만들어 두신다음에 사진만 이런식으로 바꿔치기 해서, 각 제품에 맞는 상세페이지를 쉽게 제작하실 수 있습니다 이번엔 이 상세페이지를 저장해보도록 하겠습니다 파일 > 저장 눌러서 저장해주시는데요 영문 소문자 + 숫자를 조합한 제목으로 적어주세요 이제 이 상세페이지를 jpg 이미지로 뽑은 다음에 메이크샵 상세정보 입력칸에 입력 해볼텐데요 그 전에 이 이미지들을 분할해서 저장해보도록 하겠습니다 이 사진들을 분할하는 이유는요 300kb 이상은 메이크샵 웹 FTP에 업로드가 되지 않으므로 각각 나눠서 저장을 해주시는겁니다 보기메뉴 > 눈금자 선택후에 드래그로 가이드라인을 잡아주세요 가이드라인을 수정하실 때는 라인 위에 마우스를 올린 후에 이렇게 드래그로 수정해주시면 되구요 지울때에는 라인 자체를 눈금자에 집어넣어 주시면 됩니다 이렇게 라인을 모두 잡아주시구요 왼쪽 도구모음에서 크롭툴을 길~게 눌러주시면 슬라이스툴이 나오게 돼요 슬라이스툴을 선택해주신 다음에 상단 <가이드 라인에 맞춰 자르기>를 클릭해주세요 파일 메뉴 > 웹및장치용으로 저장 클릭 후에 jpg 파일로 저장해주도록 하겠습니다 다시한번 말씀드리면 300kb 이상은 메이크샵 웹 FTP에 업로드가 되지 않는다고 했죠? 그래서, 잘린 영역을 모두 클릭해주셔서 왼쪽(아래)에 용량을 한번 체크해주시구요 300kb가 넘으면 오른쪽에 퀄리티를 임의로 낮추셔서 용량을 300kb 이하로 주셔야 합니다 그리고 이렇게 경계선의 숫자만큼, 파일이 분할 되어져서 나오는 것을 한번 확인하시구요 파일명이 포토샵 원본파일(이름)에 001, 002로 저장된것도 보실 수 있습니다 메이크샵 웹 FTP에 업로드 시키실때 한글, 영문 대문자, 특수문자등은 파일 자체에서 오류가 날 수 있어서 포토샵 원본을 저장할때 영문 소문자와 숫자만을 조합해서 저장하신겁니다 ( _ 는 가능, -는 불가능 ) 다 되셨으면 메이크샵에 로그인 후에 상단 '개별디자인'메뉴에 들어가주세요 그리고 웹 FTP에 상세페이지 폴더를 만드신 후 (폴더 또한 영문 소문자와 숫자 조합) 이미지를 모두 업로드 시켜줍니다 상단 상품관리 판매상품 신규등록에서 상품을 등록하신 후에 상품 상세정보 입력 칸에서 '사진' 클릭하시고 웹 FTP 눌러주시고 이미지삽인을 눌러서 이미지 등록을 완료해줍니다 잘려있던 상세페이지들이 이렇게 하나처럼 연결된게 보이시죠? 다 되셨으면 완료 버튼을 눌러줍니다 마이샵 들어가셔서 상세페이지가 제대로 적용이 되었나 확인 한번 해주시구요 여기까지, 상세페이지 쉽게만드는 법에대해 알아보았습니다 감사합니다ㅇ_<