{"id":247,"date":"2013-10-25T12:59:28","date_gmt":"2013-10-25T12:59:28","guid":{"rendered":"https:\/\/www.templatemonster.com\/de\/blog\/?p=247"},"modified":"2019-11-28T14:56:03","modified_gmt":"2019-11-28T14:56:03","slug":"layout-der-startseite-gestalten","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/de\/layout-der-startseite-gestalten\/","title":{"rendered":"Layout der Startseite gestalten. Photoshop Tutorial"},"content":{"rendered":"<p>Es ist die erste von zweiteilige Serie \u00fcber <strong> die Gestaltung vom Startseite Layout<\/strong>. Hier erf\u00e4hrst du, wie man nicht nur ein Design Element, sondern ein ganzes Website Design vornimmt. Das Tutorial ist n\u00fctzlich f\u00fcr Photoshop Anf\u00e4nger, besonders f\u00fcr alle, die Photoshop entdecken. Ich bin sicher, Du schaffst alles. Aufgrund der zahlreiche Screenshots und Beschreibungen habe ich dieses Tutorial in zwei Teile geteilt. Den zweiten Teil ver\u00f6ffentliche ich am Montag. Verpasse nicht!<\/p>\n<p>Also\u2026 Bald feiern wir Halloween und wahrscheinlich hast Du schon das <a href=\"https:\/\/www.templatemonster.com\/blog\/de\/halloween-gratis-html5-theme\/\" target=\"_blank\" class=\"broken_link\">gratis HTML Theme<\/a> gesehen und getestet. Falls Du wissen willst, wie wir es gemacht haben, folge die unten angegebenen Schritte.<\/p>\n<p>Achtung, fertig, los!<br \/>\n<!--more--><\/p>\n<p><strong>Schritt 1. <\/strong> Als erstes erstelle ein neues Dokument. Unseres Halloween Startseite Layout hat die Gro\u00dfe <strong>1600x1322px<\/strong>. Jetzt w\u00e4hle die Farbe <strong>#322b36<\/strong> und f\u00fclle den Hintergrund mit ihr.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter\" alt=\"Home Page Layout Photoshop Tutorial\" src=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/Step-1.jpg?9d7bd4\" width=\"600\" height=\"496\" \/><br \/>\n<strong> Schritt 2. <\/strong> Unser Design ist flat. Das hei\u00dft es keine \u00fcberm\u00e4\u00dfig komplizierten Elementen gibt. Flat Design kombiniert die Einfachheit und die M\u00f6glichkeit jedem zufriedenzustellen. Jetzt kannst Du es selber sehen. Erstelle ein neues Layer <strong>Shift+CTRL+N<\/strong>, w\u00e4hle <strong>Rectangular Marquee Tool<\/strong>( Auswahlrechteck) und zeichne dein oberes horizontales Navigationsmen\u00fc. F\u00fclle es mit der Farbe <strong>#fe8c21<\/strong>(<strong>ALT+Backspace<\/strong>).<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter\" alt=\"Home Page Layout Photoshop Tutorial\" src=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/Step-2.jpg?9d7bd4\" width=\"500\" height=\"507\" \/><br \/>\n<strong> Schritt 3. <\/strong> Mit Hilfe vom <strong>Type Tool<\/strong>( Font-Editor) und von<a href=\"http:\/\/www.fontsquirrel.com\/fonts\/marvel\" target=\"_blank\" rel=\"nofollow\">Marvel Schrift<\/a> nenne die Navigation Buttons. Die Farbe <strong>#000000<\/strong>. Marvel Schrift: <strong>regul\u00e4r, scharf, 24pt<\/strong>.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter\" alt=\"Home Page Layout Photoshop Tutorial\" src=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/Step-3a.jpg?9d7bd4\" width=\"346\" height=\"331\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"aligncenter\" alt=\"Home Page Layout Photoshop Tutorial\" src=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/Step-3b.jpg?9d7bd4\" width=\"600\" height=\"55\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"aligncenter\" alt=\"Home Page Layout Photoshop Tutorial\" src=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/Step-3c.jpg?9d7bd4\" width=\"600\" height=\"230\" \/><br \/>\n<strong> Schritt 4. <\/strong> Jetzt zeigen wir das Highlight, was darauf hindeutet, dass das Men\u00fc Button aktiv ist. Mache die gleichen Ma\u00dfnahmen, wie beim <strong>Schritt 2<\/strong>. Erstelle ein neues Layer, w\u00e4hle <strong> Rectangular Marquee Tool<\/strong> und zeichne den Button. F\u00fclle ihn mit der Farbe <strong>#fcb31b<\/strong> (<strong>ALT+Backspace<\/strong>).<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter\" alt=\"Home Page Layout Photoshop Tutorial\" src=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/Step-4.jpg?9d7bd4\" width=\"600\" height=\"258\" \/><strong> Schritt 5.<\/strong> Jetzt zeichne die Suchoption (das gleiche Prinzip wie bei den vorherigen Schritte und auch dieselbe Farbe <strong>#fcb31b<\/strong>). Ich empfehle aber jetzt die Opazit\u00e4t zu ver\u00e4ndern, damit es ein bisschen beschr\u00e4nkt wird. Opazit\u00e4t sollte <strong>79%<\/strong> sein.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" alt=\"Home Page Layout Photoshop Tutorial\" src=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/Step-5.jpg?9d7bd4\" width=\"595\" height=\"154\" \/><br \/>\n<strong> Schritt 6. <\/strong> Mit der rechten Maustaste klicke auf das Layer mit der Suchleiste und w\u00e4hle <strong>Blending Options<\/strong> (F\u00fclloptionen) aus. Geben wir jetzt den Kontur, Farbe <strong>#ff5136<\/strong>. Du sollst die folgende Parameter festlegen:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter\" alt=\"Home Page Layout Photoshop Tutorial\" src=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/Step-6.jpg?9d7bd4\" width=\"600\" height=\"472\" \/><br \/>\n<strong> Schritt 7. <\/strong> F\u00fcge ein <strong>Magnifier Custom Shape<\/strong>, das Du <a href=\"http:\/\/www.shapes4free.com\/photoshop-custom-shapes\/zoom-magnifier-photoshop-shapes\/\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\">hier finden kannst<\/a>. Das Ergebnis sollte so aussehen:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter\" alt=\"Home Page Layout Photoshop Tutorial\" src=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/Step-7.jpg?9d7bd4\" width=\"595\" height=\"154\" \/><br \/>\n<strong> Schritt 8. <\/strong> Unser Header ist fast fertig. Mit Hilfe von Type Tool schreiben wir nun noch \u201cBoo House\u201d mit der Farbe <strong>#fe8c21<\/strong>. <strong>Marvel<\/strong>Schriftart: <strong>regul\u00e4r, kein, 60pt<\/strong>.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter\" alt=\"Home Page Layout Photoshop Tutorial\" src=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/Step-8.jpg?9d7bd4\" width=\"600\" height=\"303\" \/><br \/>\n<strong> Schritt 9<\/strong>. Und jetzt erstelle ein quadratisches Block, wo soll unser <strong>Countdown<\/strong> stehen. Erstelle ein neues Layer, verwende <strong>Rectangular Marquee Tool<\/strong>, Farbe <strong>#8a2680, Opazit\u00e4t 41%<\/strong>.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter\" alt=\"Home Page Layout Photoshop Tutorial\" src=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/Step-9.jpg?9d7bd4\" width=\"600\" height=\"147\" \/><br \/>\n<strong> Schritt 10. Die W\u00f6rter: Tage, Stunden, Minuten werden mit der <strong>Arial<\/strong> Schrift geschrieben: <strong>14pt, scharf, Farbe #d5d5d5.<\/strong>.<\/strong><\/p>\n<p><strong> Schritt 11. Der <strong>jQuery Countdown Timer<\/strong> kannst Du auch aus <a href=\"http:\/\/tutorialzine.com\/2011\/12\/countdown-jquery\/\" target=\"_blank\" rel=\"nofollow\">hier herunterladen<\/a>.<br \/>\nEr ist kostenlos. Du kannst gerne ihn herunterladen. Das Ergebnis sollte so aussehen.<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter\" alt=\"Home Page Layout Photoshop Tutorial\" src=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/Step-11.jpg?9d7bd4\" width=\"600\" height=\"147\" \/><br \/>\n<strong> Schritt 12. <\/strong> Es ist die Zeit die Erstellung vom Inhalts-Teil anzufangen. Ihn machen wir auch mit dem <strong>Rectangular Marquee Tool<\/strong>. Zeichne den Bereich f\u00fcr die Textdarstellung. Erstelle ein neues Layer und f\u00fclle es mit der Farbe <strong>#423d60<\/strong>.<br \/>\n<strong> Schritt 13.<\/strong> Jetzt <strong>erstellen wir noch ein neues Layer<\/strong>. Nehme das <strong>Pencil Tool<\/strong>, lege das Gro\u00dfe auf <strong>1px<\/strong> und zeichne die Linie mit der Farbe <strong>#e85441<\/strong>. Falls Du diese Linie h\u00f6her oder niedriger stehen lassen willst, bewege sie mit dem <strong>Move Tool<\/strong>. Ich empfehle Dir diese Linie auf einem anderen Layer zeichnen, damit Du sie stehen l\u00e4sst, wo Du willst.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter\" alt=\"Home Page Layout Photoshop Tutorial\" src=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/Step-13a.jpg?9d7bd4\" width=\"600\" height=\"401\" \/><br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"aligncenter\" alt=\"Home Page Layout Photoshop Tutorial\" src=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/Step-13b.jpg?9d7bd4\" width=\"345\" height=\"250\" \/><br \/>\n<strong> Schritt 14. <\/strong> Der Inhalt Text hat man mit der <strong>Arial<\/strong> Schrift geschrieben. Schriftfarbe <strong>#d5d5d5<\/strong>, kein, <strong>12pt<\/strong>. Die wichtigste textliche Teile markiere mit der anderen Farbe<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter\" alt=\"Home Page Layout Photoshop Tutorial\" src=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/Step-14.jpg?9d7bd4\" width=\"400\" height=\"215\" \/><br \/>\n<strong> Schritt 15. <\/strong> Ich schlage vor drei Bl\u00f6cke zu darstellen. Das Design ist dasselbe. Die Linien hat man mit den Farben <strong>#e85441, 5b93f2, 738a17<\/strong> gezeichnet. Der Haupttext wird mit der <strong>Arial <\/strong> Schrift geschrieben: <strong>14pt, scharf, Farbe #d5d5d5<\/strong>. Die Schlagzeilen werden mit <strong>Marvel Gr\u00f6\u00dfe 24, regul\u00e4r, scharf, Farbe #fe8c21<\/strong> geschrieben.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter\" alt=\"Home Page Layout Photoshop Tutorial\" src=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/Step-15.jpg?9d7bd4\" width=\"600\" height=\"465\" \/><br \/>\n<strong> Schritt 16. <\/strong> Die verschiedene sch\u00f6ne Halloween Icons warten<a href=\"http:\/\/blog.templatemonster.com\/category\/icons\/\" target=\"_blank\">hier<\/a> auf Dich. Lade die herunter und f\u00fcge die auf neu erstellten Halloween Blog. Mir der gedr\u00fcckten <strong>CTRL+T<\/strong> kannst du ihre Gro\u00dfe \u00e4ndern.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter\" alt=\"Home Page Layout Photoshop Tutorial\" src=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/Step-16.jpg?9d7bd4\" width=\"620\" height=\"\" \/><br \/>\n<strong>Schritt 17.<\/strong> Jetzt lade die <a href=\"http:\/\/animography.net\/products\/typogami\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\">Typogami<\/a> Schriftart, damit wir das Wort \u201cHalloween\u201d schreiben.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter\" alt=\"Designing Home Page Layout Photoshop Tutorial\" src=\"http:\/\/blog.tmimgcdn.com\/wp-content\/uploads\/2013\/10\/result.jpg?9d7bd4\" width=\"480\" height=\"604\" \/><\/p>\n<p class=\"aligncenter\">* * *<\/p>\n<p>Es ist der erste Teil von zweiteiliger Serie. Ich hoffe, dass sie Schritte leicht verst\u00e4ndlichen waren. N\u00e4chste Woche gehen wir weiter mit dem <a href=\"https:\/\/www.templatemonster.com\/blog\/de\/category\/photoshop\/\" target=\"_blank\">Photoshop<\/a> Tutorial. Alles Liebe! Bis zum n\u00e4chsten Mal!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Es ist die erste von zweiteilige Serie \u00fcber die Gestaltung vom Startseite Layout. Hier erf\u00e4hrst du, wie man nicht nur ein Design Element, sondern ein ganzes Website Design vornimmt. Das Tutorial ist n\u00fctzlich f\u00fcr Photoshop Anf\u00e4nger, besonders f\u00fcr alle, die Photoshop entdecken. Ich bin sicher, Du schaffst alles. Aufgrund der zahlreiche Screenshots und Beschreibungen habe [&hellip;]<\/p>\n","protected":false},"author":398561,"featured_media":1861,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[19,10],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Layout der Startseite gestalten. Photoshop Tutorial \u2b50 TemplateMonster Deutscher Blog<\/title>\n<meta name=\"description\" content=\"Es ist die erste von zweiteilige Serie \u00fcber die Gestaltung vom Startseite Layout. Hier erf\u00e4hrst du, wie man nicht nur ein Design Element, sondern ein\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/de\/layout-der-startseite-gestalten\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Layout der Startseite gestalten. Photoshop Tutorial \u2b50 TemplateMonster Deutscher Blog\" \/>\n<meta property=\"og:description\" content=\"Es ist die erste von zweiteilige Serie \u00fcber die Gestaltung vom Startseite Layout. Hier erf\u00e4hrst du, wie man nicht nur ein Design Element, sondern ein\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/de\/layout-der-startseite-gestalten\/\" \/>\n<meta property=\"og:site_name\" content=\"TemplateMonster Deutscher Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/templatemonster.de\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-10-25T12:59:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-28T14:56:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2013\/10\/Designing-Homepage-Layout.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nataly Ohlsen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TM_Deutschland\" \/>\n<meta name=\"twitter:site\" content=\"@TM_Deutschland\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nataly Ohlsen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/de\/layout-der-startseite-gestalten\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/de\/layout-der-startseite-gestalten\/\"},\"author\":{\"name\":\"Nataly Ohlsen\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/2e24c6b22f0b3e2b1320176bd7ab3241\"},\"headline\":\"Layout der Startseite gestalten. Photoshop Tutorial\",\"datePublished\":\"2013-10-25T12:59:28+00:00\",\"dateModified\":\"2019-11-28T14:56:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/de\/layout-der-startseite-gestalten\/\"},\"wordCount\":719,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\"},\"articleSection\":[\"Anleitungen\",\"Photoshop\"],\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/de\/layout-der-startseite-gestalten\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/de\/layout-der-startseite-gestalten\/\",\"url\":\"https:\/\/monsterspost.com\/de\/layout-der-startseite-gestalten\/\",\"name\":\"Layout der Startseite gestalten. Photoshop Tutorial \u2b50 TemplateMonster Deutscher Blog\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#website\"},\"datePublished\":\"2013-10-25T12:59:28+00:00\",\"dateModified\":\"2019-11-28T14:56:03+00:00\",\"description\":\"Es ist die erste von zweiteilige Serie \u00fcber die Gestaltung vom Startseite Layout. Hier erf\u00e4hrst du, wie man nicht nur ein Design Element, sondern ein\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/de\/layout-der-startseite-gestalten\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/de\/layout-der-startseite-gestalten\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/de\/layout-der-startseite-gestalten\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Layout der Startseite gestalten. Photoshop Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/de\/#website\",\"url\":\"https:\/\/monsterspost.com\/de\/\",\"name\":\"TemplateMonster Deutscher Blog\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/de\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/de\/#organization\",\"name\":\"MonsterPost Deutschland\",\"url\":\"https:\/\/monsterspost.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost Deutschland\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/template_monster\/\",\"https:\/\/www.pinterest.com\/templatemonster\/\",\"https:\/\/www.youtube.com\/channel\/UC19iEGcEhlFidO5ruNGE5yg\",\"https:\/\/www.facebook.com\/templatemonster.de\/\",\"https:\/\/twitter.com\/TM_Deutschland\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/2e24c6b22f0b3e2b1320176bd7ab3241\",\"name\":\"Nataly Ohlsen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/monsterspost.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d431cfcfe1189f47cdb7caab1f182151?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d431cfcfe1189f47cdb7caab1f182151?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Nataly Ohlsen\"},\"description\":\"Ist Expertin auf dem Gebiet Content-Marketing bei TemplateMonster. Nataly auf Facebook.\",\"url\":\"https:\/\/monsterspost.com\/de\/author\/nataly\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Layout der Startseite gestalten. Photoshop Tutorial \u2b50 TemplateMonster Deutscher Blog","description":"Es ist die erste von zweiteilige Serie \u00fcber die Gestaltung vom Startseite Layout. Hier erf\u00e4hrst du, wie man nicht nur ein Design Element, sondern ein","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/monsterspost.com\/de\/layout-der-startseite-gestalten\/","og_locale":"de_DE","og_type":"article","og_title":"Layout der Startseite gestalten. Photoshop Tutorial \u2b50 TemplateMonster Deutscher Blog","og_description":"Es ist die erste von zweiteilige Serie \u00fcber die Gestaltung vom Startseite Layout. Hier erf\u00e4hrst du, wie man nicht nur ein Design Element, sondern ein","og_url":"https:\/\/monsterspost.com\/de\/layout-der-startseite-gestalten\/","og_site_name":"TemplateMonster Deutscher Blog","article_publisher":"https:\/\/www.facebook.com\/templatemonster.de\/","article_published_time":"2013-10-25T12:59:28+00:00","article_modified_time":"2019-11-28T14:56:03+00:00","og_image":[{"width":900,"height":600,"url":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2013\/10\/Designing-Homepage-Layout.jpg","type":"image\/jpeg"}],"author":"Nataly Ohlsen","twitter_card":"summary_large_image","twitter_creator":"@TM_Deutschland","twitter_site":"@TM_Deutschland","twitter_misc":{"Verfasst von":"Nataly Ohlsen","Gesch\u00e4tzte Lesezeit":"4 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/de\/layout-der-startseite-gestalten\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/de\/layout-der-startseite-gestalten\/"},"author":{"name":"Nataly Ohlsen","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/2e24c6b22f0b3e2b1320176bd7ab3241"},"headline":"Layout der Startseite gestalten. Photoshop Tutorial","datePublished":"2013-10-25T12:59:28+00:00","dateModified":"2019-11-28T14:56:03+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/de\/layout-der-startseite-gestalten\/"},"wordCount":719,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/de\/#organization"},"articleSection":["Anleitungen","Photoshop"],"inLanguage":"de-DE","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/de\/layout-der-startseite-gestalten\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/de\/layout-der-startseite-gestalten\/","url":"https:\/\/monsterspost.com\/de\/layout-der-startseite-gestalten\/","name":"Layout der Startseite gestalten. Photoshop Tutorial \u2b50 TemplateMonster Deutscher Blog","isPartOf":{"@id":"https:\/\/monsterspost.com\/de\/#website"},"datePublished":"2013-10-25T12:59:28+00:00","dateModified":"2019-11-28T14:56:03+00:00","description":"Es ist die erste von zweiteilige Serie \u00fcber die Gestaltung vom Startseite Layout. Hier erf\u00e4hrst du, wie man nicht nur ein Design Element, sondern ein","breadcrumb":{"@id":"https:\/\/monsterspost.com\/de\/layout-der-startseite-gestalten\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/de\/layout-der-startseite-gestalten\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/de\/layout-der-startseite-gestalten\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/de\/"},{"@type":"ListItem","position":2,"name":"Layout der Startseite gestalten. Photoshop Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/de\/#website","url":"https:\/\/monsterspost.com\/de\/","name":"TemplateMonster Deutscher Blog","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/de\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de-DE"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/de\/#organization","name":"MonsterPost Deutschland","url":"https:\/\/monsterspost.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost Deutschland"},"image":{"@id":"https:\/\/monsterspost.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/template_monster\/","https:\/\/www.pinterest.com\/templatemonster\/","https:\/\/www.youtube.com\/channel\/UC19iEGcEhlFidO5ruNGE5yg","https:\/\/www.facebook.com\/templatemonster.de\/","https:\/\/twitter.com\/TM_Deutschland"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/2e24c6b22f0b3e2b1320176bd7ab3241","name":"Nataly Ohlsen","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/monsterspost.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d431cfcfe1189f47cdb7caab1f182151?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d431cfcfe1189f47cdb7caab1f182151?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Nataly Ohlsen"},"description":"Ist Expertin auf dem Gebiet Content-Marketing bei TemplateMonster. Nataly auf Facebook.","url":"https:\/\/monsterspost.com\/de\/author\/nataly\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/247"}],"collection":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/users\/398561"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/comments?post=247"}],"version-history":[{"count":11,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/247\/revisions"}],"predecessor-version":[{"id":20955,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/posts\/247\/revisions\/20955"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/media\/1861"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/media?parent=247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/categories?post=247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/de\/wp-json\/wp\/v2\/tags?post=247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}