Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Gitter als Background“

philipp1988

Nicht mehr ganz neu hier

Hi aLL !
Ich bin ein Photoshop newbie :D
und wollte fragen wie man ein gitter hinbekommt
wie auf
es muss nicht die gr0esse sein aber einfach das grundprinzip
mfg phil
 

blackout

Schaf im Wolfspelz

@maykiz ich nehm mal an dass der bg gemeint ist

das macht man mit einer kachelbaren textur, die man anschließend als hintergrund der page wählt.
ich kann jetzt leider nicht sehen ob du so einen hintergrund in html oder in photoshop machen willst, deswegen beschreib ich einfach mal beide möglichkeiten.

in jedem fall erstellst du dir nur einen schnipsel des hintergrundbildes und wiederholst ihn so oft, dass alles ausgefüllt ist. diesen kleinen schnipsel erstellst du in photoshop (das ist dann ein sehr kleines bild - zb 2*2). in meinem beispiel nehm ich dafür horizontale linien, abwechselnd schwarz und weiß, jeweils 1px hoch.
dazu erstellt man ein photoshop-dokument mit den maßen 1*2 und füllt den oberen pixel schwarz und den unteren weiß (oder umgekehrt).
jetzt kommt der unterschied zum tragen:
photoshop:
(drück zur sicherheit strg+d, um die auswahl aufzuheben, sonst könnten probleme auftreten)
unter bearbeiten | muster festlegen kannst du deine graphik jetzt in ein muster umwandeln, den namen kannst du beliebig wählen.
jetzt kannst du das eigentliche bild laden, in dem du den zebra-hintergrund haben willst. über ebene | neue füllebene | muster kommst du in einen dialog, den du mit ok bestätigen kannst. im darauf folgenden kannst du dein eben definiertes muster auswählen und die ebene dann in der ebenenpalette an die richtige stelle schieben - fertig.
html/css
speicher die einzelne kleine graphik ab (am besten als gif, das komprimiert bei so extrem kleinen bildern sehr gut; sollte es mittelgroß werden: png8; bei größeren bildern: png24 oder jpeg).
in deiner html(oder php)-datei fügst du nun in die style-definition des body den ausdruck "background-image: url(pfad_zum_bild);" ein. das sieht dann zb so aus:

<doctype ...>
<html>
<head>
<meta ...>
<style type="text/css">
<!--
body {
background-image: url(pfad_zum_bild);
}
-->
</style>
</head>
<body>
lorem ipsum dolor sit amet
...


das wärs
hf
blackout


edit: ich hab mir grad deine verlinkte page genauer angesehen und kann nur raten, es nicht so zu machen wie der offensichtlich ziemlich unfähige "webdesigner" dieser page. der hintergrund ist nicht gekachelt sondern ein riesengroßes bild, in dem dieser scooter eingearbeitet ist. das problem ist, dass sich 1. dadurch die ladezeit der page sehr unnötig erhöht und 2. der bg sich nach einiger zeit wiederholt und ich bei meiner auflösung einen weiteren halben roller im bild hab ;)
 

philipp1988

Nicht mehr ganz neu hier

danke fuer alle tips :)
also eigentlich wollte ich es erstmal nur als reine bild datei machen
weil ich mit html includen von grafiken ^^ etc
noch nicht viel ahnungen habe
ich werde erstmal bissel rumspielen und später meine werke euch präsentieren
 

spidermobile

Nicht mehr ganz neu hier

Nur eine kleine anmerkung von mir. Ich würde so einen Hintergund nicht wählen, da dieser sehr unruhig wirkt. Bei längerem Betrachten wird es unangenehm.

Kannst das ja mal in Deine Überlegungen mit einbeziehen.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.856
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben