PDA

Vollständige Version anzeigen : Wie bekomme ich solch eine Grafik gebastelt?


Mrs.Peggy
15.08.12, 04:35
Hallo!

Mein erstes Thema hier ist, daß ich gerne eine solche Grafik (http://baumarktdirekt.dyndns.biz/mercedes-w203-ig-forum-interessengemeinschaft-der-c-klasse-w203.html) erstellen will. Fahrt mal bitte mit der Maus über den Käfer. :emo_biggr
Möchte ein anderes Fahrzeug verwenden. Was, wie und wo muß ich machen? Ausgangsgrafik sollte man haben, ist klar, aber wie geht es weiter? Was benötige ich noch? Arbeite mit CS3. Ich hab da leider Null Ahnung und möchte mich gerne in die Materie einarbeiten. Freue mich auf Eure Antworten. Ich hoffe, ich bin in der richtigen Rubrik! :emo_biggr

Sinux
15.08.12, 07:19
moin peggy,

da hast du dir als neuling echt ne harte nus gegeben.

es gibt da mehrere ,öglichkeiten. aber vom prinzib her würde ich so vorgehen:

eine ebene über dein auto legen und mit einem passenden weichen runden pinsel,
mit wenig deckkraft und weißer farbe diesen schein auf den scheinwerfer erstellen.
anschließend diese ebenen dann animieren. dazu hilft dir vielleicht diese anleitung: kligge mal (http://www.photoshop-cafe.de/forum/showthread.php?t=8563&highlight=animation)

mein tipp: geh erst einmal die grundlagen von photoshop durch :whistling

Ylloh
15.08.12, 09:37
animieren muss man da nichts, das ist mit css (mousover) zu bewerkstelligen.

Sinux
15.08.12, 10:28
na klar *handvorkopfklatscht* da haste recht. ist ja ein mouseover.

ich glaube aber, dass man das mit auch mit ps machen kann. beim slicen zb.

Mrs.Peggy
15.08.12, 10:47
Hallo!

Habe gerade angefangen, ein Fahrzeug frei zustellen. Wenn ich mit dem Lasso alles markiert habe, sich die Markierung quasi dann schließt, so daß sie quasi rund um laufend aussieht, kehre ich die Auswahl um. Ist das richtig? Doch wie bekomme ich das dann frei gestellt, daß ich quasi dann keinen Hintergrund mehr habe, sondern nur noch das Fahrzeug?

Der Tip mit dem Pinsel habe ich auch hinbekommen, allerdings noch im kompletten Bild. Muß ich dann noch mal versuchen, wenn ich das Fahrzeug freigestellt habe. Ich komme da grad nicht weiter, wie ich es ausschneide.

Sinux
15.08.12, 10:54
der weg war richtig: mit lasso umranden, bis die ameisen laufen.
auswahl umkehren und dann einfach entfernen drücken.

SourceCode
15.08.12, 11:10
Sinux jetzt hast du mein interesse geweckt! Wie soll das bitte gehen mit dem hover efeckt in photoshop. Es ist ja eigentlich etwas was Programiert wird und ich hab noch nie gesehen das man in Photoshop ihrgendwas mit Codes zu tuen hat...

Ich hätte sowas jetzt mit Adobe Flash Catalyst gemacht da, wie ich von Jenny gelernt hab Flash bald ausläuft würde ich dann doch Adobe Edge bevorzugen :-P

Jenny
15.08.12, 11:27
Hallo!

Hier sind das einfach zwei Bilder, die per CSS entsprechend zugewiesen wurden:

#logo{background-image: lichter_aus.png;}
#logo:hover{background-image: lichter_an.png;}

Mrs.Peggy
15.08.12, 11:47
der weg war richtig: mit lasso umranden, bis die ameisen laufen.
auswahl umkehren und dann einfach entfernen drücken.

Hab ich gemacht! Wie bekomme ich noch den Hintergrund weg, daß also diese karrierte Fläche erscheint oder ist das nicht nötig? Aktuell ist der Hintergrund schwarz!

http://www.imgbox.de/users/Fliegzeuger/Erstellungsproblem.jpg

@jenny:

Ich benötige also einmal ein Bild ohne Lichter und einmal ein Bild mit Lichter. Diese müssen dann als png-Datei eingefügt werden? Mit CSS hab ich ja noch nie was gemacht. Da muß ich noch bissl nachlesen.

Ylloh
15.08.12, 11:49
In PS sind auch (rudimentäre) Webdesign-Komponenten eingebaut, wenn man alles sliced kann man auch mehrere Zustände zuweisen, aber der Code den PS da baut, ermuntert dazu, dass per Hand zu schreiben :whistling:

Zum Freistellen:

Drückt ihr echt entf? Also ich löse das nur noch über Masken, denn komplett wegschneiden hat den kleinen aber feinen Nebeneffekt, dass man im Nachhinein nichts verändern kann (Beim speichern ferstegstellt, dass der Auspuff doch mit ausgeschnitten wurde).

Also ich mach immer Alt+Klick auf das Maskierungssymbol nachdem die "Ameisen laufen"

Ylloh
15.08.12, 11:50
Hab ich gemacht! Wie bekomme ich noch den Hintergrund weg, daß also diese karrierte Fläche erscheint oder ist das nicht nötig? Aktuell ist der Hintergrund schwarz!


Hintergrundebene durch doppelklick befreien ;)

Mrs.Peggy
15.08.12, 11:56
Also ich mach immer Alt+Klick auf das Maskierungssymbol nachdem die "Ameisen laufen"

Hm, hab ich grad mal probiert. Da wird mein Hintergrund rot. :fragen:

Hintergrundebene durch doppelklick befreien ;)

