ADOBE MUSE 初 めての Web サイト 制 作
1 A- 100 Photoshop Adobe Muse Adobe Muse Web 1 Muse Katie Web 1. Adobe Muse CC 2. (ZIP 78MB) 3. ZIP Katies Café Building v3 4. Muse 5. Adobe Muse CC OK 1 1. Adobe Muse 6. 9 0 4 0 960 872 2 1
2. HiDPI 2x Muse Web Muse Web Web Web Apple 3 3. 4 2
4. katiescafe katiescafe-final.muse katiescafe.muse.muse Adobe Muse katiescafe-final 7. OK 8. Adobe Muse katiescafe.muse katiescafe Web About Our Mission Our Staff 2 Muse Muse Home Web A- Home 5 + Home food events about visit 5 5 1. Home Home + food 2. food + events events + about Home 1 visit 3
5. 5 5 Control A- 3. + - 6 6. 3 + 7 7. 3 2 Command+7 Mac Control+7 Windows Command+8 Mac Control+8 Windows Command+9 Mac Control+9 Windows 2 Web Muse 4
A- A- Muse HTML JavaScript CSS Web Muse Muse Web 1. A- A- 8 8. A- 0 2. 3. 16 #F5F1EE 9 5
9. 4. 1. 2. color-palette.png 1 3. 10 10. 50 % 1. 2. 11 6
11. 3. OK 4. 1 3 2 5. 2 6. color-palette.png Delete Backspace 100 100 1. 250 2. 0 12 7
12. 3. 100% 100% 4. Photoshop Photoshop Lorem Ipsum 1. 2. 3. 1. 2. Delete Backspace 3. Photoshop banner.psd Photoshop OK 13 8
13. Photoshop 7. 1 Photoshop 8. 14 14. Photoshop 9. Lorem Ipsum DOWNLOAD MENU 10. Web Open Sans Condensed Bold Open Sans Condensed Bold Web Web Web Muse Web Web 9
11. 15 0 24 h2 15 15. 4 12. 13. Escape 14. 4 15. 16. 14 15 17. 16 16. 1. 377 15 10
2. 3. 4. 0 1 17 17. 5. 6. 7. Option Alt 18 18. 2 Twitter Facebook Creative Commons 11
2 Font Awesome Web Muse Web 1 Adobe Muse 1. 2. A- 19 19. 12
Esc 3. 1. 20 20. 22 2. 13
1. 2. 1. Adobe Muse 2. 1 food food 23 3 Esc 1 1 3 Esc 1 1 21 3. 21. 4. 5. 6. 2 14
Web Muse Web Web 1. 2. 3. 4. Web Open Sans Web 5. 12 1 120% 22 22. 1. 2. 3. 23 23. Control 15
HTML 1. Muse Web Webkit 2. A- Font Awesome Font Awesome Web 1. Adobe Muse Font Awesome 2. Font Awesome.mulib 3. 4. 2.mulib 5. FontAwesome 24 24. 6. FontAwesome 7. 8. Facebook Web 9. 25 16
25. Facebook 10. 7 9 Google+ Tumblr Twitter 4 26 26. 4 11. PDF 1. 2. Katie's Cafe Menu.pdf 27 27. PDF 17
KatiesCafeMenu.pdf 1 PDF PDF 3. 4. PDF Web Web 1. Facebook Katie's Cafe Facebook http://www.facebook.com/katiescafesf 2. Google+ Google+ Katie's Cafe https://plus.google.com/u/1/117800212967830061444/posts 3. Tumblr Tumblr Katie's Cafe http://katiessf.tumblr.com 4. Twitter Twitter Katie's Cafe http://twitter.com/katiescafesf 5. Facebook 28 28. 6. 5 Google+ Tumblr Twitter Web Adobe Muse Web mailto: mailto:email@address.com 18
Web URL Muse 1. 29 29. 5 5 Web 2. 30. 19
30. 3 3. 620 px 4. Y 0 px 0 px 1. 2. 31 31. 20
1. 2. 32 32. Web 3 Twitter Facebook Creative Commons 21
3 Interior Landing Adobe Muse Web 2 Muse Font Awesome katiescafe 33 33. 1 22
1. + 2. B- Landing 3. [ ] Landing 34 34. Landing Landing A- Landing Landing Landing Interior Landing Interior Landing Interior 1 3 4. Landing + 3 Interior 5. Interior Interior Interior [ ] [ ] Interior Interior 1. Interior 2. 90 100% 3. 0 4. 5. Interior 6. 2 23
Web Open Sans Condensed Bold 20 0 24 px 24 h2 7. 8. 35 35. Interior 1 Interior 1. Command+D Mac Control+D Windows logo-interior.png OK 2. 1 3. Muse 36 36. Interior 4. Landing Home Landing Interior 24
1. Interior 2. Landing 3. Shift 4 40 4. logo-landing.png OK 5. 1 Interior 1. Landing HOME [ ] [Landing] 1. 2. 100% 3. img-salad-darker.png 37 37. 4. 5. 6. 25
Web Open Sans Condensed Bold 50 Brown 1 48 px h1 Web Gentium Book Basic Bold Italic 16 1 24 px h3 1. 2. KATIE S CAFÉ 3. 4. 2 5. 6. Subhead serif 7. + 1 8. 38 38. 26
2 1. 2. 445 20 9 3. 2 0 4. Option Alt 5. 2 6. Muse 2 2 7. Web Gentium Book Basic 24 3 24 px 8. 2 1. 2. 3. 4. 39 39. 27
3 1. 304 x 304 2. 3. Option Alt Option Alt 2 4. 1 img-coffee.jpg 5. 4 imgbaking.jpg img-dinner.jpg 40 40. 3 3 3 1. 3 Return Enter 2. 3. 4. Gentium Book Basic 16 0 24 px 24 p 28
5. 6. 3 2 Katie s 7. 8. 3 2 9. 4 3 Katie Ricks 10. 11. 2 12. Katie Ricks Web La Belle Aurore 42 0 24 px 6 13. 77 Katie's Café Katie's 2006 Noe Valley Katie Ricks 2007 Noe Katie's 2008 Katie's Laurel Heights 3 Cole Valley 2011 Katie's Café Katie's 1 Katie's Café SF 2010 Katie's No Fear: The Culinary Travels of Andrew Bourdin Andrew Abomination 29
Unto the Lord Cake 1. 3 100% 2. img-cupcakes.jpg 3. 4. 100% 1214 5. 1. KATIE S CAFÉ 2. Option Alt KATIE S CAFÉ 3. 4. 450 x 300 img-cookie.jpg 5. 6. 450 1. 2. 1. 450 1. 2. 1. 450 2. img-breakfast.jpg 3. 4. FontAwesome 5. 41 41. Font Awesome 6. 42 30
42. 7. 8. 4 2 Twitter Facebook Creative Commons 31
4 Menu 5 Muse Web 3 Muse Edge Animate 1. 2. 43 2 0 0 px 0.5 0 43. 0 0.5 0.5 32
0.5 1114 px 0.5 0.5 3. 4. Muse 5. 44 44. 6. 100% 7. Muse X 1. 2. 3. & 4. 5. & 2 6. 33
1. 2. 5 3. 45 45. 4. [ ] 5. 2 1 6. + 7. 6 3 8. 1 9. 4 0 2 10. 11. Open Sans 16 0 + 12. 9 13. 52 34
5 100% 5 5 1. 46 46. 2. 1 3. 303 47 47. 4. 4 1255 px 1731 px 2798 px 3200 px Y 100 100 35
1. 2 2. 48 48. 3. 2 4 4. 2 5. Muse Menu Menu 5 100% 1. 52 2. img-breakfast.jpg 3. 100% 267 4. 5. FontAwesome 6. 7. 8. 36
9. 600 Y 4 X 10. Shift Shift Option Alt 2 11. 1205 img-lunch.jpg 12. 10 11 1977 img-dinner.jpg 13. 10 11 img-dessert.jpg Y 2748 14. img-drinks.jpg Y 3446 2 The Spike $9 The Dazzler $7 The Nessie $8 2 1. breakfast1.txt 2. 1 3. subhead serif 4. 4 5. 1 4 breakfast2.txt 4 6. lunch1.txt lunch2.txt 2 2 7. 100% 267 1,300 1. 49 37
0.5x 0x 440 px T 0.5x 0x 49. 2. 1205 px 0.5x 0x 3. 2 1977 px 4. 2 2748 px 3446 5. Adobe Muse 1 0% 5 px 0% 252 px 2 100% 252 px 1. 2. Option Alt 3. Y 92 4. 2 5. 50 38
50. T 1 2 252 0% 6. 51 45 1160 X -100 Y 87 100% 51. 100% 1. 1 0% 5 px 0% 252 px 2 100% 252 px 2. Adobe Muse Web HTML 39
Twitter Facebook Creative Commons 40
5 Muse HTML Muse Web 4 5 Muse HTML Tumblr 1. 2. 3. 4. 2 2006 Katie s Café Katie Ricks 5. 3 6. 7. 8. 3 2 52 52. 41
1. gallery-1.jpg gallery-2.jpg gallery-3.jpg gallery-9.jpg 4 4 2. 16 330 x 220 3. 2 3 Muse 4 220 x 220 1. gallery-1.jpg 2. 1 3. 220 53 53. 4. 1 2 220 gallery-2.jpg gallery-3.jpg gallery-9.jpg 5. 4 54 42
54. 4 1. gallery-4.jpg 38% 464 x 512 2. gallery-5.jpg 24% 264 x 246 gallery-4.jpg 3. gallery-6.jpg 50% 953 x 516 4. gallery-7.jpg 50% 464 x 342 5. gallery-8.jpg 23% 464 x 310 55 43
55. gallery-5.jpg 1. 464 x 242 2. 3. 2 4. Gallery-fullscreen 56 44
56. 5. 6. 7. HiDPI 2x HiDPI 2 retina 8. OK 9. Gallery-fullscreen 100% 0.5 3 1 45
1. Gallery-fullscreen 2. 3. 4. 5. 58 46
58. 6. gallery- 1.jpg gallery-2.jpg gallery-3.jpg gallery-4.jpg gallery-5.jpg gallery-6.jpg gallery-7.jpg gallery-8.jpg 8 7. 8. 8 3 9. 10. 40 75% 1. 2. 100% 0 3. 77 0 4. 47
5. 6. Katie's Café 7. 59 59. 18. 19. Adobe Muse Gallery-fullscreen Tumblr 1. 2. 3. KATIE S header 48
4. 5. 2 60 60. Muse HTML HTML Web Google Maps YouTube SoundCloud Flickr Picasa Web HTML HTML Tumblr.com HTML Tumblr 1. Tumblr Tumblr Web <iframe src="http://katiessf.tumblr.com/" width="916" height="3500" marginwidth="0" marginheight="0" frameborder="no" scrolling="no" style="border:0px;"></iframe> 2. 3. HTML HTML OK HTML HTML Katie's Cafe Tumblr 4. 61 49
61. Tumblr HTML Muse HTML HTML HTML HTML 62 62. HTML 6. Interior HTML Tumblr 6 Google Map Twitter Facebook Creative Commons 50
6 HTML Google Muse Web 5 HTML Google HTML Google Google HTML HTML Web 1. 2. Google <iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms? ie=utf8&hl=en&msa=0&msid=218302982680021663941.00049fcd9cf93276f540e&ll=37.7737,- 122.43782&spn=0.067844,0.098877&z=12&output=embed"> </iframe> 1 3 Katie s Café 3. HTML 63 63. Google 51
4. 5. 6. While each of our bakeries embodies the unique attributes of its neighborhood, they are all bound together by Katie's impeccable attention to detail, commitment to service, and, above all, enjoyment of good food. 7. 8. Option Alt 9. 10. 11. 3 2 12. 64 64. Google HTML Google + - 13. Muse 1. about 2. 3. 59 Web 52
1. 2. 65 65. 3. 1. 2. 4 66 66. 53
3. 67 67. 2 3 BC CAPTCHA Web + 54
1. 2. 68 68. 3. 2 4. 1. 69 55
69. 2. 1 3. 4. subhead serif Book Basic 7 5. 2 4 6. 7. 6 8. 1. 2. 3. 4. 5. 0 56
1. 2. 3 Katie s Café 1. KATIE'S CAFE NOE VALLEY 123 ELIZABETH STREET 06:00 22:00 07:00 22:00 2. 2 16 0 3. 4. Option Alt KATIE'S CAFE COLE VALLEY 301 CARMEL STREET 07:00 22:00 09:00 22:00 5. 2 3 KATIE'S CAFE LAUREL HIEGHTS 800 SPRUCE STREET 05:00 22:00 07:00 22:00 6. 3 30 Adobe Muse 3 HIEGHTS 70 57
70. 1. 2. Return/Enter HEIGHTS OK 71 58
71. 72 59
72. URL Photoshop Illustrator 1. 2. favicon.png 73 60
73. favicon.png 3. OK 4. Adobe Muse Adobe ID Muse 1. URL 74 74. URL 2. OK 61
3. 4. Muse OK URL http://my-new-website.businesscatalyst.com URL.muse Web Adobe Muse Adobe Muse Adobe Muse Twitter Facebook Creative Commons 62