Jump to content
You must now use your email address to sign in [click for more info] ×

Recommended Posts

5adeddc214e63_ScreenShot2018-04-24at08_27_43.png.e1eee0edbaa29d82f530a8d4b01d870e.png

 

Swatches panel

The Swatches panel makes it easy to use predefined colours, and also to define, store and reuse your own selection of colours.

About the Swatches panel

The Swatches panel stores your recently used colours and lets you access a range of predefined palettes, each containing solid or gradient fill swatches. These can be selected for use with various tools and for applying directly to objects. You can also create and store your own swatches as custom colour palettes either for the document, application or system-wide, as well as import any exported Affinity .afpalette from other users or import Adobe Swatch Exchange (ASE) palettes.

As well as accessing palette, you can create global and spot colours, and make colours overprint. Your registration colour can also be customized.

Swatches panel: (A) Colour 1/Colour 2 (left) or Stroke/Fill colour selectors with colour 'none' swatch and 'swap' arrow, (B) Colour picker tool and picked colour swatch, (C) Category list (showing Application, left, and Document, right), (D) Category colour palette swatches, (E) Search, (F) Panel Preferences, (G) Opacity control, (H) Recently used colours, (I) None, Black, Mid-grey and White swatches, (J) Add current colour to palette as a global colour, (K) Add current fill to palette, (L) Registration colour, (M) Global colour, (N) Overprint colour, (O) Spot colour.

Markings which distinguish specialist colour swatches: (A) Global, (B) Overprint, (C) Spot.

Like the Colour panel, the Swatches panel has different states depending on the active Persona and on the selected tool. The large colour swatch selectors indicate the currently selected colours.

The Swatches panel also shows None, Black, Mid-grey and White swatches, recently used colours and an opacity control. Swatches are organized into colour palettes by category.

 To add a customized registration colour for professional printing, click Panel Preferences, then select Add Registration Colour.

Preset colour palettes (available from the category list pop-up menu) include macOS colour palettes such as Apple, Web Safe Colours, System, and Crayons.

 To list swatches by name instead of thumbnail, click Panel Preferences, then select Show as List

Colour selector swatches

In Draw Persona, objects have stroke and fill properties. The stroke colour is represented by the cutout colour selector swatch (A below). The fill is represented by the solid colour selector swatch (B below).

Here's the swatches that you'll see for vector and pixel tools.

The selected swatch selector is at the front. In this illustration the selected colour selector swatch is: (A) Stroke, (B) Fill, (C) Foreground (Colour 1), and (D) Background (Colour 2).

The active swatch is whichever is shown in front of the other. You can quickly switch between swatch selectors by pressing the x .

These swatches change appearance for some vector tools.

  •  Fill Tool: When selected, only one colour selector swatch is shown to represent the fill only.
  •  Vector Brush Tool: When selected, the panel shows foreground and background swatches that can be swapped by clicking the adjacent double arrow.

Working with palettes

The ten most recently used colours are automatically added to the panel on a temporary basis. You can permanently store custom colours and gradients that you use most often in any of the palettes or you can create custom palettes to host them.

Although you can add colours to any of the predefined palette categories, we recommend that you always create your own. 

The following types of palette exist within Affinity Designer:

  • Document—these palettes are saved within the current document.
  • Application—these palettes are saved within Affinity Designer. These palettes are available to any Affinity Designer document.
  • System—these palettes are saved to your operating system. These palettes are available within Affinity Designer and other applications installed on your system.
  • PANTONE®—these palettes are based on PANTONE® Colours. These palettes are available to any Affinity Designer document.

Saving and deleting custom colour palettes

 To create a new palette:
  • Click Panel Preferences and choose an Add Palette option.

From Panel Preferences, you can also rename and delete the selected palette.

 To save a colour or gradient to a palette:
  1. On the Swatches panel, select a palette from the palette pop-up menu.
  2. Do one of the following:
    • -click an object, then from the pop-up menu, click Add to Swatches and choose to add colour from fill, stroke or both.
    • Select Add current colour to palette. Use the Stroke/Fill colour selector to target the colour.
