콘텐츠 마케터로서 한 걸음

3. 프로모션 디자인을 위한 타이틀디자인(2) 4. 프로모션 디자인_KEY VISUAL 디자인(기초) 1. KEY VISUAL이란? & 기획안 파악하기KEY VISUAL이란?- 사전적 정의 : 광고에서 가장 중요한 포인트가 되는 한 화면 - 영화에서 처음 나온 내용 ex) 영화 포스터 - 만들어진 KEY VISUAL는 여러 매체로 확장 가능 기획안 파악하기- 프로모션 목적 : 프로모션 하면서 무엇을 얻을 것인지 - 프로모션 목표 : 프로모션 하면서 무엇을 얻을 것인지 - 프로모션 대상 : 어떤 타깃에게 할 것인지 - 프로모션 혜택 제공방법 : 어떤 혜택을 줄 거고, 어떻게 줄 것인지 - 프로모션 혜택 : 어떤 혜택을 줄 거고, 어떻게 줄 것인지 - 프로모션 기간 : 언제부터 언제까지 - 프로모션 디바이스..

광고디자인이란? 1. 광고디자인이란? : 광고디자인에 대한 폭넓은 시야와 소비자광고 : 상품이나 서비스를 널리 알리는 것뿐만 아니라 소비자가 구매하고 소비하는 활동모바일 광고 종류- 배너 광고 : 광고 영역을 구현하는데 시간과 개발 덜 들고 영역을 많이 차지❌, 기기 화면의 약 110% 차지 장점 광고비 대비 많은 노출 단점 낮은 클릭률과 전환율 - 인터스티셜 광고(전면 배너) : 화면을 가득 채우는 전면 광고, 앱 시작과 종료 시점에 노출, 모바일 광고 중 가장 큰 사이즈로 유저 주목도 상승, 인터렉티브 한 요소를 가질 수 있고 큰 사이즈는 스토리텔링을 위한 공간으로 활용 👉광고 효과 상승 - 네이티브 광고 : 광고가 아닌 광고, 광고인지 아닌지 혼돈을 줄 정도로 완벽히 녹아든 형식 장점 높은 클릭률 ..

3. 섬세한 타이포 작업으로 프로모션 페이지 완성도 높이기자간 조절 : opt+방향키전경색 : opt+shift+delete배경색의 컬러로 바뀜 : cmd+shift+delete 4. 간단한 일러스트레이터 활용법웹 기반 작업 : 210mm / 297mm / RGB 색상 / 72 ppi 5. 쉬우면서 알고 있으면 좋을 다양한 포토샵 기능GIF 만드는 법 : Window-Timeline-Create Video Timeline--편집할 부분 세팅-shift로 프레임 다 잡기--스페이스바 눌러서 재생느리게 움직이기 : Tween마지막 멈춤 표시 : 1.0으로 지정저장 : shift+opt+cmd+s 오늘 또한 강의를 보며 열심히 따라해서 이미지를 만들었다. 다른 건 수월하게 했지만 아직 텍스트 부분 자간, 행간..

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+폴더를 누르면 그룹 안의 그룹들이 다 같이 닫힘다른 이름으..

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 길고 긴 피그마 강의가 끝났다! 꽤나 머리 아프고 어려웠지만 따라 하는 재미가 있던 시간이었다. 완성작을 보며 평소 내가 상세 페이지에서 봐왔던 이미지들이 이렇게 편..

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

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

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

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

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