Ähm... :fragen: Wo genau? :emo_biggr

Ylloh
15.08.12, 12:31
Maskierungssymbol unten rechts ;) (in deinem Screen ausgegraut, weil bei geschützter BG-Ebene nicht möglich)

Auf die Ebenenminiatur einen Doppelklick machen, dann fragt er dich wie du die Ebene benennen willst - einfach Enter drücken, schon fertig ;)

Mrs.Peggy
16.08.12, 00:20
Vielen Dank für Eure Antworten, aber irgendwie hab ich da so nicht hnbekommen. Ich habe stattdessen das freigestellte Objekt kopiert und in eine neue Datei mit transparentem Hintergrund eingefügt. So kam ich auch zum Ziel.

Wenn ich nun zwei Bilder mit diesem Mouseover erstellen möchte, müssen die Dateien eine png-Datei sei?

http://www.imgbox.de/users/Fliegzeuger/Beipsiel.jpg

SourceCode
16.08.12, 01:07
Also es MÜSSEN Keine PNGs sein. Kommt druaf an wie du es brauchst. Weil als .png ist halt das Trasparente immernoch transparent und bei jpg. etc. wird das Transparente weiß.

Außerdem ich weiß jetzt nicht genau was du damit vor hast aber wenn du es so lässt ist das hintere rote Rücklich, also der schein davon an der Bildkante abgeschnitten.

Und noch eine Frage: Machst du es jetzt mit Flash oder mit Html und CSS??

Mrs.Peggy
16.08.12, 01:45
Ich möchte schon, daß der Hintergrund transparent bleibt. Ist ja kein Problem, die Datei als png abzuspeichern. Daß mit dem Rücklicht ist nicht so wild. Das ist nur ein Beispielbild, um mich ran zuarbeiten. Hab noch keine Datei, die ich verwenden kann. Bekomme Diese erst morgen. So kann ich dann gleich loslegen und das richtig machen.

Wie ich das nun einbinde, ist eine gute Fage! Stell' die Nächste. :emo_biggr Ich weiß es nicht. Habe von beiden Dingen echt keine Ahnung. Ich bastle erstmal die Bilder, dann schaue ich, wie das mit dem Einbinden beim mouseover geht. Das Ganze wird doch dann einfach in dem Style eincopiert an Stelle des aktuell vorhandenem Mouseover, oder?

EDIT: Habe nun mein eigentliches Motiv, ein echtes Bild von einem PKW. Wie bekomme ich denn beim Freistellen den Hintergrund entfernt, der durch die Scheiben noch zu sehen ist? Wie macht man das am Besten?

Mrs.Peggy
16.08.12, 11:02
Muß noch was fragen:

Wenn ich die frei gestellten Objekte fertig habe, ein Fahrzeug mit und eines ohne Licht und diese dann als png-Datei abspeichere, ist dann nur das Fahrzeug als datei gespeichert oder auch der Hintergrund? Wie kann ich das testen, außerhalb von Photoshop? :nixweiss:

SourceCode
16.08.12, 11:58
Wenn du als .png Speicherst wirst du gefragt mit oder ohne Interface oder so und da machste dann ohne anklickn ...

Kannst du das Bild mal hochladen und hier rein stellen dann kann man dir in Sachen Fenster und freistellen ein bissel besser helfen ...

heikehk
16.08.12, 23:03
Hi mrs. Peggy,

wenn du die png datei ansiehst, dann kannst du das mit der transparenz nicht unbedingt feststellen, da ja jedes Ansichtsprogramm einen hintergrund hat. Tauchen die grau weißen kästchen in photoshop auf, dann ist das transparenz transparente bereiche kann auch das gif format, allerdings kommt gif eher schlecht mit nur teilweise transparenten bereichen klar, weswegen bei dir auf jeden fall png die richtige wahl ist.
Ich an deiner stelle würde die css-variante von jenny einfach ausprobieren, dann siehst du schon ob es klappt. Mit drüber lesen würde ich sagen dass das klappen sollte.
Gruß
Heike

Mrs.Peggy
17.08.12, 04:48
Versuche mal, die png-Bilder einzustellen. Scheint soweit geklappt zu haben.

http://www.imgbox.de/users/Fliegzeuger/Grafikerstellungen/Emu_ohne_Licht_klein.png

http://www.imgbox.de/users/Fliegzeuger/Grafikerstellungen/Emu_Licht_klein.png