To edit a saved swatch:To delete a saved swatch:

Generating a palette from document

You can generate a palette from the colours used throughout your document.

 To generate a palette from document:
  • Click Panel Preferences and choose an option from Create Palette from Document.

A new palette is created (named after the document) using all the colours currently in the document.

Sharing custom palettes

You can also share custom colour palettes for use by other Affinity users.

 To export a colour palette: To import a colour palette:
  1. Click Panel Preferences and select a palette type from the Import Palette sub-menu.
  2. Locate the file you want to import and click Open.

The newly imported palette will now be available to choose in the palette pop-up menu.

Using the above method you can also import palettes from Adobe applications (such as Illustrator, InDesign and PhotoShop) using an Adobe Swatch Exchange file (*.ase).

iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

  • 3 weeks later...
  • 2 years later...

Sorry to necropost, but the swatches palette really needs dumbing down. I read the mammoth post above and I still didn't have a clue how to add the currently picked colour as a swatch. This is such a basic thing it should be self-evident. I tried dragging, I tried "Add Global color" from the dropdown menu, which opens another window with an identical color selector and whatever I did, I got a black swatch. 

That is, until I saw this icon with the 2px "+" in its lower corner. That's just insane, you're trying to represent the whole swatches palette in one 10x10px icon with all the relevant information in a quarter of its size! Just replace this icon with a full-size "+" and people with normal eyesight will immediately know what it does. You don't need to draw the swatches palette when you're IN the swatches palette. People already know. They're just looking for the plus button.

 

Screenshot 2020-10-13 at 13.08.33.png

Link to comment
Share on other sites

1 hour ago, Samuli said:

Sorry to necropost, but the swatches palette really needs dumbing down. I read the mammoth post above and I still didn't have a clue how to add the currently picked colour as a swatch. This is such a basic thing it should be self-evident. I tried dragging, I tried "Add Global color" from the dropdown menu, which opens another window with an identical color selector and whatever I did, I got a black swatch. 

That is, until I saw this icon with the 2px "+" in its lower corner. That's just insane, you're trying to represent the whole swatches palette in one 10x10px icon with all the relevant information in a quarter of its size! Just replace this icon with a full-size "+" and people with normal eyesight will immediately know what it does. You don't need to draw the swatches palette when you're IN the swatches palette. People already know. They're just looking for the plus button.

 

Screenshot 2020-10-13 at 13.08.33.png

For me it's decently sized but this surely depends on your screen size/resolution/DPI,

however it's one of the obvious two controls the swatches panel offers and both have a pretty precise tooltip, I mean you don't even have to decipher the icon itself...?

Untitled.png

Link to comment
Share on other sites

I’m happy for you, you must have excellent vision! As for tooltips, I work on a cintiq and hovering doesn’t happen by accident and it’s actually not as easy to achieve as you’d think. 
 

So do you think the icon is clearer as it is than if they used the full area for the plus sign?

Link to comment
Share on other sites

1 minute ago, thatGuy said:

Sure it could be improved, if I'd have to rely on the icon alone it would require a closer look for me as well,

but it's not one in 15 different controls to figure out - it's one in two that up to a point both do what you're searching for.

To be honest, it took me a while to realize they were buttons because they are 

1. Tiny

2. Sandwiched between more pronounced UI elements

3. Incredibly vague, I have no idea what the second icon is depicting… a chain maybe? Why?

For an app that’s designed for graphic designers I think that’s something to complain about. Affinity needs better UI design guidelines across the board. I’ve been using all of their apps for a couple of years off and on and I still need to google basic functionality all the time. That is not good design. 

This thing actually takes 5 minutes to fix, there’s no code change required, just a new asset. For what it’s worth, I much prefer a fewer featured app that is very polished to a rough app that has many features. If I spend 30 minutes finding out how something works, that’s 30 minutes from making my deadline. Considering how deadlines have progressed in recent years, that 30 minutes is increasingly precious. 

