Workshop Designentwurf mit Paint.net

Für einfache Entwürfe von Designs/Layouts für eine Homepage ist Paint.net durchaus geeignet.
Natürlich nicht unbedingt für Firmen - aber für Privatleute kann man damit ein brauchbares Design entwickeln.
Sehr sauber funktioniert dieses Programm mit Windows 7 RC.

Erstens: die Vorbereitung (Hintergrund erstellen und Behelfsfelder anlegen)

Screenshot 01 - neue Datei öffnen

Nach dem Du Paint.net geöffnet hast gehst Du über den Kartenreiter "Datei" zum Menüpunkt "Neu ..." und klickst auf diesen mit der linken Maustaste.
Screenshot 02 - Bildgröße festlegen

In dem nun aufgehenden Menüfeld legst Du die Bildgröße fest. Da wir einen Designentwurf machen möchten gehen wir von einer minimalen Bildauflösung von 1024 mal 768 Pixel aus. Die Scrollleiste der Browser liegt bei einer Breite von etwa 24 bis 36 Pixel, welche wir von der Gesamtauflösung abziehen und kommen so auf Bildauflösung von 988 mal 768 Pixel (px). Abschließend klickst Du auf "OK" und übernimmst so diese Einstellungen.
Screenshot 03 - Farben bearbeiten

Der absolute weiße Hintergrund wird Dir sicherlich nicht gefallen, um dies zu ändern gehst Du jetzt ins Feld "Farben" auf den Button "Mehr >>" und klickst diesen an.
Screenshot 04 - Farbwerte bestimmen

Für die Einstellung der Farben gibt es verschiedene Möglichkeiten - am schnellsten geht es mit einem Linksklick in eine Farbe im Kreis und weiter bearbeiten mit den Schiebereglern. Wenn Du eine für Dich passende Farbe gefunden hast gehst Du zum Farbeimer (Farbfüllelement) in den Tools.
 
Screenshot 05 - Hintergrundfarbe ändern

Klicke jetzt einfach auf den Farbeimer, gehe mit ihm in das noch weiße Feld und klickst hier einfach noch einmal mit Links und das Feld ist jetzt mit Deiner Farbe gefüllt (in meinem Fall BLAU).
Screenshot 06 - Hintergrundfarbe mit Effekten belegen

Einfarbiger Hintergrund ist Dir zu schlicht - um dies zu ändern gibt es die "Effekte", welche Du im gleichnamigen Kartenreiter findest. In dem Untermenü findest Du einige Auswahlmöglichkeiten - meine Entscheidung viel hier auf "Wiedergabe -> Wolken". Ausgewählt wird der jeweilige Effekt mit dem Anklicken.
Screenshot 07 - der Effekt "Wolken"

Im Menü des Wolkeneffektes findest Du die Regler und Auswahlfelder um den Effekt zu bearbeiten. Änderung werden sofort im Bild angezeigt. Auch die Änderung am Blendeffekt wirkt sich sofort aus.
Screenshot 08 - den Effekt "Wolken" bearbeitet

Nach dem Du den für Dich schönsten Wert für alles gefunden hast klickst Du einfach auf "OK" und hast alles übernommen.
 
Screenshot 09 - neue Ebene erstellen

Um weiter am Design arbeiten zu können benötigen wir als nächstes eine neue Ebene um Fehler einfacher Rückgängig machen zu können. Eine neue Ebene erstellst Du im Feld "Ebenen" in dem Du unten links auf das Dokument mit dem Plus klickst.
Screenshot 10 - das Logo und Bannerfeld vorbereiten (Behelfsfeld)

Diese Ebene nutzen wir nun um ein Behelfsfeld zu erstellen, dazu gehst Du mit der Maus zu den Tools, klickst hier auf "Markieren" und gehst weiter zu den nun sich öffnenden Feldern. Hier stellst Du jetzt um auf "Feste Größe" die Feldangaben Breite 988*, Höhe 140* und ganz wichtig: Pixel! Nach dem Du alles so eingestellt hast gehst Du mit der Maus in den Hintergrund, klickst mit der linken Maustaste, hälst diese gedrückt und ziehst sie jetzt nach oben Links genau in die Ecke. (* = andere Werte möglich)
Screenshot 11 - Farbwerte ändern

Um die Felder farbig etwas abzusetzen wählen wir als Nächstes im Feld "Farben" eine andere Farbe aus.
Screenshot 12 - Feld mit andere Farbe füllen

