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

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

Embed Size (px)

DESCRIPTION

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

Citation preview

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