Erstellen Sie mit Photoshop CS6 einen Hintergrund für das Web

Hintergründe oder Hintergrundbilder sind einer der schwierigsten visuellen Bereiche in einem Web-Angebot. Manchmal löst eine flache Farbe das Problem, aber es gibt auch andere Fälle, in denen wir dem Hintergrund und ein Muster oder eine Figur hinzufügen müssen Dies sollte kontinuierlich erscheinen, insbesondere wenn wir etwas entwerfen, das reaktionsschnell sein wird.

Dafür können wir Hintergründe mit Texturen erstellen und durch einige Tricks unbegrenzt und nahtlos erscheinen lassen. Auf diese Weise können wir ein Ergebnis erzielen, das professionell aussieht und nicht immer wieder dasselbe Bild wiederholen muss.

Erstellen Sie die Basis

Das erste, was wir tun müssen, ist, unsere Basis zu erstellen. Dazu können wir zwei Dinge tun: Zum einen zeichnen wir unsere Muster und Texturen von Hand in ein separates Dokument und importieren sie dann. Zum anderen können wir die bereits in Photoshop enthaltenen Muster verwenden, um die Ziele zu erreichen.

Da wir lernen, wie der Fonds zu verwalten ist, wählen wir die zweite Option. Gehen wir also wie folgt vor:

– Vamos a crear un nuevo documento y sobre este vamos a hacer una base, en la capa más baja o de fondo vamos a colocar el color que deseemos. 1 – Wir werden ein neues Dokument erstellen und darauf aufbauen. In der untersten Ebene oder im untersten Hintergrund platzieren wir die gewünschte Farbe.

– Luego vamos a utilizar la herramienta de formas personalizadas de Photoshop y vamos a crear una capa por cada una de las formas que deseamos utilizar, debemos tener especial cuidado de no salirnos de los límites del documento: 2 – Dann verwenden wir das benutzerdefinierte Formen- Werkzeug von Photoshop und erstellen eine Ebene für jedes der zu verwendenden Formen. Wir müssen besonders darauf achten, dass die Grenzen des Dokuments nicht überschritten werden:

See also  So blockieren Sie JavaScript-Skripte für unbefugte Zugriffe in Chrome oder Firefox

photoshopcs6-fondo-web.jpg

– Utilizamos capas para poder acomodar los patrones a nuestro gusto, por lo que una vez que ya estén como los queremos vamos a seleccionar cada una de las capas que lo contienen, para ello hacemos click en cada una mientras presionamos la tecla SHIFT , esto hará que todas las que toquemos queden seleccionadas juntas. 3 – Wir verwenden Ebenen, um die Muster nach unseren Wünschen anzupassen. Wenn sie also so sind, wie wir möchten, wählen wir jede der Ebenen aus, die sie enthalten. Dazu klicken wir bei gedrückter UMSCHALTTASTE auf jede Ebene Es wird uns alle, die wir berühren, zusammen auswählen lassen.

– Ahora vamos a utilizar la herramienta para fusionar las capas o simplemente presionamos la combinación CTRL + E en nuestro teclado. 4 – Jetzt können Sie die Ebenen mit dem Tool zusammenführen oder einfach die Tastenkombination STRG + E auf unserer Tastatur drücken.

– Por último vamos a ocultar las capas individuales y dejaremos solo la nueva capa con todas las formas fusionadas: 5 – Schließlich werden wir die einzelnen Ebenen ausblenden und nur die neue Ebene mit allen zusammengeführten Formen belassen:

photoshopcs6-fondo-web2.jpg

Fertigstellung des Fonds

Wenn wir den Hintergrund so belassen, wie wir ihn im vorherigen Abschnitt erstellt haben, werden wir bei der Verwendung in einem realen Beispiel feststellen, dass wir viele leere Räume ohne Zahlen haben werden, die das, was wir erreichen möchten, von einem nahtlosen Hintergrund oder Grenzen brechen. Deshalb müssen wir diese Schritte befolgen.

– Vamos a seleccionar la opción Filtro , luego la opción Otros y finalmente la opción desplazamiento , aquí vamos a crear un desplazamiento vertical de la mitad del tamaño de nuestro documento y lo mismo para el desplazamiento horizontal. 1 – Wir wählen die Option Filter , dann die Option Andere und schließlich die Option Verschiebung . Hier erstellen wir eine vertikale Verschiebung von der halben Größe unseres Dokuments und dieselbe für die horizontale Verschiebung.

See also  HTML5 - Arbeiten mit Quellen - Teil2

– Finalmente seleccionamos la opción inferior de vuelta completa y quedaremos con un resultado como el siguiente: 2 – Schließlich wählen wir die niedrigere Option für die vollständige Rückgabe und erhalten ein Ergebnis wie das folgende:

photoshopcs6-fondo-web3.jpg

– Para completar el fondo solo necesitamos volver a incorporar formas que llenen el espacio vacío que nos quedó en el centro de la imagen, respetando sus límites. 3 – Um den Hintergrund zu vervollständigen, müssen wir nur Formulare wieder einbinden, die den leeren Bereich in der Bildmitte ausfüllen und dabei die Grenzen einhalten.

– Exportamos para web y ya tenemos nuestro fondo: 4 – Wir exportieren für das Internet und haben bereits unseren Fonds:

photoshopcs6-fondo-web4.jpg

Wenn Sie diesen neuen Hintergrund anwenden, werden Sie feststellen, dass er wiederholt wird, ohne dass irgendeine Naht oder ein Ende angezeigt wird. Es scheint also, dass das Ende dieses Tutorials unbegrenzt war, nachdem wir einen guten Hintergrund mit Texturen für unsere Webvorschläge erstellt haben.

administrator

Leave a Reply

Your email address will not be published. Required fields are marked *