Wenn Du einen passende andere Farbe eingestellt hast, dann gehst Du wieder zu den Tools und hier zum Farbeimer, klickst diesen an, gehst weiter in das markierte Feld, klickst nun noch einmal auf die linke Maustaste und das Feld ist mit der anderen Farbe gefüllt (in meinem Fall mit ROT).
 
Screenshot 13 - Deckkraft ändern

Da ein Behelfsfeld nicht die volle Deckkraft benötigt müssen wir dies noch ändern. Dazu gehst Du über den Kartenreiter "Ebenen" zum Menüpunkt "Layereigenschaften ..."
Screenshot 14 - Logo und Bannerfeld

In dem nun geöffneten Menü vergibst Du als Namen am Besten "Logo und Bannerfeld", stellst anschließend die Deckkraft kleiner und übernimmst alles mit einen Klick auf "OK".
Screenshot 15 - Logo und Linkfeld (Behelfsfeld)

Als nächstes benötigen wir noch ein Behelfsfeld für Logo und Links. Dazu müssen wir wieder eine neue Ebene im Feld "Ebenen" erstellen.
Screenshot 16 - Logo und Linkfeld erstellen

Die Vorgehensweise ist gleich der dem Logo und Bannerfeld - Farbe auswählen, Markierwerkzeug anklicken, "Feste Größe" und "pixel" einstellen, jetzt aber Breite 210* und Höhe 768* auswählen. (* = andere Werte möglich)
 
Screenshot 17 - Farbe ändern

Jetzt musst Du wieder eine Farbe auswählen oder nimmst noch einmal die Gleiche - anschließend den Farbeimer anklicken, ins markierte Feld gehen und nochmal klicken.
Screenshot 18 - Name und Deckkraft ändern

Auch hier ist wieder die Deckkraft zu hoch, also wieder über den Kartenreiter "Ebenen" zu den Layereigenschaften gehen.
Screenshot 19 - Änderungen übernehmen

Für dieses Behelfsfeld vergibst Du den Namen "Logo und Linkfeld", stellst die Deckkraft herunter und übernimmst wieder alles mit einem Klick auf "OK".
Screenshot 20 - nächste Ebene: Logo

In dem so vorbereiteten Entwurf siehst Du nun schon Felder für das Banner, das Logo, die Links und das Textfeld. Also erstellen wir als nächstes das Logo und brauchen dazu wieder eine neue Ebene welche Du wieder im Feld "Ebenen" erstellst.

Zweitens: Logo, Banner und Textfeld

Screenshot 21 - Ein Logo einbauen

Ein Logo ist ein Erkennungszeichen und in unserem Fall nehmen wir einen Text. Um diesen gleich in einer passenden Farbe zu schreiben wählst Du diese zuerst im Feld "Farben" aus, gehst dann auf den Textbutton in den Tools und stellst Schriftart, Größe ... ein, klickst danach in das Logofeld und schreibst den gewünschten Text.
Screenshot 22 - Position ändern

Da Du sicherlich mit dem ins Feld klicken nicht gleich die richtige Position des Textes hast gehst Du jetzt wieder in die Tools und klickst das Verschiebewerkzeug an und verschiebst den Text an die gewünschte Position.
Screenshot 23 - Datei öffnen

Als nächstes wollen wir ein Banner einbauen - dazu benötigen wir ein Bild. Um ein Bild in Paint.net zu laden klickst Du den Kartenreiter "Datei" an und danach "Öffnen ...".
Screenshot 24 - Datei auswählen

In dem sich nun öffnenden Menü suchst Du nach Deinem Bilderordner und klickst das gewünschte Bild an, woraufhin es farbig hinterlegt ist. Jetzt noch auf "Öffnen" klicken und das Bild ist im Programm geöffnet.
 
Screenshot 25 - Umschaltfenster

Oben rechts im Programm Paint.net siehst Du die beiden Bilder welche geöffnet sind - mit dem Anklicken der jeweiligen Bilder wird auch das große Bild dazu angezeigt.
Screenshot 26 - Vorbereitung für das Banner

Für ein Banner benötigen wir nicht das gesamte Bild sondern nur einen Ausschnitt. Also gehen wir wieder in die Tools, klicken auf das Markierwerkzeug, stellen wieder die "Feste Größe" und für die Bannermaße eine Breite von 728 und eine Höhe von 90 Pixel ein.
Screenshot 27 - Bildausschnitt suchen

Jetzt klickst Du in das Bild und ziehst mit gedrückter Maustaste das Feld in den gewünschten Abschnitt.
Screenshot 28 - Bildausschnitt kopieren

