Warning: getimagesize(../html/pixelplow/g/tutorial/pics/2371_newpicture.jpg): failed to open stream: No such file or directory in /www/htdocs/v078025/start/tools/tutorial.php on line 327
Die PixelPlow Community - Tutorials für Photoshop downloaden und erstellen
spacer spacer

spacer
:: PIXELPLOW!
:: TUTORIALS
 •  Neue Tutorials
Top Tutorials
Alle A-Z
Wie funktionierts?
Tutorials Text
Tutorials Photo
Charakter Design
Interface Design
Tutorials sonstiges
:: AKTIONEN
:: PHOTOSHOP BLOG
:: TIPPS+TRICKS
:: NEWSLETTER
:: SHOP
:: LINKS
:: MEMBERS
spacer

spacer



Passwort vergessen?
spacer

spacer

Foto-Effekte mit PixelShapes.com

Homepage erstellen mit Wix.com

Partner QUEEKY
queeky.de

Partner CSSFly web tools
cssfly

spacer

spacer


Ich habe die AGB gelesen und akzeptiert

spacer

spacer


Hier kannst Du dich für den Newsletter eintragen / austragen

spacer

spacer



spacer

spacer
Tag - Suche einblenden | ausblenden
::  Neue Tuts

<< Website komplett 11 Credits / 29991 Views von Joszy Ulscht am 17.03.2005 um 14:28 Uhr  

  Eine kleine Website in 10 minuten!

  Erstellt eine neue Datei mit 800x600 (transparenter hintergrund).

Wählt die Vordergrundfarbe #73C02F und Hintergrundfarbe #ffffff.

  Wählt das Verlaufswerkzeug aus ( mit Linearer Verlauf).

Fangt oben an, haltet die Hochstell-Taste dabei gedrückt und zieht einen Verlauf von oben nach unten.


  Erstellt eine neue Ebene und wählt das Abgerundete Rechteckwerkzeug aus. Oben in der Optionsleiste, stellt einen Radius von 5px ein. Die vordergrundfarbe stellt auf #ffffff.

Zieht nun ein Rechteck in eurer gewünschten Größe auf.

Drückt Strg+A, um alles auszuwählen und richtet das Rechteck mittig aus.

  Doppelklickt nun auf die Ebene mit dem erstellten Rechteck, um den Ebenenstil zu aktivieren. Stellt folgendes ein:

Schlagschatten:
- Deckkraft: 50%
- Winkel: 90°
- Distanz: 7
- Größe: 10

Verlaufsüberlagerung:
- stellt einen Verlauf ein mit derselben Farbe ein wie der Background-Verlauf.

  Erstellt eine neue Ebene, klickt mit gedrückter Strg-Taste auf die Rechteck-Ebene um eine Auswahl zu erstellen.

Geht dann auf "Auswahl/Auswahl verändern/verkleinern".
Gebt dort 2px ein.

Stellt die Vordergrundfarbe auf #D4D4D4. Wählt wieder das Verlaufswerkzeug aus und wählt zgl. "Verlauf nach transparent" ein.

Zieht wieder mit gedrückter Hochstell-taste einen 20px langen Verlauf.

  Erstellt wieder eine Ebene und erstellt eine auswahl für die obere Navigationsleiste. Füllt diese mit Grau.

  Erstellt wieder eine neue Ebene, wählt erneut das Abgerundete Rechteckwerkzeug aus, vordergrundfarbe auf #ffffff und zieht einen "Contentbereich" eurer Wahl auf.

Um das Rechteck wieder eine Auswahl erstellen, die Auswahl um 2px verkleinern und wieder einen verlauf von Farbe zu transparent.

Fertsch!

  Nun könnt Ihr noch euer Logo Titel und Links reinsemmeln

  Wenn man Screens in PS erstellt,
sollte man sich schon vorher
Gedanken machen um die technische
Realisierung. Slicen und exportieren
meistens in .gif...fotos am besten
im .jpg (wegen den Farben).

Der Backgroundverlauf wird mit 1px
Breite und der Höhe des Screens geslict
(in diesem Fall 800px). Das definiert
ihr dann in einer externen CSS-Datei
das der Background auf der X-Achse
gekachelt wird und definiert extra nochmal
die Hintergrundfarbe als #ffffff.

  Den Content slict ihr komplett und
baut es in einer Tabelle als Hintergrundbild
ein. Das macht ihr am besten auch in einer
CSS-Datei.

Bei weiteren Fragen: www.joszymedia.com
<< Zurück



> Dieses Tutorial empfehlen

> Für dieses Tutorial Voten (nur eingeloggt)

> Anmerkung zu diesem Tutorial schreiben


von Name am 24.03.2005 um 14:21 Uhr

hi,

das sieht schon sehr sehr nett aus...!


achtung, jetzt kommt`s:

toll wäre es, wenn du das tut erweitern würdest und zeigst, wie man die page sliced und die einzelnen bilder exportiert, damit sie in dreamweaver oder wo auch immer dann gekachelt werden können.

...naja, sowas in der art suche ich nämlich vergebens.....

slicenvon Sanne Grüb am 24.03.2005 um 14:59 Uhr
sehr schick!
Ein SLice-Tut würde ich mir allerdings auch wünschen :))

lG, Sanne

Fireworks Hilfevon Sven am 19.06.2005 um 08:40 Uhr
Die Hilfe von Fireworks bietet dazu eine recht gute Basis. Alles wird ins Kleinste beschrieben. Kann ich also nur empfehlen.


von chefkoch am 26.09.2005 um 23:52 Uhr
Wirklich sehr einfach und verständlich geschrieben.Habe das als Fortgeschrittener Anfänger sofort verstanden =)
Nur eine Anleitung zum Slicen wäre noch eine Ergänzung wert.

Gruss Chefkoch

von Jens am 27.11.2005 um 21:13 Uhr
Das ist mal ein richtig gutes Tutorial!
n1 ;)


von Name am 03.12.2005 um 16:07 Uhr

Bei mir kann ich das abgerundete Rechteck nicht füllen.

von arne am 20.03.2007 um 14:06 Uhr

genau sowas suche ich auch!

wo man sieht, wie man sachen sliced und in dreamweaver einbaut..!

grüße, arne

von Redscorp am 14.09.2009 um 01:20 Uhr
Also ich finde es als Grundlage nicht schlecht. Aber im Titel steht was von A bis Z.
Das würde bedeuten, Gruppen für die einzelnen unterseiten, Formulre, etc sodas z.B auch ein Export in Flash machbar wäre.
Aber trotzdem gute grundlage. Weiter so


XzUyPbsvSplIeHLdvon Makaila am 31.07.2011 um 20:49 Uhr
No more s***. All posts of this qaulity from now on




spacer
spacer
spacer spacer



ein Wort alle Wörter

spacer

spacer



spacer

spacer


Welchen Browser benutzt Du?

IE
Firefox
Mozilla
Netscape
Opera
Safari
Andere

Alle Umfragen zeigen

spacer

spacer


Aktionen_Tutorials_Downloads_PixelPlow


Wir würden uns freuen wenn Du Pixelplow verlinken willst...
Füge dazu einfach folgenden HTML Code in Deine Homepage ein:




spacer

spacer




spacer

spacer

spacer
alle Inhalte (c) 2004 by Pixelplow! bzw. den Autoren Impressum | Druckversion
Seitenanfang

spacer