디자이너 브이로그 엎고 또 엎고! 상세페이지 디자인의 노예……

게임같은 음악으로 시작해보도록 하겠습니다! 가운데 동그라미를 접시라고 생각하고 양쪽에 수저가 있도록! 숟가락을 그려봅시다! 숟가락 목(?)이 있을것이고 손잡이가 있겠죠? 손잡이 끝부분은 장식 하나 넣어줍니다 너무 단순한 모양이면 재미없으니까~ 이제 포크입니다! 짜잔! 상세페이지 디자인

내용과 디자인 사이에서 많은 고민이 쌓이는 작업 해로운 화학성분 다 적기! 이것들이 다 함유되지 않는 제품이기에 빨간줄 쫙쫙 '없다'는 뜻의 'Free'를 넣어주기 아

이건 아닌거 같애 다 지워! 선 하나로 가자! 'Free'가 오른쪽 끝에 딱 맞춰지도록 내가 사랑하는 번역기 디자인에 영어가 자주 사용되어서 자주 이용합니다ㅋ 문법 대충은 알아서 번역기 돌린게 이상하면 수정도 살짝 내가 그린 그림들 3개씩 배치 성분 확인하면서 쫙 크게 키우기! 아

이게 자꾸 거슬려 밑에 전성분 쭈루룩 쓰기 로고로 마감 상세페이지에 빠질 수 없는 사진 앗! 나다! 이 사진 모델 = 나 넣어봤음 커피 한잔 들이키고 입술도 좀 바르고; 다시 상세페이지 디자인 시작! zero body burden technology 생활독소가 없는 세제라서 천연세제입니다 중간중간 저장은 필수요! 포스터 디자인해놨던 것들 속에서 마크를 가져옴 ewg마크는 원형만 써야겠군

(안그럼 안예쁨) 디자이너는 타자 속도도 빨라야 하는가 열이 딱 맞게 써주었음 사진 방랑자 모드

무슨 사진을 쓸까? 일러스트레이터에서 사진 크롭은 클리핑마스크 가이드라인 쳐놓은 것에 맞춰서 크기 조율 디자이너라면 크기가 얼마나 중요한지 다들 아실거예요! 이 사진이 낫나? 노래가 왜 이렇지; 계속 사진 방랑자 조금 편집디자인스러운 상세페이지를 해보고싶었음 좀 구성적인 디자인이랄까? 음악 왜 이럼;;; 잘못 선택했네; 귀신 나올 것 같다; 보통 설거지하는데 20분은 소요되잖아요? 그래서 '20분의 즐거움'임 또 번역기 돌리기 크라프트 재질이면 더 편집디자인 느낌 날듯함 굿~ 마음에 들어요! 즐거움이 pleasure가 맞는지 확인해봤음 무

식? 혹시나 해서요;; 따로 그려놨던 디자인이 있지! 훗! 제가 천연세제를 사용할 때 이 툴들로 사용하니까 좋더라고요? 'Tips for Using'이라고 쓰고 제 경험으로 만들어진 사용법을 상세페이지 디자인 속에 쏙! 넣어줍니다 내용 흐름 계속 파악하면서 전 이렇게 3개의 툴로 설거지를 해요 섬세하게 간격 조정 툴들은 이렇게 다 고리가 있어야 사용후 건조할 때 좋더라고요

나의 경험으로 만들어진 사용설명서? 선물상자 패키지 샘플을 살피는 중 브로슈어가 카드형으로 만들어져서 저렇게 꼽히는데, 꼽히는 칼선이 좀 아래에 위치하도록 했으면 좋겠다고 말씀드렸습니다! 이 위치요! 과장님이 색깔 바꾸라는 명령! 레드 컬러가 브랜드 컬러라 생각해서 했는데 제품에 맞춰서 색깔 바꾸기로 아무튼 하던거 우선 해보기! 설거지 다 하고 저 고리로 딱 걸어놓으면 기분이 참 상쾌함ㅋ 닦는 과정을 그린 그림도 있지요! 이것도 세밀한 간격 조정하고, 컬러의 통일감 부여! 어느새 바뀐 메인 컬러 블루 보셨나요? 이번엔 '5분의 깨끗함'이 주제임 야채와 과일에 묻은 흙이나 화학성분, 미세먼지 무시할 수 없죠 먹어도 안전한 천연세제로 5분만 닦으라고 상세페이지에 딱 넣어줌! 중간중간 저장은 필수

가장자리에 원을 반복적으로 넣어서 엘레강스(?)한 멋을 더해줍니다 밋밋함이 사라졌죠? 스크롤 내리고 싶게 사이드 포인트를 줬음 다음날 출근길 오늘 너무 피곤해요

