Neues in der Creative Cloud: Photoshop CC Updates erklärt

Neues in der Creative Cloud: Photoshop CC 14 (Juni 2013) – 02 Allgemeines und Verbesserungen für Webdesigner

Alle Videos des Tutorials Neues in der Creative Cloud: Photoshop CC Updates erklärt

Verbesserungen beim Bildgröße-Dialog

Wie auch beim Selektiven Scharfzeichner wurde die Dialogbox in der Optik überarbeitet. Wir haben beim Bildgröße-Dialog endlich eine Vorschau erhalten. Die Dialogbox kann auch vergrößert werden.

Neues in der Creative Cloud: Photoshop CC 14 (Juni 2013) –  02 Allgemeines und Verbesserungen für Webdesigner

Es stehen mir jetzt Vorgaben zur Verfügung und ich kann auch benutzerdefinierte Vorgaben anlegen. Wenn ich also etwa wie in meinem Beispiel eine größere Grafik immer in der gleichen Bildgröße ausgeben muss, kann ich mir das gleich als Vorgabe sichern. Im sich öffnenden Dateibrowser gebe ich einfach meiner Vorgabe einen Namen (hier: "Shop-Detailansicht für Cover") und schon steht diese in meiner Vorgabenliste für mich bereit. Eine gute Neuerung!

Neues in der Creative Cloud: Photoshop CC 14 (Juni 2013) –  02 Allgemeines und Verbesserungen für Webdesigner

Zudem wurde eine neue Interpolationsmöglichkeit eingeführt, und zwar die Berechnungsmethode Details erhalten (Vergrößerung). Diese ermöglicht mir einen besseren Schärfeerhalt bei Bildvergrößerungen, weil mit der Vergrößerung gleichzeitig eine leichte Scharfzeichnung erfolgt.

Wenn ich die Berechnungsmethode Details erhalten auswähle, kann ich mit der Vergrößerung auch gleich das durch die leichte Schärfung entstehende Rauschen reduzieren. Dank der Vorschau lässt sich auch optimal die zu erwartende Bildveränderung durch die Bildgrößenänderung beurteilen und entsprechend bei der Rauschreduzierung reagieren.

Neues in der Creative Cloud: Photoshop CC 14 (Juni 2013) –  02 Allgemeines und Verbesserungen für Webdesigner

Text-Ebenen imitieren Webansicht

Wenn wir Weblayouts für Kunden erstellen, dann erklären wir unseren Kunden bei der Vorstellung des Designs, dass die Schrift von Gerät zu Gerät und von Browser zu Browser leicht variieren kann.

Ein Beispiel: Unser Startseitenentwurf im Rahmen unserer Agenturtätigkeit (4eck-media.de) als Bilddatei (oben) für die Website kosmetik-uhl.de und die Ansicht im Webbrowser (unten).

Neues in der Creative Cloud: Photoshop CC 14 (Juni 2013) –  02 Allgemeines und Verbesserungen für Webdesigner

Nun hat Adobe in Photoshop CC den Optionen zur Textglättung auch zwei Webmodi hinzufügt. Bei meinem System ist es Windows und Windows-LCD. Ein Mac-Anwender erhält Mac und Mac-LCD. So lässt sich optimal imitieren, wie der Text dann später in der Website wirken wird. Optimal wäre es gewesen, wenn Mac und Windows als Modi bereitstünden zur Auswahl, denn mein Eindruck ist es, dass bei Mac der Text immer ein Stück stärker ausgegeben wird als unter Windowssystemen.

Neues in der Creative Cloud: Photoshop CC 14 (Juni 2013) –  02 Allgemeines und Verbesserungen für Webdesigner

CSS kopieren

Bei uns in der Agentur wurde bis Photoshop CS6 das kostenpflichtige Plug-In CSS Hat verwendet, mit dem es möglich ist, Vektorformen und Ebenenstile als CSS3-Code zu konvertieren. Diese Funktion wurde jetzt in Photoshop CC aufgenommen. Ich kann also Textebenen oder Formebenen einfach mit Rechtsklick ansteuern und den CSS-Code kopieren – und anschließend dann in einem Editor einfügen. Auch wenn nicht in jedem Fall der CSS-Code immer so übernommen werden kann (z. B. wegen der absoluten Position), so ist es doch leichter, exportierten CSS-Code zu editieren als ihn von Grund auf neu zu schreiben.

Neues in der Creative Cloud: Photoshop CC 14 (Juni 2013) –  02 Allgemeines und Verbesserungen für Webdesigner

Schön ist, dass auch Ebenenstile berücksichtigt werden. Hat meine Form beispielsweise einen Schlagschatten, so findet sich dieser als box-shadow in der CSS-Ausgabe wieder. Möchte ich mehrere Objekte gleichzeitig als CSS kopieren, muss ich diese in eine Gruppe platzieren und dann mit Rechtsklick auf die Gruppe CSS kopieren wählen.

