Step 09: Change Styles Dani Beaumont English German

Step 09: Change StylesYouTube↗ IA↗(long shot)
Education 48.9K views 140 likes 7 dislikes 17 Dec 2018

Dani Beaumont 27.1K subscribers United States YouTube↗

Click to Play Video

Customizing styles in the Asset panel is a terrific way to optimize your workflow.

Durch Anpassen der Stile im Bedienfeld „Elemente“ können Sie Ihren Arbeitsablauf optimieren.

Let's say I've built out many artboards with a good deal of content, and I decide

Angenommen, ich habe Zeichenflächen mit umfangreichen Inhalten erstellt

of course at the end of the project that I want to change a color I've been using.

und möchte beim Abschluss des Projekts eine Farbe ändern, die ich verwendet habe.

Rather than change every instance of that color manually, I can change all

Statt jede Instanz dieser Farbe manuell zu ändern,

instances of the color in bulk using the Assets panel. To do that I'm going to

kann ich im Bedienfeld „Elemente“ alle Instanzen der Farbe auf einmal ändern.

come to the lower right-hand side of the interface. You'll notice there's two

Zu diesem Zweck gehe ich zur rechten unteren Ecke der Benutzeroberfläche.

icons here. The bottom icon is the Layers panel. I'm going to select the icon above

Dort sind zwei Symbole: das untere Symbol ist das für das Bedienfeld „Ebenen“.

that for the Assets panel, and it opens up here towards the left. When you look

Ich wähle das Symbol darüber für das Bedienfeld „Elemente“ und es wird links geöffnet.

at the Assets panel you'll notice there are three sections -- colors which we're

Das Bedienfeld „Elemente“ enthält drei Abschnitte:

going to cover. There's also Character styles, and towards the bottom are Symbols. I've not added any Symbols up until this point in

„Farben“ (diesen verwenden wir), außerdem „Zeichenformate“ und weiter unten „Symbole“. Da ich in diesem Projekt noch

this project, so that's currently empty. If I scroll back up to the top there are

keine Symbole hinzugefügt habe, ist der Abschnitt leer. Wenn ich nach oben scrolle,

colors that have been added. The first thing I want to show you is how you can

sehen Sie Farben, die ich hinzugefügt habe. Zuerst möchte ich Ihnen zeigen, wie Sie diese Farben entfernen können,

remove those colors because I want to start from scratch. I'll come on in and

denn ich möchte von vorne beginnen.

click that top color then holding the shift key I'm going to click the bottom-most

Ich klicke auf die oberste Farbe, halte dann die Umschalttaste gedrückt

color to select everything in that list. I'll then right-click, and then click on

und klicke auf die unterste Farbe, um alles in der Liste auszuwählen. Dann klicke ich mit der rechten Maustaste und wähle „Löschen“,

"Delete" to remove it from the assets panel. This doesn't take it out of my project,

um die Auswahl zu entfernen.

just out of the assets panel. From here I can add colors individually by clicking

Sie wird nicht aus dem Projekt, sondern nur aus dem Bedienfeld entfernt. Jetzt kann ich einzelne Farben hinzufügen,

on a color. Let's say I want to come in and select this little color pod here.

indem ich auf sie klicke. Angenommen, ich möchte dieses Farbfeld hier auswählen.

I'm selecting the stroke, the white background, and that color green so that

Ich wähle die Konturfarbe, den weißen Hintergrund und die Farbe Grün.

when I come to the colors section and click on the plus sign all three of

Wenn ich dann im Abschnitt „Farben“ auf das Pluszeichen klicke,

those colors are brought over. Alternatively if I wanted to bring over

werden diese drei Farben übernommen. Wenn ich alle Farben übernehmen möchte, kann ich

all of the colors I could select everything on the canvas, or just click a

alles auf der Arbeitsfläche auswählen oder

particular artboard. Let's say I want to bring in the colors that are included in

auf eine bestimmte Zeichenfläche klicken. Angenommen, ich möchte die Farben

this gear artboard. I'll click on the gear artboard name, and then come back to

aus der Zeichenfläche „Gear“ übernehmen. Ich klicke auf den Namen „Gear“,

the color section, click that plus sign and it brings over all the colors in use

klicke dann im Abschnitt „Farben“ auf das Pluszeichen und alle verwendeten Farben werden übernommen.

there. If I want to change a color that's in use across my project I can come over

Um eine im gesamten Projekt verwendete Farbe zu ändern,

to that color swatch, and right click, and in the menu select "Edit". From there I can

klicke ich in diesem Farbfeld mit der rechten Maustaste und wähle „Bearbeiten“.

pick a color that's being used somewhere in the design. So let's say using the

Dort kann ich eine Farbe auswählen, die im Design verwendet wird. Ich kann

eyedropper tool come to this shade of green.

z. B. mit der Pipette diesen Grünton auswählen.

Notice that not only did the swatch on the left change, but all instances of

Nicht nur das Farbfeld auf der linken Seite wurde geändert,

that blue color here towards the right have been updated with that shade of green that I've selected. I can also just come in and type in a Hex value, or pick

sondern alle Instanzen der blauen Farbe rechts wurden mit dem Grünton aktualisiert, den ich ausgewählt habe. Ich kann auch einfach einen Hex-Wert eingeben

a shade that I'd like to apply to the design. When I click off the swatch has

oder einen Farbton für das Design auswählen.

been updated on the left, and all of the occurrences on the design canvas have

Wenn ich an eine Stelle außerhalb klicke, werden das linke Farbfeld sowie alle Instanzen auf der Arbeitsfläche

been updated as well. I can always apply a friendlier name to the color

aktualisiert. Ich kann der Farbe einen Anzeigenamen zuweisen,

now that the Hex value has changed and I'll do that by double clicking on the

nachdem der Hex-Wert geändert wurde. Dazu doppelklicke ich auf das Farbfeld und gebe

swatch here, and I'll give it a name. We'll just call it "primary pink".

ihm einen Namen: Ich nenne es „primary_pink“.

Similar videos:

Groups with Events Overview - Google Web Designer
Google Web Designer
3.4K views 15 likes 2 dislikes 03 Jan 201828% match

Layers Panel | Adobe XD
Dani Beaumont
2.1K views 8 likes 0 dislikes 21 Oct 202028% match

Repeat Grid | Adobe XD
Dani Beaumont
1.6K views 9 likes 0 dislikes 21 Oct 202028% match

Step 01: Make an Artboard
Dani Beaumont
96.3K views 225 likes 5 dislikes 17 Dec 201827% match

Components | Adobe XD
Dani Beaumont
1.6K views 8 likes 0 dislikes 29 Oct 202026% match

Components | Adobe XD
Dani Beaumont
1.3K views 8 likes 0 dislikes 21 Oct 202026% match

Step 00: Introduction
Dani Beaumont
107.9K views 481 likes 15 dislikes 17 Dec 201825% match

Template improvements - Google Web Designer
Google Web Designer
8.9K views 41 likes 2 dislikes 21 Jun 201725% match

Step 04: Preview the Prototype
Dani Beaumont
50K views 146 likes 1 dislikes 17 Dec 201820% match

Step 07: Make it Scroll
Dani Beaumont
52.5K views 158 likes 1 dislikes 17 Dec 201820% match

Step 02: Add an Image
Dani Beaumont
90K views 187 likes 20 dislikes 17 Dec 201820% match

Step 05: Make a List
Dani Beaumont
51.9K views 141 likes 2 dislikes 17 Dec 201820% match

Settings Privacy About Contact Donate