금요일이라 그런가? 머리 안 감아서 묶었음 낄낄 오늘은 지각이 아닙니다 상세페이지 어느정도 해놔서 당당한 발걸음! 피부를 위한 시간 알약이 너무 커서 커피에 녹여 먹기로 아픈거 아니고 콜라겐입니다

하하 두 알은 넣어줘야지 강황가루 같네 쩝

쓰레기 정리 좀 더럽습니다 제가 콜라겐아 녹아라~ 좀 이상한 액체가 됨; 그래도 이렇게 먹는게 최선 커피 맛에 가려져 쓴 맛이 안 느껴짐 전날 해놓은거 조금 다듬고 끝낼 생각에 잠시나마 행복한 작업이었음 간격을 조금 여유있게 손질 마크 만들어놨던거 넣기로! 마크 하나를 만들어야겠구만 뚝딱뚝딱 눈 모양이에요 전성분을 공개한다는 뜻의 마크 디자인 전성분 공개라는 의미의 영어를 넣고 아래 속눈썹 그릴까? 음 아닌것 같네요 지우기! 애교살을 넣어볼까? 이것도 아니네요 그냥 이대로가 좋아요 상세페이지는 내용과의 전쟁 타자 속도가 빨라질 뿐이고ㅋㅋㅋ 다다다다 치는 중 줄 간격도 중요! 어디 좋은 사진 없나? 대지 하나로 부족 2개의 대지에 작업! 귀여운 별 장식 좀 넣어주면 레트로틱하죠 완성된 모습 내가 그린 부분 확대 잼 ㅋㅋㅋㅋ 집에 오자마자 옷 갈아입고 침대가 아닌 바닥에 뻗었음

너무 피곤 바닥입니다 이와중에 내 품에 쏙 앉은 호두냥 뒤에 키위냥 아련 너네 덕에 웃는다! 아 힘들다 으어 다음날 통으로 치움 다시 해야함 정리된 느낌을 말씀하셔서 진짜 제대로 정리된 디자인을 보여드리고자 편집디자인 하는 줄 알았네 글이 많음 정리된 느낌으로 번호를 매겨가며 디자인 배열 지겹다

ㅋ 허전한 부분엔 별을 넣어줌 디자이너의 삶이란 스트레스 받았는지 젤리 폭풍흡입함 어쩌죠 이 쓰레기들 디자이너의 책상은 늘 먹고난 후의 쓰레기들이 가득 또 다른날

확 바뀐 상세페이지 디자인 가독성 이야기를 하셔서 뭐 그렇게 됐습니다

그래서!!! 크게 빵! 넣어주기로 속시원~하게 디자인해드리겠습니다! 뭐 이렇게 되고 있습니다 홈페이지 메인이고요 'Shop'을 누르면 이렇게 제품이 보이고 클릭하면, 이것은 5번째 시안 회색 네모는 gif 이미지가 들어갈 자리에요

아주 그냥 깔끔~하게 정리한 디자인 구매하기를 누르면 이렇게 한 번 더 창이 뜨게끔 했는데, 이게 싫으시다고!!!! 다시 하라고!!!! 이제 영혼없이 하기로 했습니다 내가 생각을 하면 안돼 그냥 해달라는대로 하는게 가장 좋음 많은 디자이너 분들의 숙제죠? 내가 하고싶은 것을 해야하나 해달라는대로 해야하나 전 후자를 택하고 다시금 디자인했습니다 표 따위 쉽죠~ ewg 1등급 쫙 깔아주고 지침 도대체 상세페이지 디자인 언제 끝나요? 자꾸 수정해달래요 내가 못하나

? 정신차리자 해보겠습니다

제품이 2가지에요 이건 베이비 전용 주방세제인데, 제품 컬러가 민트색이에요 그래서 민트 컬러가 메인 컬러에요 핵심 성분 효능 쓰기! 그림은 내가 그린거!(강조) ewg 배열도 해달라는대로 디자인 변경 시키는대로 디자인 이 아기도 제가 그렸습니다

(강조) 디자이너 분들 화이팅!

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

안녕하세요 샵인사이드 플레이팁입니다 오늘은 상세페이지 쉽게 제작하는 방법에 대해 알아보도록 하겠습니다 먼저 포토샵을 켜주시고요 (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 눌러주시고 이미지삽인을 눌러서 이미지 등록을 완료해줍니다 잘려있던 상세페이지들이 이렇게 하나처럼 연결된게 보이시죠? 다 되셨으면 완료 버튼을 눌러줍니다 마이샵 들어가셔서 상세페이지가 제대로 적용이 되었나 확인 한번 해주시구요 여기까지, 상세페이지 쉽게만드는 법에대해 알아보았습니다 감사합니다ㅇ_<