제로베이스 38

[제로베이스 콘텐츠 마케팅 스쿨 스터디 노트] 7/11 _ 실전 포토샵①

1. 인트로, 포토샵의 기본 설정웹기반 작업물 설정 : 픽셀/72ppi/RGB색상모드ppi : 웹 기반의 해상도dpi : 인쇄물의 1인치 당 도트의 개수RGB : Red, Green, Blue 총 3가지의 빛으로 색을 표현👉웹 상 디자인에서 사용CMYK : Cyan, Magenta, Yellow, Black 총 4가지의 잉크로 표현하면 인쇄물 디자인에 사용이미지 확대/축소 : cmd+ + / cmd+ -캔버스 크기 조절 : option+cmd+c사각형이 캔버스 중앙에 오게 하기 : cmd+a / 선택 해제 : cmd+d클리핑 마스크 : 이미지가 도형 위에 오고 두 레이어 사이에 Alt 키 눌러서 실행그룹핑 : 레이어를 폴더로 생성해 정리하기cmd+폴더를 누르면 그룹 안의 그룹들이 다 같이 닫힘다른 이름으..

스터디 노트 2024.07.11

[제로베이스 콘텐츠 마케팅 스쿨 스터디 노트] 7/10 _ 피그마 기초②

7. 프로토타입아이콘 화면에서 많이 사용캐러셀 : 홈페이지, 모바일 페이지를 열었을 때 메인으로 있는 컨셉 이미지가 움직이는 영역 8. 공유와 협업파일명 주의 사항!- 소문자 사용 : Favorite.png 👉 favorite.png - 첫 글자 숫자 금지 : 24-favorite.png 👉 favorite-24.png - 띄어쓰기 금지 : favorite red.png 👉 favorite_red.png - 축약하기 : button 👉 btn / image 👉 img - 규칙 만들기(유형+이름_숫자_등) : ic-favorite_24.png 길고 긴 피그마 강의가 끝났다! 꽤나 머리 아프고 어려웠지만 따라 하는 재미가 있던 시간이었다. 완성작을 보며 평소 내가 상세 페이지에서 봐왔던 이미지들이 이렇게 편..

스터디 노트 2024.07.10

[제로베이스 콘텐츠 마케팅 스쿨 스터디 노트] 7/9 _ 피그마 기초①

1. Figma 소개와 설치모바일 중심의 UX/UI 디자인, 웹 사이트 등 다양한 디자인 작업을 지원피그마는 하나의 파일에 여러 명의 협업자가 모여서 파일 수정 가능 2. Figma 인터페이스Quick actions : 무언가를 검색할 때 사용함 (단축키 : Ctrl+/)기본툴 - Move : 원하는 대로 크기 조절 가능 - Scale : 같은 비율로만 조절 가능프레임툴- Frame : 원하는 아트보드 크기 지정 - Slice : 작업한 화면의 일부분을 잘라서 특정 영역을 이미지로 추출 가능모형툴 (Shape Tool)- Place Image : 이미지 불러오기펜툴 : 아이콘이나 도형툴로 만들기 어려운 비정형화된 형태를 정교하게 그리기 가능텍스트툴 : 텍스트 삽입 기능손바닥툴 : 캔버스를 드래그해서 작업..

스터디 노트 2024.07.09

[제로베이스 콘텐츠 마케팅 스쿨 스터디 노트] 7/8 _ 일러스트레이터 기초②

5. 일러스트레이터 채색하는 다양한 방법 익히기Color Picker- 원하는 색상을 스펙트럼을 통해 지정 - 채도와 명도를 조절 - 원하는 색상 코드가 있다면 #을 통해 입력 Swatches- 자주 쓰는 색상을 모아 놓은 패널 - 단색 외에도 그라디언트, 패턴 등 라이브러리에서 불러오기 가능 - 색상 등록도 가능 Color Pannel- 원하는 색상을 스펙트럼으로 만들 수 있음 Color Guide- 채색된 오브젝트를 선택하면 그와 어울리는 색배합을 보여줌Gradient는 Fill과 Stroke에 모두 채색이 가능 그러나, Fill만 제어 가능핀 추가 : 슬라이더 아래 부분 클릭핀 제거 : 추가한 부분 바깥으로 드래그핀 복사 : Alt+슬라이드 누른 후 이동6. 일러스트레이터에서 문자를 입력하고 다양하..

스터디 노트 2024.07.08

[제로베이스 콘텐츠 마케팅 스쿨 스터디 노트] 7/6 _ 일러스트레이터 기초①