Um den gewünschten Bildausschnitt zu kopieren klickst Du jetzt auf den Kartenreiter "Bearbeiten" und im Menüfeld auf "Kopieren".
 
Screenshot 29 - Bildausschnitt einfügen

Deinen gewählten Bildausschnitt fügst Du in den Entwurf ein, in dem Du auf den Entwurf oben Rechts (Bildauswahl) klickst, so dass der Entwurf wieder sichtbar ist. Nun klickst Du wieder auf den Kartenreiter "Bearbeiten" und hier im Menüfeld auf "Einfügen" und der Bildausschnitt ist im Entwurf eingefügt.
Screenshot 30 - Bildausschnitt verschieben

Da Paint.net das Bild in der Mitte platziert, wo wir es nicht benötigen, müssen wir es nun an die gewünschte Position verschieben. Dazu klickst Du wieder in den Tools auf das Verschiebewerkzeug und bringst es an die gewünschte Stelle.
Screenshot 31 - Banner ist platziert

So sieht der Entwurf nun mit dem erstellten Banner aus.
Screenshot 32 - Feldnamen vergeben

Damit Du Dich besser zurecht findest solltest Du einen Namen für die Bannerebene vergeben, dazu klickst Du auf den Kartenreiter "Ebenen" und im Menüfeld auf "Layereigenschaften"
 
Screenshot 33 - Feldnamen eingeben

In dem sich nun geöffneten Menü Vergibst Du unter "Name" einen Namen - treffend ist hier Banner und klickst dann auf "OK" und der Feldname wird im Feld "Ebenen" jetzt angezeigt.
Screenshot 34 - neue Ebene für das Textfeld

Als nächstes bereiten wir das Textfeld vor und erstellen wieder eine neue Ebene.
Screenshot 35 - Feldgröße fest stellen

Wenn Du andere Werte für Dein Behelfsfeld "Logo und Banner" genommen hast kannst Du die verbleibende Größe folgender Maßen feststellen: scrolle als erstes im Feld "Ebenen" bis zum Hintergrund, welchen Du dann anklickst, so dass dieser farbig hinterlegt ist.
Screenshot 36 - Markierwerkzeug einstellen

Als nächstes klickst Du auf das Markierwerkzeug in den Tools und legst die Arbeitsweise auf "Normal" fest. Jetzt klickst Du knapp unter das Behelfsfeld "Logo und Banner" und ziehst die Maus mit gedrückter Maustaste nach unten, so dass in etwa ein solches Feld entsteht.
 
Screenshot 37 - kopieren der Daten

Nun kopierst Du die Eckdaten des Ausschnittes in dem Du auf den Kartenreiter "Bearbeiten" und im Menü auf "Kopieren" klickst.
Screenshot 38 - Neue Datei zum Größe auslesen

Anschließend klickst Du auf den Kartenreiter "Datei" und im Menü auf "Neu ...".
Screenshot 39 - Maßangaben zum Textfeld

Im sich jetzt geöffneten Menü findest Du die Eckdaten zur Kopie aus dem Hintergrund - hier Höhe: 628 Pixel und Breite 253 Pixel, wobei uns die Breite wenig interessiert - nehmen wir die Gleiche des Banners. Wichtig ist die Höhe, von der wir jetzt 20 Pixel für einen gewissen Außenabstand abziehen, was 608 Pixel ergibt.
Screenshot 40 - Abmessungen übernehmen

Jetzt haben wir die Maße des Textfeldes, Breite 728 (wie Banner) und Höhe 608 Pixel. Dies stellst Du jetzt ein in dem Du bei den Tools das Markierwerkzeug anklickst, "Feste Größe" einstellst, Werte bei Breite und Höhe eingibst, anschließend in den Entwurf klickst und das Feld korrekt unter dem Banner mit gleichmäßigen Abständen platzierst.
 
Screenshot 41 - Farbe des Textfeldes ändern

Das Textfeld ist platziert (wenn noch nicht, dann mit dem Verschiebewerkzeug noch abändern), nun musst Du es noch mit einer passenden Farbe füllen, welche Du wieder im Feld "Farben" auswählst, dann in den Tools wieder auf den Farbeimer klickst und diesen dann ins markierte Feld bewegst und noch einmal mit links klickst.
Screenshot 42 - Feldnamen vergeben

