Die Gestaltung einer babyorientierten Website ist keine leichte Aufgabe, insbesondere für Menschen wie mich, die in ihren Entwürfen normalerweise männliche Themen, Farben und Texturen bevorzugen. Heute werden wir diese Aufgabe direkt angehen, indem wir eine unterhaltsame und einzigartige Website für Babyansagen erstellen, die alles andere als typisch ist.
Fühlen Sie sich frei, die PSD herunterzuladen, und schauen Sie sich die PSD an, damit Sie sich umsehen oder sie auf Ihrer eigenen Website verwenden können.
Das Projekt
Laden Sie die geschichtete PSD herunter
Jeder Leser von Design Shack kann sich kostenlos als Mitglied anmelden. Einer der Vorteile der Mitgliedschaft ist, dass Sie Ihre "Design Dilemmas" einreichen können. und erhalten Sie kostenlose Hilfe von Design Shack! Wenn wir glauben, dass Ihr Dilemma für unser Publikum relevant ist, werden wir es in einen Artikel umwandeln, genau wie diesen.
Wir haben kürzlich eine Vorlage von Jonathan Jose erhalten, der sich derzeit sehr darauf freut, bald Vater zu werden. So aufgeregt, dass er eine Website einrichten möchte, auf der er den Namen seines Babys erraten und $ 100 gewinnen kann! Jonathan klingt wie er weiß, wie man die Site in WordPress einrichtet, braucht aber Hilfe beim eigentlichen Design.
Nun, Sie haben Glück, Jonathan, denn genau aus diesem Grund haben wir das Design Dilemma-Programm entwickelt. Lass uns anfangen!
Entwerfen für Babys
Zu lernen, wie Sie Ihre Designs richtig ausrichten, ist eine wichtige Fähigkeit. Wenn Sie Ihr Publikum nicht richtig einschätzen, kann Ihr Design leicht völlig wirkungslos werden. Zum Beispiel möchte Ihr typischer Nagelstudio wahrscheinlich keine Website, die genau wie eine lokale Biker-Bar aussieht.
In diesem Sinne denken Sie vielleicht, dass unser Projekt in etwa so aussehen muss:
Es ist definitiv wahr, dass dieses Design für seinen Zweck richtig ist. Für den Anfang ist die Mutter normalerweise die Person, auf die Websites wie die oben genannte ausgerichtet sind. Wenn Sie das Konzept von Babys und Müttern kombinieren, erhalten Sie normalerweise viel feminines Design mit Pastellfarben, kindgerechten Grafiken usw.
Im Gegensatz dazu handelt es sich bei unserer Website wirklich nur um einen stolzen Vater, der seine Aufregung mit seinen Freunden teilen möchte. Daher können wir dies als eine Gelegenheit nutzen, um Ihrem typischen Baby-Thema auf den Kopf zu stellen, indem Sie etwas Retro- und Grunge-Elemente kreieren. Es ist immer noch offensichtlich, dass es sich bei der Website um ein Baby handelt. Wir werden nur absichtlich von gängigen Themen abweichen, die in Designs wie dem oben genannten gefunden wurden.
Schritt 1: Hintergrund & Textur
Erstellen Sie zunächst ein 1200 x 1200 Pixel großes Photoshop-Dokument mit 72 dpi. Als nächstes füllen Sie es mit # 55b06f. Erstellen Sie nun eine neue Ebene darüber, füllen Sie sie mit Weiß und gehen Sie zu Filter> Rauschen hinzufügen mit den Einstellungen unten.
Beachten Sie, dass wir gegangen sind? Monochromatisch? ungeprüft Nach einigem Experimentieren schien dies die schönste Ausbreitung des Geräusches zu erzeugen, also ging ich mit und entsättigte die Ebene (Command-Shift-U). Setzen Sie schließlich die Ebene auf Color Burn und reduzieren Sie die Füllung (nicht die Deckkraft) auf 53%.
Schritt 2: Die Überschrift
Sobald Sie alles vorbereitet haben, laden Sie Chunk Five und Museo aus dem gestrigen Artikel 12 stilvolle und kostenlose Slab Serif-Schriften herunter.
Verwenden Sie diese beiden Schriftarten zusammen, um eine schöne typografische Überschrift wie die unten stehende zu erstellen. Beachten Sie, dass ich hier verschiedene Design-Tools verwendet habe. Erstens habe ich sowohl die Größe als auch die Kühnheit des Typs erheblich variiert, um Variationen hinzuzufügen und die wichtigen Teile hervorzuheben. Als nächstes wurde ich mit dem Stapeln ein wenig kreativ, so dass die Überschrift den horizontalen Raum schön ausfüllte.
Nun, da wir die Überschrift so gestaltet haben, wie wir es wollen, lassen Sie uns etwas von dieser Hintergrundtextur zeigen. Ändern Sie den Mischmodus in "Farbe brennen" und die Deckkraft in 62%.
Schritt 3: Das Foto
Als Nächstes fügen wir ein Foto hinzu, um der Seite Leben und Humor zu verleihen. Da das Baby noch nicht geboren ist, müssen wir natürlich mit der Mutter gehen. Da ich eigentlich keine Fotos von der werdenden Mutter habe, habe ich auf Flickr ein lustiges Foto gefunden, das einfach perfekt für dieses Projekt ist.
Nun werden Sie feststellen, dass das Foto nicht ganz zur Site passt, wenn wir es einfach dort werfen. Um dieses Problem zu beheben, habe ich eine Fotofilter-Einstellungsebene erstellt und einen Wärmefilter angewendet.
Schließlich habe ich einen verzerrten Schatten erstellt und dem Foto hinzugefügt. Dieser Prozess ist ziemlich einfach. Sie erstellen einfach einen Schatteneffekt, klicken Sie mit der rechten Maustaste auf den Effekt und wählen Sie "Ebene erstellen". Verwenden Sie dann das Warp-Werkzeug, um einen Bogen am unteren Rand der Schattenebene hinzuzufügen.
Als letzten Schritt zum Abschluß des Retro-Effekts, den wir hier anbieten, habe ich einige ausgezeichnete, subtile kostenlose Grunge-Pinsel heruntergeladen und den Text und das Foto mit einem gewissen Alterungsprozess versehen.
Schritt 4: Bär, Sterne und Text
Nur so können Sie sehen, wohin wir gehen, hier ist das fertige Produkt dieses Schrittes:
Wie Sie sehen, entwickelt sich daraus eine Art altes Boxposter-Thema. Ich lasse Sie die Sterne selbst handhaben, schnappen Sie sich einfach das Photoshop-Formwerkzeug, zeichnen Sie einen Stern und duplizieren Sie ihn mehrmals.
Ebenso ist der Text ziemlich einfach: Erstellen Sie einfach ein Absatzfeld und geben Sie einen Typ ein. Der Bär ist jedoch etwas komplizierter. Ich wollte ein einfaches grafisches Element, wollte mir aber nicht die Zeit nehmen, eines zu zeichnen, also beschloss ich, das Foto unten zu manipulieren.
Wenden Sie zunächst den Photoshop-Filter "Zerrissene Kanten" mit den folgenden Einstellungen an. Bildbalance: 33, Glätte: 13 und Kontrast: 10. Daraufhin sollten Sie etwas wie das Bild unten sehen:
Nun zum kniffligen Teil. Sie haben ein Schwarzweißbild, möchten jedoch nur die schwarzen Pixel auf die Website übertragen und einen transparenten Hintergrund hinterlassen. Es gibt unzählige Möglichkeiten, dies zu tun, aber eine der einfachsten, die ich gefunden habe, ist das Klicken auf den blauen Kanal, um eine Auswahl zu erstellen. Umkehren Sie dann Ihre Auswahl mit Befehl-Umschalt-I. Drücken Sie schließlich die Befehlstaste-J, um die Auswahl in eine neue Ebene zu kopieren.
Sie können diese Ebene dann nehmen und positionieren, eine Farbüberlagerung vornehmen und alles tun, was Sie möchten!
Schritt 5: Die Blöcke
Da das Ziel des Spiels darin besteht, den Namen des Babys zu erraten, dachte ich, dass es eine gute Idee sein könnte, die Optionen einzugrenzen (offensichtlich würde dies die Chancen erhöhen, dass Sie tatsächlich jemanden bezahlen müssen). Als Teil des Spiels könnten Sie jeden Monat einen einzelnen Buchstaben des Namens des Babys verraten, der jedoch viele Monate nach der Geburt beginnt, da der Name des Kindes Buchstaben enthält.
Wenn der Name beispielsweise fünf Würfe enthält, würden Sie den ersten Buchstaben fünf Monate nach dem Fälligkeitsdatum offenbaren. Die Art und Weise, wie ich diesen Aspekt des Spiels vorstellte, ist durch die Formblöcke unten. Die Monde und Sterne repräsentieren Buchstaben, die noch nicht enthüllt wurden. Jeder Mond oder Stern wird dann zu einem bestimmten Monat zu einem Buchstaben.
Das fertige Produkt
Wie Sie unten sehen können, entschied ich mich, die Blockidee in einem vertikalen Streifen zu implementieren, und beendete die Website mit einem Bereich für die Kommentare. Ich habe auch ein wenig mehr Farbvariationen hinzugefügt, damit die Blöcke nicht unpassend wirken.
Und damit sind wir alle fertig! Wie versprochen, ist das Endprodukt nichts im Vergleich zu einer durchschnittlichen Baby-Website und schafft einen großartigen Raum für den Wettbewerb. Als Bonus ist das Design so vielseitig, dass Sie es beliebig ändern können.
Fazit
Ziel dieser Übung war es, ein Designprojekt in eine völlig unerwartete Richtung zu bringen. Dies ist eine großartige Übung, die Ihre Gestaltungsmöglichkeiten wirklich öffnet, wenn sie regelmäßig geübt wird. Denken Sie nur daran, für wen das Projekt letztendlich bestimmt ist und wie Sie diesen Kunden auf interessante Weise ansprechen können.
Hinterlasse einen Kommentar und lass uns wissen, was du denkst! Wenn Sie großartige Baby-Websites, Logos oder andere Elemente entworfen haben, lassen Sie unten einen Link, damit wir einen Blick darauf werfen können.