[it probono@daum] 4강 시선을 사로잡는 우리 기관 블로그 만들기

31
| 비영리단체를 위한 사회공헌 미디어교육 입니다. 시선을 사로잡는 블로그 IT ProBono @ Daum 4 교재

Upload: sue-hyun-jung

Post on 12-Jun-2015

2.433 views

Category:

Marketing


3 download

DESCRIPTION

디자이너는 아니지만 멋진 이미지도 편집하고 인포그래픽도 활용해 보고 싶으신가요? 간단한 웹배너를 쓱싹쓱싹 만드는 비결까지, 시선을 사로잡는 우리 기관 블로그를 위해서 어떻게 하면 좋을지 만나보세요! * 본 자료는 Daum 사회공헌팀과 미디어교육 프로젝트 SMLAB이 함께하는 IT ProBono@Daum 비영리 ICT를 위한 활용교육 워크숍 자료입니다. 영리 목적 외에 자유롭게 공유 및 활용 가능합니다. / 수정 재배포 불가

TRANSCRIPT

Page 2: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

1) 디자이너가 아니어도 디자인을 잘하려면

2) Canva, 쉽고 재밌게 콘텐츠 디자인

3) 온라인 포토샵 Pixlr로 이미지 배너 만들기

4) 멋진 시각자료를 만드는 툴

5) 디자인을 돕는 리소스 모음

6) 흥미로운 프리젠테이션 툴 Prezi

4강 미리보기

Page 3: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

디자이너가 아니어도디자인을 잘하려면

01

Page 4: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

디자이너가 아니어도 디자인을 잘 하려면, 개념 #1

디자인은 [ ]다.정보

Page 5: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

디자인은 [ ]다.소통상대에게 나를 보다 정확히 이해시키는 행위

(c)Vise versa design studio

디자이너가 아니어도 디자인을 잘 하려면, 개념 #2

Page 6: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

디자인은 [ ]다.브랜드단순한 ‘출력’이 아니라 ‘철학’이 흐르게 하는 것

디자이너가 아니어도 디자인을 잘 하려면, 개념 #3

Page 7: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

디자인은 [ ]다.메시징디자인 스스로가 행동을 유도한다

디자이너가 아니어도 디자인을 잘 하려면, 개념 #4

Page 8: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

디자인은 [ ]다.기획의 결과

디자이너가 아니어도 디자인을 잘 하려면, 개념 #5

디자인은 궁극의 결과이다

Page 9: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

좋은 디자인이란.

출처 : 오늘의 유머 “디자이너를 괴롭히는 방법”

Page 10: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

5가지만 기억해요좋은 디자인을 위해

Page 11: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

1. 좋은 데이터를 확보합시다.

- 키워드, 슬로건, 정보

Page 12: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

2. 디자인의 자원(요소)를 챙깁시다.

- texture, photo, icon, illust

Page 13: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

3. 폰트는 정말로 중요합니다.

- 타이포 디자인

Page 14: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

4. 레이아웃이 ‘가독성’의 끝- 정보와 데이터를 조화롭게 배치

Page 15: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

5. 디자인의 완성, 직관과 디테일

- 많이 만들어볼 것, 지인의 10초 안 반응

Page 16: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

Canva, 쉽고 재밌게 콘텐츠 디자인 02

www.canva.com웹포스터, SNS 홍보물, 캠페인에 영감을 주는 디자인까지-

Page 17: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

Facebook 또는 메일로 간단 가입 Social Media (800*800) 클릭

Page 18: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

간단한 메뉴 이미지 파일로 저장이미지 소스를 편집화면으로 드래그

화면을 계속해서 추가할 수 있습니다.리소스는 무료/유료가 있어요

Page 19: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

온라인 포토샵 Pixlr로 이미지 배너 만들기 03

새 이미지 생성 파일명과 넓이, 놃이를 설정, 투명은 체크하지 않습니다.

Page 20: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

꼭 챙길 4가지 도구 1) 배너의 배경 - 현재 색으로 원하는 배경 색깔을 결정한다. 2) 문자 도구 - 텍스트를 입력한다. (ex: 방명록)3) 선택 도구 - 이미지 불러와서 원하는 곳에 배치 4) 레이어 & 이동 도구 - 해당 레이어 선택 후 객체를 이동시키기

Page 21: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

1) 완성된 이미지는 컴퓨터에 저장합니다. 2) 티스토리 비공개글로 이미지 파일을 업로드 합니다.3) 이미지 URL 복사를 합니다.4) 아래의 코드로 배너를 만듭니다.

<a href=”http://이동하고 싶은 URL주소”><img src=”방금 복사한 이미지 URL”></a>

5) 사이드바 > 태그입력기 > 반영

Page 22: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

[미리보는 심화과정]

Header 이미지 로고 넣기 같은 원리로 만들어진 이미지 URL 관리자화면 > 스킨 > HTML/CSS에서 각각 수정하면 적용 가능.

HTML

CSS

[참고] http://itprobono.tistory.com/101

Page 23: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

멋진 디자인을 만드는 툴 04

인포그래픽 : 정보를 디자인하는 방법론

Page 24: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

www.infogr.am (인포그램)

www.piktochart.com (픽토차트)

인포그래픽스 제작 툴

Page 25: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

디자인을 돕는 자료 모음 05

http://www.letscc.net/ http://pixabay.com/

저작권 없이 다양한 이미지 자료를 검색하여 사용할 수 있습니다.

http://publicdomainvectors.org/ https://www.iconfinder.com/

Page 26: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기
Page 27: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기
Page 28: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

www.picmonkey.com

픽머니는 아주 심플한 방식으로 사진을 꾸며주는 툴입니다. 아기자기하고 이쁜 도구들이 많아서 SNS와 블로그에 산뜻한 느낌의 콘텐츠를 올리고 싶을 떄 활용하면 좋은이미지 편집 유틸리티 입니다.

www.prezi.com

프레지는 이미 많은 기획자, 디자이너, 강연 발표자들에게 인정 받고 사랑을 얻은시각 자료 만들기 프로그램의 대명사라 할 수 있겠습니다. 관심있는 이야기소스들을 화면에 배치하고 에니메이션을 돌리면누구나 효과적인 시각 자료 만들기를 이용할 수 있습니다.

Page 29: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

[ ]06흥미로운 프리젠테이션 Prezi

text image video

Page 30: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

프레지가 특별한 이유 프레임 & 패스

Page 31: [IT ProBono@Daum]  4강 시선을 사로잡는 우리 기관 블로그 만들기

본 강의안은 IT ProBono@Daum 워크숍 교재로 제작되었으며,‘저작자(IT ProBono@Daum/SMLab)’을 표시하고비영리/동일조건(변경금지)로 공유가능합니다.

감사합니다. 모든 문의와 의견은,

http://itprobono.tistory.com