Sm lab intensive_04

888 views

Published on

  • Be the first to comment

Sm lab intensive_04

  1. 1. 소셜미디어 제작워크숍SMlab Intensive04:컨텐츠시각화작업 정수현(청어람아카데미SNS프로그래머) SocialJung@gmail.com http://suelog.tistory.com http://facebook.com/movenations twitter@movenations2011 2 15
  2. 2. 지난주에이어 -페이스북플러그인 -게시판iframe코드삽입2011 2 15
  3. 3. FacebookSocialPlugin 1.http://developers.facebook.com/docs/plugins 2.ActivityFeed 3.LikeButton/Box2011 2 15
  4. 4. 블로그에게시판달기 1.게시판계정이있어야한다.(URL제공필수) 2.무료게시판우뜨보드http://wo.to 3.iframe적용(URL바꿔서복사)Cafe게시판 4.예/http://bluezine.tistory.com/1862011 2 15
  5. 5. WebbasedMindmap http://www.lifehack.org/articles/technology/11-free-mind-mapping-applications-web-services.html2011 2 15
  6. 6. SMlab협업 http://www.mindomo.com/edit.htm?m=45dab836a18f42d9b01339178d932d1a2011 2 15
  7. 7. 소셜미디어제작워크숍 Basic교육과정 1주Web2.0Activate,SNS사회적가치,TGIF세팅 2주SNS사회적관계망(유대)만들기,블로그세팅 4주컨텐츠시각화작업(Prezi및인포그라피제작) 3주정보의효과적전달(HTML/에디터사용) 5주“확산”(메타블로그/캐스트/홍보+마케팅) 6주Presentation+Networking 파워블로거가된다는것은?2011 2 15
  8. 8. 오늘의키워드 정보를효과적으로전달하고 컨텐츠를유려하게표현할 웹기반인포그라피만들기2011 2 15
  9. 9. 디자이너는아니지만 컨텐츠를유려하게, 1)웹기반으로인포그라피를제작하기 2)웹기반으로멀티페이지를제작하기2011 2 15
  10. 10. 워크숍 1.Prezi제작하고블로그본문에삽입하기 2.티에디션첫화면기획/구성 3.Wix웹페이지만들어보기 4.마인드맵자료공유하기 5.컨텐츠시각화하는나의인포그라피만들어보기 2011 2 15
  11. 11. 웹기반인포그라피2011 2 15
  12. 12. infography2011 2 15
  13. 13. 2011 2 15
  14. 14. 2011 2 15
  15. 15. 2011 2 15
  16. 16. 2011 2 15
  17. 17. 2011 2 15
  18. 18. 2011 2 15
  19. 19. 2011 2 15
  20. 20. 2011 2 15
  21. 21. 2011 2 15
  22. 22. 2011 2 15
  23. 23. 정보디자인(inforgraphy) Visua l Know Conte (Infor ledge nts matio n)2011 2 15
  24. 24. 정보디자인(inforgraphy) •Timelines Visua •Flowcharts(순서도) l •Annotatedmaps •Graphs •Venndiagrams •Sizecomparisons •Showingfamiliarobjectsor similarsizeorvalue2011 2 15
  25. 25. 타임라인 ‘ ’2011 2 15
  26. 26. FlowChart(순서도)2011 2 15
  27. 27. AnnotatedMap annotated map2011 2 15
  28. 28. 그래프(graph)2011 2 15
  29. 29. Venndiagrams V.D2011 2 15
  30. 30. SizeComparison S.C2011 2 15
  31. 31. 정보디자인유의사항 Keep it simple! Don’t try to do too much in one picture. , Decide on a color scheme. Research some great facts and statistics. , Think of it as a visual essay: ensure your arguments hold and are relevant. Remember that it’s all about quickly conveying the meaning behind complex data. Draw conclusions. . Reference your facts in the infography. . Include your URL so people can be sure who made it.2011 2 15
  32. 32. 정보디자인소스검색어 free icons / 3D icons • texture / line art / circles • typography, alphabet • .png .jpeg .gif .bmp • patterns, brush, grid design • Sketch, drawing, light and shade • tag social media, web2.0, communication, blue ...2011 2 15
  33. 33. 블로그포스팅 스토리텔링의중요성 “읽히는글!”2011 2 15
  34. 34. beautiful blogging ................. http://bloggertip.com/category/Blog/Look2011 2 15
  35. 35. web-presentation2011 2 15
  36. 36. Web-Presentation www.slideshare.com www.scribd.com http://www.wiziq.com2011 2 15
  37. 37. Prezi HappyZooming! www.prezi.com http://www.facebook.com/pezKor2011 2 15
  38. 38. Prezi페이지만들기 1.Prezi제작 2.embed코드복사 3.블로그HTML모드에서삽입2011 2 15
  39. 39. Prezi페이지만들기 1.텍스트입력/resize,rotate,move,zoom 2.이미지불러오기 3.동영상불러오기 4.타임라인만들기 5.Frame으로구분하기 6.path설정하기 7.slideshow 8.embedding블로그2011 2 15
  40. 40. web-imageeditor2011 2 15
  41. 41. 이미지에디터 웹기반에서포토샵기능을구현하는이미지에디터 http://www.pixlr.com2011 2 15
  42. 42. 이미지에디터s http://www.splashup.com/splashup/ http://www.sumopaint.com/app/ http://www.aviary.com/tools/Phoenix http://www.photoshop.com/tools http://pixenate.com/2011 2 15
  43. 43. 네이버포토에디터 이미지보정및편집 http://s.lab.naver.com/pe/2011 2 15
  44. 44. 포토에디터s http://www.lunapic.com/editor/ http://fotoflexer.com/ http://pixer.us/ http://www.picnik.com/ http://www.splashup.com/ http://www.picture2life.com/ http://www.flauntr.com/ http://www.phixr.com/ http://www.improveyourimages.com/2011 2 15
  45. 45. 배너만들기 1.pixlr에서사이즈200px*200px 2.배경화면,텍스트,선 3.이미지 4.저장 5.블로그에업로드및URL복사 6.사이드바에저장 7.입력소스 ahref=”이동하고자하는페이지주소” imgsrc=”이미지URL”/a2011 2 15
  46. 46. web-mediaeditor2011 2 15
  47. 47. 웹기반동영상편집에디터 http://www.hongkiat.com/blog/video-editing-30-free- tools-and-web-services-to-get-things-done/2011 2 15
  48. 48. YouTubeVideoEditor http://www.youtube.com2011 2 15
  49. 49. Vimeo:Peopleconnectingthroughvideo. http://www.vimeo.com2011 2 15
  50. 50. web-flasheditor http://www.flashvortex.com/2011 2 15
  51. 51. font2011 2 15
  52. 52. Font2011 2 15
  53. 53. 티에디션2011 2 15
  54. 54. 2011 2 15
  55. 55. 웹기반멀티페이지2011 2 15
  56. 56. 웹기반멀티페이지 1.웹기반TOOL로이미지,동영상,플래시편집 2.BasicMash-Up 3.웹기반SiteBuilder활용하기2011 2 15
  57. 57. 웹기반SiteBuilder 1.Wix http://www.wix.com 2.CABANOVA http://sitebuilder.cabanova.com/ 3.OMNISTARETOOLS http://www.omnistaretools.com/free-templates2011 2 15
  58. 58. 웹기반SiteBuilder (예)MarxinSoho http://wix.com/suehyun/marxinsoho2011 2 15
  59. 59. http://www.wordle.net2011 2 15
  60. 60. 다음주‘설치형블로그:워드프레스’ 1.무료서버호스팅 2.FTP설치 3.http://cafe.daum.net/socialmedialab/9mOk/232011 2 15

×