Vertikale und Horizontale Linie erstellen

[Jyrki]

Hi,
bin absoluter Anfänger in Photoshop und habe ein bisschen gebastelt für meine Visualisierung meiner Tablet Fernbedienung. Ich hätte nun eine Frage zur Erstellung von vertikalen Linien die ich auf dem angehängten Bild Rot markiert habe. Wie bekomme ich diese Linien hin mit einem gleichen Abstand? Die Außenlinien habe ich mit dem Ebenen Stil Kontur hingekriegt.
Des weiteren hätte ich noch eine Frage zur Einfärbung von Icons im png Format. Habe es schon versucht mit Bild->Korrekturen->Farbton/Sättigung und mit Farbe ersetzen. Möchte aber gerne die Icons in einem bestimmten Hex Farbcode einfärben, das diese Korrekturen aber nicht zulassen.

https://www.photoshop-cafe.de/bildupload/pics/sonst/thumb/1485886264_Photohop_Linie_ziehen.JPG (https://www.photoshop-cafe.de/bildupload/pics/sonst/1485886264_Photohop_Linie_ziehen.JPG)

Was mir noch einfällt das Thema mit meinen Buttons. Hat jemand eine Idee wie man diese Buttons noch schöner/verfeinern könnte? Dieser blaue Balken und Rand sollen in mehreren Farben dargestellt werden und zeigen später den Status in der Fernbedienung an und sollen so aussehen als würden sie leuchten.

https://www.photoshop-cafe.de/bildupload/pics/sonst/1485886464_Tranzparent_300x300_Hauptbutton.png (https://www.photoshop-cafe.de/bildupload/pics/sonst/1485886464_Tranzparent_300x300_Hauptbutton.png)
https://www.photoshop-cafe.de/bildupload/pics/sonst/1485886464_Tranzparent_300x300_Hauptbutton_andereB alken.png (https://www.photoshop-cafe.de/bildupload/pics/sonst/1485886464_Tranzparent_300x300_Hauptbutton_andereB alken.png)

Hier mal der Button wenn er, sagen wir mal kein Status hat. Was man hier nicht sieht der Button hat einen 1 Pixel Rand in einem Grau wie der mittlere Balken.

https://www.photoshop-cafe.de/bildupload/pics/sonst/1485886613_Tranzparent_300x300_Hauptbutton1.png (https://www.photoshop-cafe.de/bildupload/pics/sonst/1485886613_Tranzparent_300x300_Hauptbutton1.png)

Wäre für eure Hilfe sehr dankbar.

VG
Stefan

[gelöschter User]

Dazu gibt es ein eigenes Werkzeug - den "Linienzeichner"

Es ist gut möglich, dass sich dieses etwas versteckt - einfach auf das kleine Dreieck des Buttons klicken und du siehst alle Werkzeuge dieser Werkzeuggruppe.

Die Einstellungen, wie Farbe oder Stärke(Dicke) sind zuerst gar nicht so wichtig.

Um deine Linie schnurgerade auszurichten, drücke während des Aufziehens die Shift Taste.

Im nachhinein kannst du deine Linie mit dem schwarzen Pfeil anwählen und oben in der Leiste alle Werte verändern.
(der schwarze Pfeil kann sicht hinter dem weissen Pfeil verstecken...)

https://www.photoshop-cafe.de/bildupload/pics/sonst/thumb/1485938037_linien.jpg (https://www.photoshop-cafe.de/bildupload/pics/sonst/1485938037_linien.jpg)

[Jyrki]

@haakenson
Super Danke. Dann wäre das mit der Linie mal erledigt. Hast du noch Vorschläge zu den anderen Punkten?

Wie kann ich am besten die Abstände der einzelnen Linien einstellen/kontrollieren? Also das praktisch die einzelnen Linien die gleichen Abstände haben.

[dertarek]

Menü -> Ebene -> Verteilen / Ausrichten. Vorraussetzung ist das jede Linie auf einer eigenen Ebene ist.

[Jyrki]

@dertarek
Danke für die Hilfe.

[Jyrki]

Im nachhinein kannst du deine Linie mit dem schwarzen Pfeil anwählen und oben in der Leiste alle Werte verändern.
(der schwarze Pfeil kann sicht hinter dem weissen Pfeil verstecken...)


Irgendwie kann ich mit dem schwarzen Pfeil nichts auswählen bzw. kann oben keine Werte wie länge und breite verändern.

Edit: Hab's rausgefunden. Habe beim Rechteckwerkzeug oben "Pixel" ausgewählt anstatt "Pfad"

[Jyrki]

Ich hätte mal wieder ein Problem. Wie kann ich diese Effekte am besten herstellen?

Bild 1: der rechte Balken
Bild 2: der leuchtbalken
Bild 3/4: die Vertiefung am Außenrand
Bild 4: diese Form

https://www.photoshop-cafe.de/bildupload/pics/sonst/1486349634_source-ipad-blank-default.png (https://www.photoshop-cafe.de/bildupload/pics/sonst/1486349634_source-ipad-blank-default.png)https://www.photoshop-cafe.de/bildupload/pics/sonst/1486349634_source-ipad-blank-selected.png (https://www.photoshop-cafe.de/bildupload/pics/sonst/1486349634_source-ipad-blank-selected.png)https://www.photoshop-cafe.de/bildupload/pics/sonst/1486349634_round-blank-medium-default.png (https://www.photoshop-cafe.de/bildupload/pics/sonst/1486349634_round-blank-medium-default.png)
https://www.photoshop-cafe.de/bildupload/pics/sonst/1486349917_runder_Button.JPG (https://www.photoshop-cafe.de/bildupload/pics/sonst/1486349917_runder_Button.JPG)


Quelle:
http://getirule.com/support/download/
Wäre für Hilfe dankbar.

[gelöschter User]

Statt stundenlang selbst zu bauen kannst du ja auch kostenlose Ressourcen nutzen:
http://ui-cloud.com/free-ui-elements/

[Jyrki]

Danke, ich schaue mir mal die Seite an. Würde natürlich auch gerne was lernen dabei.

Edit: Wird schwer werden eine Sammlung zu finden das alles enthält, was ich benötige.

[heikehk]

Hallo Jyrki, wo kommen die Beispielsbilder her?

[Jyrki]

Das sind frei erhältliche Buttons von iRule.

[heikehk]

Bitte schick mir die links zu den Bildern. Im Upload ist klar definiert, dass nur Bilder auf den Server geladen werden dürfen, an welchen du die Rechte hast.
Alles andere bitte ordentlich verlinken.

[Jyrki]

Habe mich jetzt doch entschlossen ein GUI Kit zu kaufen. Wie gehe ich den vor wenn ich aus dem Kit z.B. ein Button nehmen möchte. Gehe ich dann auf die Gruppe mit rechter Maustaste->Exportieren als...? Bleiben die Standard Einstellungen oder muss ich da noch was besonderes Einstellen außer natürlich das Format?
Sorry für die vielen Anfänger Fragen.

[heikehk]

Hi Jyrki,

Anfängerfragen sind kein Problem. Dafür sind wir ja auch hier. Man muss nur manchmal die Entscheidung treffen, ob es Sinn macht, sich die Arbeit zu machen, oder ob es einfacher ist auf etwas Vorhandenes zurück zu greifen. Du kannst in den Dateien ja eventuell spicken und lernen :)

LG
Heike