1. 일러스트레이터 기본 개념 익히기환경설정 단축키 : Ctrl+K파일 open : 일러스트레이터에서 사용하는 벡터 방식을 열 때 사용파일 place : 픽셀의 사진은 벡터와 다른 형식의 파일이라 place로 가져오는 것이 정확저장 시 주의점 : save as로 저장 시 일러스트레이터에선 높은 버전에서 작업한 파일은 낮은 버전에서 열게 되면 작업 변형이 일어날 수 있음👉낮은 버전에서 열수도 있으니 애초에 한 두 단계 낮춰서 저장하는 걸 추천(CS6) 화면 배율 조정 단축키- Ctrl+1 : 작업창에 배치된 오브젝트를 실제 크기로 보여줌 - Ctrl+0 : 작업창에 맞춰서 일러스트레이터의 흰색 캔버스가 전체로 표시 - Ctrl+ + or - : 화면 배율이 100%씩 증가 또는 감소 - Ctrl+스페이스바..

스터디 노트 2024.07.06

[제로베이스 콘텐츠 마케팅 스쿨 스터디 노트] 7/5 _ 포토샵 기초②

6. 포토샵에서 정확한 모양을 제어하기 위한 펜 툴 익히기패스 끝점에 대한 선택 풀기 : Ctrl+빈 공간 클릭수직, 수평으로 패스 연결 : Shift 누르면서 클릭검정 화살표 : 전체 선택흰 화살표 : 부분 선택 (점, 패스 선택 시)곡선 패스에서 핸들 끊기 : Alt+점 클릭완만한 곡선 패스 : 이미지 진행 방향에 따라 핸들 방향 따라가기 7. 포토샵에서 문자를 입력하고 수정하기문자 커서 해지 단축기 : Ctrl+엔터문자 수정 : 레이어 패널의 T를 더블 클릭Ctrl+Shift+, or . : 글씨 크기 조절Alt+위아래 방향키 : 행간 조절Alt+좌우 방향키 : 자간조절다른 컴퓨터에 해당 폰트가 설치되지 않았을 때: 폰트가 유실되는 상황 방지를 위해 폰트를 이미지로 바꿔야 함래스터화 하기 : 문자 ..

스터디 노트 2024.07.05

[제로베이스 콘텐츠 마케팅 스쿨 스터디 노트] 7/4 _ 포토샵 기초①

1. 그래픽 작업에서 알아야 할 기본 개념 익히기 1. 벡터와 비트맵의 차이 : 그래픽 작업에서 사용하는 이미지의 형식은 크게 벡터와 비트맵으로 나뉨 벡터- 그림을 그릴 때 사용되는 점과 점을 잇는 선을 컴퓨터에 좌표 값으로 계산해 주는 방식 - 크기를 줄이거나 확대를 해도 컴퓨터가 상대적인 좌표값을 자동으로 계산해 주기 때문에 사진과는 다르게 깨지는 현상 없이 매끄럽게 보여짐 - 벡터는 크기 제약 X 비트맵- 픽셀로 이미지를 만들어 내는 형식 * 픽셀이란? 화면 이미지를 구성하는 최소 단위로 사각형 모양의 입자 - 크기를 확대하면 사각형 모양의 픽셀이 드러나서 윤곽이 흐릿해지는 것을 '사진이 깨진다'라고 표현 - 비트맵은 크기 제약 O 💡일반적인 사진 작업은 포토샵, 크기를 자유롭게 조절해서 작업해야 ..

스터디 노트 2024.07.04

[제로베이스 콘텐츠 마케팅 스쿨 스터디 노트] 7/3 _ 카피라이팅

1. 카피라이터의 일 1. 강의 목적과 개요카피라이터의 일 : 글과 관련됨 모든 것들의 톤 앤 매너를 맞추는 일카피를 오래 기억할 수 있는 방법: 공감돼서 읽히게 하자 읽히면 기억된다타이틀엔 이야기를 넣자 : 인간의 뇌는 정보성보다 이야기 형식을 더 잘 기억함스토리텔링의 중요성 : 사소한 것(개인적이고 정서적인 경험)을 이야기해 주자👉공감은 사소하고 다양한 사례에서 나옴 TIP! 지극히 사소하고 개인적인 경험을 통해서 느꼈던 감정을 메모하기 쇼핑의 동기부여가 되는 카피- 제품이 필요한 상황을 제시하는 카피 - 고객의 삶에 들어갔을 때의 모습을 시현하는 카피 - 제품 혹은 서비스를 사야 하는 이유를 담은 카피 👉고객이 이 제품을 왜 사야 하는지를 내가 먼저 고민해야 함 흔치 않은 카피 : 카피에 보통 사람..

스터디 노트 2024.07.03