Zur besseren Übersichtlichkeit vergibst Du jetzt wieder einen Feldnamen für die Ebenen, dazu klickst Du wieder auf den Kartenreiter "Ebenen" und im Menü auf "Layereigenschaften".
Screenshot 43 - Abschluss Textfeld

In dem sich jetzt geöffneten Menü vergibst Du unter "Name" passend Textfeld und übernimmst alles mit "OK".
Screenshot 44 - neue Ebene für den ersten Button

Die erste Hürde ist genommen und nun müssen wir noch ein paar Buttons erstellen - wie gehabt - zuerst mit einer neuen Ebene erstellen.

Drittens: verschiedene Buttons erstellen

Screenshot 45 - Button vorbereiten

Um einen Button zu erstellen musst Du zuerst in der neuen Ebene eine Fläche markieren, was Du mit dem Auswahlwerkzeug (Einstellung: Normal) von den Tools erledigst in dem Du eine Markierung in der Ebene zeichnest (mit Links klicken, gedrückt halten und ziehen)
Screenshot 46 - Text eingeben

Anschließend wählst Du im Feld "Farben" eine Farbe aus, klickst auf das Textwerkzeug in den Tools, wählst Schriftart, Größe, ... , klickst in das markierte Feld und gibst Deine Text ein - hier Startseite.
Screenshot 47 - Text verschieben

Falls der Text nicht ganz so gut platziert ist, so nimmst Du wieder das Verschiebewerkzeug von den Tools und bringst die Schrift an die gewünschte Stelle.
Screenshot 48 - Feldnamen vergeben

Wie bereits bei den anderen Eben, so auch bei dieser - vergebe einen Namen für eine bessere Übersichtlichkeit (Kartenreiter: Ebenen - Menüpunkt: Layereigenschaften)
 
Screenshot 49 - Feldnamen eingeben

Unter "Name" den Feldnamen eingeben - mein Vorschlag: der eingegebene Text des Buttons - hier also Startseite. Vergiss nicht, mit "OK" zu übernehmen.
Screenshot 50 - weitere Buttons

Nun erstellst Du noch ein paar weitere Buttons in dem Du die Schritte "neue Ebene" - Bereich markieren - Textwerkzeug und Verschiebewerkzeug mit dem neuen Text wiederholst und die passenden Feldnamen vergibst.
Screenshot 51 - das vorläufige Design

Nach dem Du die Behelfsebenen auf "Unsichtbar" gestellt hast (Haken entfernen) siehst Du das angefertigte Design im Ganzen - nun kann man es noch etwas verschönern.
 

Viertens: Design etwas aufpolieren

Screenshot 52 - Rahmen für das Banner

Hier beginnen wir mit einem Rahmen für das Banner - da Paint.net keine passenden Effekte dafür anbietet erstellen wir eine neue Ebene unterhalb des Banners in dem Du im Feld "Ebenen" zum Behelfsfeld "Logo und Bannerfeld" scrollst, dieses anklickst und dann auf "neue Ebene erstellen" klickst.
Screenshot 53 - Rahmengröße festlegen

Jetzt gehst Du in den Tools auf das Markierwerkzeug, stellst auf "Feste Größe" und gibst das Bannermaß um 4 Pixel breiter und 4 Pixel höher ein (bei mir 728 + 4 = 732 | 90 + 4 = 94), was einen 2 Pixel breiten Rahmen um das Banner ergeben soll.
Screenshot 54 - Rahmen für Banner markieren

Nun klickst Du ins Bild und ziehst die so markierte Fläche über das Banner.
Screenshot 55 - Rahmenfarbe für Banner ändern

Anschließend wählst Du in den Tools den Farbeimer und klickst in die markierte Fläche (vorher eventuell Farbe auswählen).
 
Screenshot 56 - Rahmen für Banner verschieben

Falls Du jetzt siehst, das Du den Rahmen nicht ganz exakt platziert hast, so kannst Du ihn jetzt mit dem Verschiebewerkzeug aus den Tools neu platzieren.
Screenshot 57 - Rahmen für das Textfeld

Einen Rahmen nur für das Banner sieht vielleicht nicht ganz geschickt aus, also legen wir auch einen für das Textfeld an - neue Ebene erstellen unterhalb des Textfeldes.
Screenshot 58 - Rahmengröße für das Textfeld

Das Textfeld selbst ist bei diesem Design 728 x 608 Pixel (falls Du andere Werte genommen hast - diese verwenden) - das ergibt ein Feld der festen Größe von 732 x 612 Pixel bei 2 Pixel Rahmenbreite - Markierwerkzeug in den Tools anklicken - Werte einstellen, ins Bild klicken und bei gedrückter Maustaste die Markierung platzieren.
Screenshot 59 - Rahmenfarbe für das Textfeld

