[GraFx Studio] Resource Panel screenshots (#454)

docs/GraFx-Studio/concepts/barcodes/index.md

@@ -17,7 +17,7 @@ Barcodes are created and configured in GraFx Studio (different than in GraFx Pub
 - Click a barcode from the Barcode library
 - Configure using the properties panel
 
-![ui](barcodes1.gif)
+![screenshot-full](barcodes1.gif)
 
 ## Barcode-specific settings
 
@@ -38,13 +38,13 @@ The Bar height property is a decimal number in the unit of the layout
 
 Show the character that indicates the light margin
 
-![ui](barcodes2.gif)
+![screenshot-full](barcodes2.gif)
 
 ## Start and Stop characters
 
 Show the start and stop character
 
-![ui](barcodes3.gif)
+![screenshot-full](barcodes3.gif)
 
 
 ## Quiet zone
@@ -64,9 +64,9 @@ The appearance is the color for a specific part of the barcode.
 - Background represents the background color
 - Blend mode: apply [blend modes](/GraFx-Studio/concepts/blendmodes/), similar to image frames
 
-![ui](qr1.png)
+![screenshot-full](qr1.png)
 
-![ui](qr_blend.png)
+![screenshot-full](qr_blend.png)
 
 ## Magnification
 

docs/GraFx-Studio/concepts/headless/index.md

@@ -1,3 +1,13 @@
 # Headless or automated
 
-Imagine a process that runs in the background, creating collateral in an automated way.
+In the context of CHILI GraFx, **"Headless"** or **"Automated"** refers to the ability to produce design variants by interacting directly with the API, without using the graphical interface of GraFx Studio.
+
+This approach is ideal for scenarios where you want to automate the creation of large batches of content, integrate with external systems, or streamline workflows that don't require manual input. By leveraging the API, you can:
+
+- **Generate Variants at Scale**: Automatically create hundreds or thousands of variations without manual intervention.
+- **Integrate Seamlessly**: Connect GraFx Studio with your existing systems, like DAMs, PIMs, or e-commerce platforms.
+- **Run Background Processes**: Initiate batch jobs and monitor output tasks programmatically.
+
+Headless automation empowers you to use the powerful capabilities of GraFx Studio while keeping everything behind the scenes, providing flexibility and efficiency for high-volume or fully automated workflows.
+
+![screenshot-full](code.png)

docs/GraFx-Studio/guides/add-fonts/index.md

@@ -2,24 +2,26 @@
 
 Open the Stylekit panel.
 
-![Button](fonts-1.png)
+![screenshotsmall](bottom-quicktools-ui.png)
+
+![screenshot](resources-panel.png)
 
 Select the fonts icon to check the already available fonts in your document.
 
-![Image](fonts-2.png)
+![screenshot](fonts-2.png)
 
 Click on the "+" sign to add a new font.
 
 The available fonts are shown ([GraFx Fonts](/GraFx-Fonts/) application).
 
-![Image](fonts-3.png)
+![screenshot](fonts-3.png)
 
 Select the font family you wish to add to your document.
 
 Remark: The full family will be added to your document.
 
-![Image](fonts-4.png)
+![screenshot](fonts-4.png)
 
 Your font family is now available to use in the document.
 
-![Image](fonts-5.png)
+![screenshot](fonts-5.png)

docs/GraFx-Studio/guides/barcodes/add/index.md

@@ -11,24 +11,24 @@ Some properties will not be visible, because the definition of this barcode don'
 
 Some properties can be found under the "..." (three dots) menu
 
-![ui](barcodes1.gif)
+![screenshot-full](barcodes1.gif)
 
 ## Values in barcodes
 
 ### Static value
 
 By default, you can enter a static value in the barcode properties. (Set value)
 
-![ui](staticvalue.png)
+![screenshot-full](staticvalue.png)
 
 ### Variable value
 
 To unleash the power of real Creative Automation, you can link a value to a variable.
 
 Start by defining your variable. [See Variables](/GraFx-Studio/guides/template-variables/define/)
 
-![ui](variables.png)
+![screenshot-full](variables.png)
 
 Link the variable to your Bar- or QR code.
 
-![ui](variablevalue.png)
+![screenshot-full](variablevalue.png)

docs/GraFx-Studio/guides/characterstyles/index.md

@@ -2,41 +2,43 @@
 
 ## Define a character style
 
-Open the Stylekit panel.
+Open the **Resource Panel** > **Stylekit panel**.
 
-![Button](cs-1.png)
+![screenshotsmall](bottom-quicktools-ui.png)
 
-Select the second tab to view paragraph- and character styles
+![screenshot](stylekit.png)
 
-![Image](cs-2.png)
+Select the first tab to view paragraph- and character styles
+
+![screenshot](cs-2.png)
 
 Click on the "+" sign to ad a new character style (bottom section is for character styles).
 Each click on the "+" sign will add another (empty) character style.
 
-![Image](cs-3.png)
+![screenshot](cs-3.png)
 
 Click on the "..." menu next to the newly created style and choose edit or click the pencil to edit the style.
 
 You can rename the style by clicking "Rename" in the "..." menu.
 
-![Image](cs-4.png)
+![screenshot](cs-4.png)
 
 Set all properties you want for this character. Saving happens automatically.
 
-![Image](cs-9.png)
+![screenshot](cs-9.png)
 
 ## Apply a character style
 
 Select the text you want to apply the character style to.
 
-![Image](cs-6.png)
+![screenshot](cs-6.png)
 
 DIfferent than with paragraph styles, with character styles you need to select the character or words you want to apply the style to.
 
 In the properties panel on the right, select the character style from the dropdown list.
 
-![Image](cs-7.png)
+![screenshot](cs-7.png)
 
 Your selected text now has the character style applied.
 
-![Image](cs-8.png)
+![screenshot](cs-8.png)

docs/GraFx-Studio/guides/image-frame/index.md

@@ -6,21 +6,23 @@ See concept [Image frames](/GraFx-Studio/concepts/frames/#image-frame)
 
 Select the image tool in the sidebar. You can also use the shortcut for the shape you wish to draw.
 
-![screenhot](image-1.png)
+![screenshotsmall](image-1.png)
 
 Drag a rectangle on the canvas. The frame will initially look like a crossed rectangle.
 
 ![screen](image-2.png)
 
 ## Choose media
 
-With the frame selected, open the media panel, and select an asset.
+With the frame selected, open the **resource panel** > **media panel**, and select an asset.
 
-![screen](image-3.png)
+![screenshotsmall](bottom-quicktools-ui.png)
 
-![screen](image-4.png)
+![screenshot](image-3.png)
 
-![screen](image-5.png)
+![screenshot](image-4.png)
+
+![screenshot](image-5.png)
 
 The initial fit of the asset in the frame is to fill the frame. (see Fill properties below)
 
@@ -30,28 +32,28 @@ Similar properties as with all frames. See [Basic properties](/GraFx-Studio/conc
 
 ### Fill properties
 
-![screen](fitfill.png)
+![screenshot-full](fitfill.png)
 
 
 #### Fit
 
 Choose the Fit property, to fit the full imge inside the frame. Whitespace is created if needed, to fit the full image.
 
-![screen](image-7.png)
+![screenshot](image-7.png)
 
 #### Fill
 
 Choose the Fill property, to fill the full frame with the image. No whitespace is left inside the frame. Part of the image is hidden.
 
-![screen](image-6.png)
+![screenshot](image-6.png)
 
 #### Aspect radio
 
 If the image and the frame have the exact aspect ratio, there will be no difference between fitt and fill.
 
-![screen](fit.png)
+![screenshot-full](fit.png)
 
-![screen](fill.png)
+![screenshot-full](fill.png)
 
 #### Crop
 

docs/GraFx-Studio/guides/paragraphstyles/index.md

@@ -2,26 +2,28 @@
 
 ## Define a paragraph style
 
-Open the Stylekit panel.
+Open the **Resource Panel** > **Stylekit panel**.
 
-![Button](ps-1.png)
+![screenshotsmall](bottom-quicktools-ui.png)
+
+![screenshot](stylekit.png)
 
 Select the first tab to view paragraph- and character styles
 
-![Image](ps-2.png)
+![screenshot](ps-2.png)
 
 Click on the "+" sign to ad a new paragraph style.
 Each click on the "+" sign will add another (empty) paragraph style.
 
-![Image](ps-3.png)
+![screenshot](ps-3.png)
 
 Click on the "..." menu next to the newly created paragraph style and choose edit or click the pencil to edit the style.
 
-![Image](ps-4.png)
+![screenshot](ps-4.png)
 
 Set all properties you want for this paragraph. Saving happens automatically.
 
-![Image](ps-8.png)
+![screenshot-full](ps-8.png)
 
 ## Apply a paragraph style
 
@@ -30,4 +32,4 @@ A paragraph is defined between the start of a sentence, up to the end-of-line ch
 
 In the properties panel on the right, select the paragraph style from the dropdown list.
 
-![Image](ps-6.png)
+![screenshot](ps-6.png)

docs/GraFx-Studio/guides/swatches/index.md

@@ -2,24 +2,26 @@
 
 ## Define a swatch
 
-Open the Stylekit panel.
+Open the **Resource Panel** > **Stylekit panel**.
 
-![Button](stylekit-panel.png)
+![screenshotsmall](bottom-quicktools-ui.png)
+
+![screenshot](stylekit.png)
 
 Select the second tab to view swatches
 
-![Image](swatch-1.png)
+![screenshot](swatch-1.png)
 
 Click on the "+" sign to add a new swatch.
 Each click on the "+" sign will add another (white) swatch.
 
-![Image](swatch-2.png)
+![screenshot](swatch-2.png)
 
 Click on the "..." menu next to the newly created swatch and choose edit or click the color to edit.
 
 You can rename by clicking "Rename" in the "..." menu.
 
-![Image](swatch-3.png)
+![screenshot](swatch-3.png)
 
 ### Color picker
 
@@ -71,6 +73,6 @@ You can define a SPOT color with a name. This color will appear in the PDF outpu
 
 Where you can choose a color (character style or paragraph style), you'll be able to click the color and choose the swatch.
 
-![Image](swatch-5.png)
+![screenshot-full](swatch-5.png)
 
 Select "custom" to define a color ad-hoc.

docs/GraFx-Studio/overview/bottom-quicktools/index.md

@@ -2,13 +2,17 @@
 
 Set of tools at the bottom of the sidebar.
 
-- Alternate layout
+- Layouts
 - Layers & Animation
-- Media browser
-- Barcodes
-- Stylekit Panel
+- Resources
+    - Stylekit Panel
+    - Media
+    - Data Source
+    - Barcodes
 
-![appscreen](bottom-quicktools-ui.png)
+![screenshotsmall](bottom-quicktools-ui.png)
+
+![screenshot](resources-panel.png)
 
 E.g. When selecting the **Layers and Animation** tool, an extra properties panel will open.
 

docs/GraFx-Studio/overview/stylekits/index.md

@@ -1,43 +1,47 @@
 # Stylekit
 
-![appscreen](stylekit.png)
+![screenshotsmall](sk1.png)
+
+![screenshot](sk2.png)
+
+![screenshot](sk3.png)
 
 ## Text: Paragraph Styles
 
-![appscreen](paragraph-styles.png)
+![screenshot](paragraph-styles.png)
 
 The pencil button allows editting the properties.
 
 The fill color can be a custom color, or a predefined [swatch](/GraFx-Studio/concepts/stylekits/#swatch).
 
-![appscreen](select-color.png)
+![screenshot](select-color.png)
 
 
 ## Text: Character Styles
 
-![appscreen](character-styles.png)
+![screenshot](character-styles.png)
 
 ## Swatch
 
 A swatch is a color saved inside a Stylekit. You can reuse the swatch (predefined color) in paragraph- en character styles.
 
-![appscreen](swatch.png)
+![screenshot](swatch.png)
 
 Define a color, give it a name and save the named color to be used later in a style.
 
-![appscreen](swatch-2.png)
+![screenshot](swatch-2.png)
 
 ## Fonts
 
 ### Adding Fonts
 
 Select the font-book to view your fonts, and add them to the stylekit.
 
-![appscreen](fonts.png)
+![screenshot](fonts.png)
 
 Select the font family you want to add to your document.
 
-![appscreen](font-browser.png)
+![screenshot](font-browser.png)
 
 
 [See GraFx Fonts](/GraFx-Fonts/)