Link to comment
Share on other sites

3 hours ago, Samuli said:

So do you think the icon is clearer as it is than if they used the full area for the plus sign?

I do. The reason is if it was just a large plus sign, I think many users would assume its function was to add a new palette rather than a new color to the current palette.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

17 minutes ago, R C-R said:

I do. The reason is if it was just a large plus sign, I think many users would assume its function was to add a new palette rather than a new color to the current palette.

Yes, that’s because Affinity also made the proximity mistake, placing the swatch buttons next to the palette selector instead of the bottom of the panel like in every other app. They’re trying to cram everything into the same tiny space but forget that information needs to have hierarchy in concept and space. I’m also not suggesting my off-the-cuff solution is the only possible one.
 

I think the bigger issue is still that the icon is illegible for anyone without perfect eyesight and a high ppi display. Adobe has made this work, Corel has made this work, Smith Micro has made this work, I’m sure Affinity could make it work too. But this does not work. 

Link to comment
Share on other sites

13 minutes ago, Samuli said:

Yes, that’s because Affinity also made the proximity mistake, placing the swatch buttons next to the palette selector instead of the bottom of the panel like in every other app.

That is one way to look at it. Another is that by not placing those buttons at the bottom of the panel, they have freed up space in the palette for other things like the current palette's color swatches & as a consequence of that, freed up more space either for more palettes or more available space for the current document(s) in the available workspace.

So while it may make it harder to learn what some buttons do initially, once learned it can also reduce the need to open & close palettes, scroll through their items to get to the desired one if they all can't fit in it simultaneously, and/or zoom & pan around in the document(s) to see or operate on some part of it during typical workflows.

Personally, this is one of the things I like a lot about Affinity.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

6 hours ago, Samuli said:

I have no idea what the second icon is depicting… a chain maybe? Why?

I'm not sure what it depicts either, but the tooltip describes it adequately for me: Add current color to palette as a global color.

-- Walt
Designer, Photo, and Publisher V1 and V2 at latest retail and beta releases
PC:
    Desktop:  Windows 11 Pro, version 23H2, 64GB memory, AMD Ryzen 9 5900 12-Core @ 3.00 GHz, NVIDIA GeForce RTX 3090 

    Laptop:  Windows 11 Pro, version 23H2, 32GB memory, Intel Core i7-10750H @ 2.60GHz, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU.
iPad:  iPad Pro M1, 12.9": iPadOS 17.4.1, Apple Pencil 2, Magic Keyboard 
Mac:  2023 M2 MacBook Air 15", 16GB memory, macOS Sonoma 14.4.1

Link to comment
Share on other sites

5 minutes ago, GonzoC said:

I only have one button, the one with plus sign.

But I can click it like crazy and still nothing happens.

Can they be de-/activated somehow?

You'll only have that button unless you have a Document Palette selected. With a Document Palette selected you'll have two buttons.

The one button you have is for adding the current Fill value to the palette. What object/layer do you have selected when you click the button? Does the object/layer have a Fill?

Can you give us a screenshot showing the workspace, the Swatches panel, and the Layers panel?

-- Walt
Designer, Photo, and Publisher V1 and V2 at latest retail and beta releases
PC:
    Desktop:  Windows 11 Pro, version 23H2, 64GB memory, AMD Ryzen 9 5900 12-Core @ 3.00 GHz, NVIDIA GeForce RTX 3090 

    Laptop:  Windows 11 Pro, version 23H2, 32GB memory, Intel Core i7-10750H @ 2.60GHz, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU.
iPad:  iPad Pro M1, 12.9": iPadOS 17.4.1, Apple Pencil 2, Magic Keyboard 
Mac:  2023 M2 MacBook Air 15", 16GB memory, macOS Sonoma 14.4.1

Link to comment
Share on other sites

2 hours ago, R C-R said:

That is one way to look at it. Another is that by not placing those buttons at the bottom of the panel, they have freed up space in the palette for other things like the current palette's color swatches & as a consequence of that, freed up more space either for more palettes or more available space for the current document(s) in the available workspace.

So while it may make it harder to learn what some buttons do initially, once learned it can also reduce the need to open & close palettes, scroll through their items to get to the desired one if they all can't fit in it simultaneously, and/or zoom & pan around in the document(s) to see or operate on some part of it during typical workflows.

Personally, this is one of the things I like a lot about Affinity.

I do admit that I have a very strong dislike of UI cramming. I like my workspace calm and spacious and tightly crammed buttons increase stress for me. I realize there are a lot of people who want everything in a tiny cluster and it’s not just a simple ”engineers vs. designers” debate, but yeah, they go too far when legibility is at stake. 
 

5 minutes ago, walt.farrell said:

I'm not sure what it depicts either, but the tooltip describes it adequately for me: Add current color to palette as a global color.

I’m sure that they should aim for better than that in a graphic design app. Tooltips are crutches, especially when they are just a mask for what it really is – they made the buttons too small and the icons too complex. And like I said, tooltips aren’t trivial to access on a cintiq. 
 

If you’re fine with bad design and it doesn’t get in the way of your work, that’s ok, but it has nothing to do with my point. If you need a tooltip to find out even the ballpark of what an icon is supposed to depict, why is the icon even there? What is its function other than a placeholder?
 

There will always be a bunch of people who aren’t bothered. The real question is would you be bothered if it worked better? So, why fight it?

Link to comment
Share on other sites

5 minutes ago, Samuli said:

. If you need a tooltip to find out even the ballpark of what an icon is supposed to depict,

The online help is quite detailed about the Swatches Panel.

Mac Pro (Late 2013) Mac OS 12.7.4 
Affinity Designer 2.4.0 | Affinity Photo 2.4.0 | Affinity Publisher 2.4.0 | Beta versions as they appear.

I have never mastered color management, period, so I cannot help with that.

Link to comment
Share on other sites

4 hours ago, Samuli said:

I realize there are a lot of people who want everything in a tiny cluster and it’s not just a simple ”engineers vs. designers” debate, but yeah, they go too far when legibility is at stake.
{...}


If you’re fine with bad design and it doesn’t get in the way of your work, that’s ok, but it has nothing to do with my point.

As I see it, your point actually is that you are on one side of a debate that you acknowledge has two sides. Some people are on the other side, in part because using more space gets in the way of the work.

As for tooltips, help topics, video tutorials, & other learning aids, if they are not part of it, then why are there so many of them for other apps like the Adobe ones?

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

9 hours ago, R C-R said:

As I see it, your point actually is that you are on one side of a debate that you acknowledge has two sides. Some people are on the other side, in part because using more space gets in the way of the work.

As for tooltips, help topics, video tutorials, & other learning aids, if they are not part of it, then why are there so many of them for other apps like the Adobe ones?

Ok, this is what I said: ”This icon doesn’t work, it’s too small and vague.” You said: ”Look, there are other things that do its job.” I said: ”There are other apps in which this icon works.” See the difference? You don’t have to agree with me but the discussion is about the icon, not all the documentation Affinity has come up with to explain the problem away. 

Let’s put this into a form that’s more approachable: you design a book cover, but let’s say only 25% of the target audience can read it. The back cover does a good job explaining what the front cover is about but you still don’t exactly know why. Is the front cover good? Is it fulfilling its task? This is the same thing, the icon should work. I think I’ve proven that it can work much better because it does in other pro apps.

Edited by Samuli
Removed snark, sorry.
Link to comment
Share on other sites

20 minutes ago, Samuli said:

You don’t have to agree with me but the discussion is about the icon, not all the documentation Affinity has come up with to explain the problem away. 

The discussion is about more than the size, placement, or vagueness of this or any other icon or button. It is also about efficient use of screen space, how that affects workflows, & why apps of similar complexity all offer various learning aids.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.