Jetzt wieder Farbe auswählen (Feld Farben), Farbeimer anklicken (Tools) und in die markierte Fläche klicken und der Rahmen hat diese Farbe.
 
Screenshot 60 - Rahmen Textfeld verschieben

Auch diesen Rahmen kannst Du noch verschieben - mit dem Verschiebewerkzeug in den Tools
Screenshot 61 - Nachträglich Farben der Rahmen ändern (1)

Die gefällt die Rahmenfarbe nicht - dann andere Farbe wählen (Feld Farben) - Farbeimer anklicken (Tools) - in die betreffende Fläche klicken - fertig.
Screenshot 62 - Nachträglich Farben der Rahmen ändern (2)

In den Ebenen den anderen Rahmen anklicken - Farbeimer anklicken (Tools) - in das Feld klicken - fertig - jetzt haben beide Rahmen die gleiche Farbe.
Screenshot 63 - Nachträglich Farbe des Textfeldes ändern (1)

Um die Farbe des Textfeldes anzupassen kannst Du folgender Maßen vorgehen: Ebene Banner auswählen (Feld Ebenen)
 
Screenshot 64 - Nachträglich Farbe des Textfeldes ändern (2)

Jetzt die Farbpipette in den Tools anklicken und im Bereich des Banners eine Farbe anklicken - die Pipette übernimmt automatisch den Farbwert in die Farben
Screenshot 65 - Nachträglich Farbe des Textfeldes ändern (3)

Anschließend die Ebene des Textfeldes anklicken (Feld Ebenen)
Screenshot 66 - Nachträglich Farbe des Textfeldes ändern (4)

Nun gehst Du in die Tools zum Farbeimer (anklicken) und klickst wieder ins Bild - Farbe aus dem Bild ist jetzt im Textfeld.
Screenshot 67 - Logo Bearbeiten

Um das Logo zu bearbeiten musst Du dieses in dem Feld Ebenen (Meine Homepage) auswählen.
 
Screenshot 68 - Logo Bearbeiten (2)

Im Kartenreiter "Effekte" sind diese auch versteckt - hier Entscheidung "Leuchten" vom Fotoeffekt.
Screenshot 69 - Logo Bearbeiten (3)

Mit den Reglern in diesem Menüpunkt kannst Du das Leuchten verändern - zum Übernehmen klickst Du auf "OK"
Screenshot 70 - weitere Versuche

Wie Du gesehen hast, kannst Du jede einzelne Ebene jetzt noch weiter bearbeiten und so verschiedene Effekte probieren (würde ich Dir jedenfalls empfehlen).
Screenshot 71 - Datei speichern

Vergesse nicht Deine Datei abzuspeichern - einmal (und das zuerst) als original Paint-Datei und dann als Bild - also JPEG (oder GIF, PNG, ...).
 
Screenshot 72 - anderes Hintergrundmotiv

Mit der Änderung der Hintergrundfarbe und mit der Verwendung eines Karomusters sieht der Entwurf wieder etwas anders aus.
Screenshot 73 - nochmalig geändertes Hintergrundmotiv

Jetzt ist das Karomuster auf die Diagonale gestellt, wodurch das Design ein etwas anderes Erscheinungsbild bekommt.
Screenshot 74 - geändertes Logo

Zum Abschluss noch ein Test mit dem Logo - als Hintergrundmotiv kommt das "Julia-Fraktal" aus "Effekte -> Wiedergabe" zum Einsatz und die Schrift wurde mit um ein PT größerer Schrift in schwarz hinterlegt.
 

Dieser mit Paint.net erstellte Entwurf ist bestimmt nicht gerade Medaillenanwärter - das sollte er auch nicht - er soll Dir nur zeigen, dass es durchaus möglich ist, mit einem kostenlosen Programm für Privatpersonen und/oder Familien brauchbare Designs zu erstellen.

Natürlich gibt es Alternativen, diese müssen aber nicht kostenlos sein.

Sehr interessant sind auch zum Probieren verschiedene Trial-Versionen, welche meist den vollen Funktionsumfang haben aber oft nur bis zu 30 Tagen nutzbar sind (auch eine Neuinstallation hilft da meist nicht).

Meine Empfehlung zum Test: Adobe Photoshop Elements 7 (Trial)

 

Google