{"id":97,"date":"2018-03-18T16:17:22","date_gmt":"2018-03-18T15:17:22","guid":{"rendered":"http:\/\/test.ekiwi.de\/?p=97"},"modified":"2018-03-18T16:17:55","modified_gmt":"2018-03-18T15:17:55","slug":"97","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/97\/97\/","title":{"rendered":"Photoshop: Slicing eines Webtemplates"},"content":{"rendered":"<p>Dieser Workshop beschreibt die Slice Funktion f\u00fcr den Export eines Designs ins HTML-Format. Der Workshop wurde in <strong>Photoshop<\/strong> und <strong>Dreamweaver<\/strong> erstellt, funktioniert aber auch in \u00e4lteren Photoshop Versionen und anderen HTML-Editoren.<\/p>\n<p><!--more--><\/p>\n<h2>Was ist Slicen?<\/h2>\n<p>Beim Slicen wird das Bild in Photoshop einzelne Bestandteile zerschnitten. So kann man z.B. die Buttons einer Navigationsleiste in einzelne Bilder unterteilen und entsprechend verlinkt werden. Anschlie\u00dfend erfolgt der Export ins HTML-Format f\u00fcr die Weiterbearbeitung der Webseite in einem HTML-Editor.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-98\" src=\"\/wp-content\/uploads\/2018\/03\/design.jpg\" alt=\"\" width=\"360\" height=\"300\" srcset=\"\/wp-content\/uploads\/2018\/03\/design.jpg 360w, \/wp-content\/uploads\/2018\/03\/design-300x250.jpg 300w\" sizes=\"auto, (max-width: 360px) 100vw, 360px\" \/><\/p>\n<p>Nachdem Sie die Bearbeitung des Designs nach Ihren W\u00fcnschen abgeschlossen haben, w\u00e4hlen Sie in Photoshop das Slice-Tools aus der Toolbar aus.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-102\" src=\"\/wp-content\/uploads\/2018\/03\/slicetool.png\" alt=\"\" width=\"77\" height=\"148\"><\/p>\n<p>Mit dem Slice-Tool k\u00f6nnen Sie nun das Design in rechteckige Bereiche unterteilen, die sogenannten Slices. Jedes Slice wird beim Exportieren im HTML-Format ein extra Bild werden. Definieren Sie die Slices so, dass Buttons jeweils ein Slice sind und das Bereiche die Sie sp\u00e4ter im HTML-Editor mit Text f\u00fcllen wollen entsprechend geslict sind.<\/p>\n<p>Das Ergebnis sollte dann in etwa so ausschauen:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-103\" src=\"\/wp-content\/uploads\/2018\/03\/slicing1.jpg\" alt=\"\" width=\"400\" height=\"245\" srcset=\"\/wp-content\/uploads\/2018\/03\/slicing1.jpg 400w, \/wp-content\/uploads\/2018\/03\/slicing1-300x184.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/p>\n<p>Gehen Sie nun im Men\u00fc &#8222;Datei&#8220; auf &#8222;F\u00fcr Web speichern&#8220;. Im erscheinenden Dialog werden nun die Optimierungseinstellungen f\u00fcr die einzelnen Slices vorgenommen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-100\" src=\"\/wp-content\/uploads\/2018\/03\/opt.jpg\" alt=\"\" width=\"525\" height=\"179\" srcset=\"\/wp-content\/uploads\/2018\/03\/opt.jpg 525w, \/wp-content\/uploads\/2018\/03\/opt-300x102.jpg 300w\" sizes=\"auto, (max-width: 525px) 100vw, 525px\" \/><\/p>\n<p>Sie k\u00f6nnen jedes Slice unabh\u00e4ngig voneinander als JPG\/GIF oder PNG Grafik optimieren. W\u00e4hlen Sie die Einstellungen f\u00fcr jedes Slice, welches die beste Bildqualit\u00e4t und Ladezeit bietet. Haupts\u00e4chlich einfarbige Regionen sollten als GIF oder PNG abgespeichert werden, Fotos als JPG.<\/p>\n<p>Nach dem alle Einstellungen f\u00fcr Slices vorgenommen w\u00fcrden, gehen Sie auf den Button &#8222;Speichern&#8220;. W\u00e4hlen Sie bei Dateityp die Option &#8222;HTML und Bilder&#8220;.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-101\" src=\"\/wp-content\/uploads\/2018\/03\/save.jpg\" alt=\"\" width=\"458\" height=\"119\" srcset=\"\/wp-content\/uploads\/2018\/03\/save.jpg 458w, \/wp-content\/uploads\/2018\/03\/save-300x78.jpg 300w\" sizes=\"auto, (max-width: 458px) 100vw, 458px\" \/><\/p>\n<p>Nach dem Speichern liegen eine HTML-Datei und die einzelnen Slices als Bilder vor. Diese HTML kann nun mit einem HTML-Editor bearbeitet werden:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-99\" src=\"\/wp-content\/uploads\/2018\/03\/dw.jpg\" alt=\"\" width=\"550\" height=\"546\" srcset=\"\/wp-content\/uploads\/2018\/03\/dw.jpg 550w, \/wp-content\/uploads\/2018\/03\/dw-150x150.jpg 150w, \/wp-content\/uploads\/2018\/03\/dw-300x298.jpg 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/p>\n<p>Im HTML-Editor k\u00f6nnen nun die Buttons verlinkt werden. Um im Hauptteil Text unterzubringen, wird das Bild aus der Tabellen-Zelle entfernt. Stattdessen k\u00f6nnen nun Inhalte eingef\u00fcgt werden. Um im News-Teil Inhalte einzuf\u00fcgen wird das Bild entfernt, gleichzeitig aber als Hintergrundbild in der Tabellen-Zelle eingef\u00fcgt.<\/p>\n<p>Mehrere Seiten k\u00f6nnen angelegt werden, indem die HTML-Datei kopiert wird. Viele HTML-Editoren bieten zudem M\u00f6glichkeiten eine HTML-Datei als Template zu benutzen.<\/p>\n<p><a class=\"fasc-button fasc-size-medium fasc-type-flat fasc-ico-before dashicons-admin-site\" style=\"background-color: #33809e; color: #ffffff;\" href=\"\/wp-custom\/slicing\/design.zip\">Download des Beispiels<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Dieser Workshop beschreibt die Slice Funktion f\u00fcr den Export eines Designs ins HTML-Format. Der Workshop wurde in Photoshop und Dreamweaver<\/p>\n","protected":false},"author":1,"featured_media":106,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[8],"tags":[19,23],"class_list":["post-97","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-grafik","tag-grafik","tag-photoshop"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/97","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=97"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/97\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/106"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=97"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=97"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=97"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}