Neues in der Creative Cloud: Photoshop CC 14 (Juni 2013) –  02 Allgemeines und Verbesserungen für Webdesigner

Webfarben importieren

In Photoshop CC ist es möglich, über das Menü des Farbfeld-Bedienfeldes Webfarben den bestehenden Farben anzufügen bzw. diese zu ersetzen. Speichere ich einfach einmal eine Website unter Speichern unter, so erhalte ich einen ganzen Wust an Dateien, darunter eine HTML-Datei und einige CSS-Dateien. Die darin festgelegten Webfarben kann ich jetzt importieren.

Neues in der Creative Cloud: Photoshop CC 14 (Juni 2013) –  02 Allgemeines und Verbesserungen für Webdesigner

So brauche ich nicht den Weg über einen Screenshot und die Pipette zu nehmen, wenn ich mir die richtigen Farben picken möchte. Als Beispiel lade mir einfach die HTML- und CSS-Datei von C4D-Treff.de, um beispielsweise das prägnante Rot zu erhalten, wenn ich nach dieser Farbvorgabe weitere Medienprodukte in Photoshop erstellen möchte.

Neues in der Creative Cloud: Photoshop CC 14 (Juni 2013) –  02 Allgemeines und Verbesserungen für Webdesigner

ICONS TEST

/sprites/ui.svg:

alert
apple-pay
apple
arrow-down
arrow-right
arrows
checkbox
checked
chevron-down-small
chevron-down
chevron-left
chevron-right-doble-primary
chevron-right
chevron-up-small
chevron-up
close-cross
close-small
close
cog
complete
copy
eye-lock
eye
facebook-logo
file
form-select-arrow-up
form-select-arrow
google-icon
icon-als-gast-fortfahren_b
icon-anmelden1_b
icon-anmelden2_b
icon-globe
icon-neues-konto-erstellen_b
icon-resize-out
information-icon-button
left-align
letters
like
link-arrow
link
list-icon
lock
mail
medal
moon
notification
open-small
picture
pinterest-2
play
plus-white
quizz
rate
refresh-211
refresh-282
reset
reward
search-thin
search
star
sun
user
warenkorb

/sprites/image-editor.svg:

align-center
align-left
align-right
alignment-center
alignment-left
alignment-right
alignment-vertical-bottom
alignment-vertical-center
alignment-vertical-top
background-test
background
bold
bring-forward
bring-to-front
capslock
change-size
check-point
constrain
copy
crop-image
delete
download
edit-file-name
editable
flip-horisontally
flip-vertically
group-layer
help
hide
italic
justified
layers
line-spacing
lock
not-editable
open-group
paste
redo
rotate
save
send-backward
send-to-back
shape-layer
shapes
show
strike
text-layer
text
translate
underline
undo
unlock
zoom-in
zoom-out

/sprites/paint.svg:

brush
clear
cursors
eraser
escape
full-screen
marker
navigate
pencil
print
refresh
save
spray
zoom-in
zoom-out

/sprites/theme.svg:

001-01
001-02
001-03
001-04
001-05a
001-05b
001-05c
002-05a
3d-square-software-icon-dark
architektur-software-icon-dark
arrows-down-active
arrows-up-active
assets-templates-download-icon-dark
butterfly-answer-icon-dark
category-icon-example
certificate_alternate
certificate_downloaded
certificate_grey
certificate_primary
edit-multiple
edit
facebook
folder
grey-pause
grey-play
grey-stop
icon-als-gast-fortfahren_c
icon-anmelden1_c
icon-anmelden2_c
icon-neues-konto-erstellen_c
icons-cookie
instagram
interests-1
lamp-idea-bulb-smart-icon-dark
linkedin
pinterest
plus
red-cross
reload
toggle-list-active
toggle-list
toggle-on-off-active
toggle-on-off
toggle-single-active
toggle-single
toggle-switch-active
toggle-switch
trash
trophy-inactive
urkunden-zertifikate-software-icon-dark
video-streaming-icon-dark
xing

/sprites/banners.svg:

bild
icons8-google
proven_expert_4eck-tutkit

/sprites/elements-of-design.svg:

annika-hillger
annika-hillger
annika-hillger
annika-hillger_100
annika-hillger_100
annika-hillger_100
blockquote-border-line
icons-svg-log-in
svg-log-in
svg-registration

/sprites/logotypes.svg:

logo-big-colored
logo-big-dark
logo-big-green
logo-big
logo-dark
logo-green
logo-light-grey
logo-light-white
logo-mini-dark
logo-mini-green
logo-mini
logo-payment
logo-small-dark
logo-small-green
logo-small
logo-tutkit
logo
tutkit_pirate-bay
tutkit_voucher_top

/sprites/payment-provider.svg:

apple-pay-2
apple-pay-white
apple-pay
card-bank
card-mastercard
card-paypal
creditcard
g-pay-2
g-pay
google-pay-2
invoice
mastercard
payment-google-pay
paypal-2
paypal
sepa
visa
[]