mirror of
https://github.com/penpot/penpot-docs.git
synced 2024-08-03 09:48:54 +00:00
📚 Updates to User Guide
Signed-off-by: Paul Schulz <paul@mawsonlakes.org>
This commit is contained in:
Paul Schulz
Andrés Moya
parent
7beea011fd
commit
f63709e41a
@ -3,23 +3,23 @@ title: 09· Managing color
|
||||
---
|
||||
|
||||
<h1 id="color">Managing color</h1>
|
||||
<p class="main-paragraph">At Penpot there are two main tools to manage color: the color picker and the color palette.</p>
|
||||
<p class="main-paragraph">In Penpot there are two main tools to manage color: the color picker and the color palette.</p>
|
||||
|
||||
<h3 id="color-picker">Color picker</h3>
|
||||
<p>Here you have the anatomy of the color picker:</p>
|
||||
<p><img src="/img/color-picker.png" alt="color picker" /></p>
|
||||
<ol>
|
||||
<li><strong>Eyedropper:</strong> allows you to pick any color of the objects at the viewport.</li>
|
||||
<li><strong>Color profiles:</strong> select between RGB, the harmony wheel or HSV.</li>
|
||||
<li><strong>Gradients:</strong> set linear or radial gradients.</li>
|
||||
<li><strong>Sliders:</strong> easily manage color and opacity.</li>
|
||||
<li><strong>Textboxes:</strong> if you need to set values with precision.</li>
|
||||
<li><strong>Shortcuts:</strong> switch between recent colors and libraries.</li>
|
||||
<li><strong>Color palette:</strong> a quick launcher of the palette with the selected library.</li>
|
||||
<li><strong>Eyedropper</strong> - Allows you to pick any color of the objects at the viewport.</li>
|
||||
<li><strong>Color profiles</strong> - Select between RGB, the Harmony Wheel or HSV.</li>
|
||||
<li><strong>Gradients</strong> - Set linear or radial gradients.</li>
|
||||
<li><strong>Sliders</strong> - Easily manage color and opacity.</li>
|
||||
<li><strong>Values</strong> - Set precise color values of red(R), green(G), bylue(B) and transparency(A).</li>
|
||||
<li><strong>Shortcuts</strong> - Switch between recent colors and libraries.</li>
|
||||
<li><strong>Color palette</strong> - A quick launcher of the palette with the selected library.</li>
|
||||
</ol>
|
||||
|
||||
<h3 id="color-palette">Color palette</h3>
|
||||
<p>The color palette allows you to have a selected color library at plain sight. Use the menu to easily switch between libraries.</p>
|
||||
<h3 id="color-palette">Color Palette</h3>
|
||||
<p>The color palette allows you to have a selected color library in plain sight. Use the menu to easily switch between libraries.</p>
|
||||
<p><img src="/img/color-palette.gif" alt="color palette" /></p>
|
||||
<p>There are three ways to show/hide the color palette:</p>
|
||||
<ol>
|
||||
|
||||
@ -6,13 +6,13 @@ title: 13· Components
|
||||
<p class="main-paragraph">Speed your workflow with the reusable power of components.</p>
|
||||
<p>A component is an object or group of objects that can be reused multiple times across user files (projects and teams in the future). All copies of a component used in user files are linked. That is, any update made to the Main component is reflected in all component copies (if you accept the update) . You can even create overrides for specific parts of component copies.</p>
|
||||
|
||||
<p>A component has two aspects:</p>
|
||||
<p>A component has two parts:</p>
|
||||
<ul>
|
||||
<li><strong>Main component</strong> is the source that defines the component. Main components exist only in the library, not in the viewport.</li>
|
||||
<li><strong>Component copy</strong> or instance, is a copy of the Main component that is placed at the viewport. Component copies are linked to their Main component.</li>
|
||||
<li><strong>Main component</strong> - This is the source that defines the component. Main components exist only in the library, not in the viewport.</li>
|
||||
<li><strong>Component Copy</strong> or instance. These are copy of a Main component that has been placed in the viewport. Component copies are linked to their Main component.</li>
|
||||
</ol>
|
||||
|
||||
<h3 id="component-create">Create a component</h3>
|
||||
<h3 id="component-create">Create a Component</h3>
|
||||
<p>To create a component:</p>
|
||||
<ol>
|
||||
<li>Select an object or a group of them.</li>
|
||||
@ -20,7 +20,7 @@ title: 13· Components
|
||||
</ol>
|
||||
<p><img src="/img/components-create.gif" alt="components" /></p>
|
||||
|
||||
<h3 id="component-folder">Create a folder for your components</h3>
|
||||
<h3 id="component-folder">Create a Folder for Your Components</h3>
|
||||
<p>To create subfolders in your component library, use slashes (/):</p>
|
||||
<ol>
|
||||
<li>Create a component.</li>
|
||||
@ -39,14 +39,18 @@ title: 13· Components
|
||||
<p>If a file is using a component from a Shared library that has been updated, a notification will be shown offering the options for update or dismiss.</p>
|
||||
<p><img src="/img/components-updatenotification.png" alt="components" /></p>
|
||||
|
||||
<h3 id="component-overrides">Component overrides</h3>
|
||||
<h3 id="component-overrides">Component Overrides</h3>
|
||||
<p>Overrides are differences at the copy components from their main components. With overrides you can keep changes at the component copies while maintaining synchronization with the Main component.</p>
|
||||
<p>Component layers with overrides are marked with a “*” at the layers list.</p>
|
||||
<p><img src="/img/components-overrides.gif" alt="components" /></p>
|
||||
<h4>Reset overrides</h4>
|
||||
<p>Right click and select the option “Reset overrides” at the component menu to get it to the state of the Main component.</p>
|
||||
|
||||
<h3 id="component-detach">Detach instance</h3>
|
||||
<p><strong>Note:</strong> The displayed layer name and it's contents are different things. For example,
|
||||
changing the layer name for a text layer does not change what is displayed in the viewport. This
|
||||
may cause some confusion when using components and text layers with overrides.
|
||||
|
||||
<h3 id="component-detach">Detach Instance</h3>
|
||||
<p>Detach a component copy to unlink it from its Main component will transform it in a group layer. Press <kbd>Ctrl</kbd> + <kbd>Shifth</kbd> + <kbd>K</kbd> or right click and select the option “Detach instance” at the component menu.</p>
|
||||
|
||||
<h3 id="component-show">Show main component</h3>
|
||||
|
||||
@ -1,31 +1,31 @@
|
||||
---
|
||||
title: 08· Exporting objects
|
||||
title: 08· Exporting Objects
|
||||
---
|
||||
|
||||
<h1 id="export">Exporting objects</h1>
|
||||
<p class="main-paragraph">At Penpot you can set export presets for different formats and scales.</p>
|
||||
<h1 id="export">Exporting Objects</h1>
|
||||
<p class="main-paragraph">In Peynpot you can setup export presets for different file formats and scales.</p>
|
||||
|
||||
<h3 id="export-howto">How to export</h3>
|
||||
<h3 id="export-howto">How to Export</h3>
|
||||
<p>To export an object you need to select it and at the Design panel add an export preset pressing the “+” button of the Export section.</p>
|
||||
<p>Export presets can be also found at the <strong><a href="/user-guide/the-interface/#viewmode-interface" target="_blank">View mode</a></strong> with the code tab activated.</p>
|
||||
<p><img src="/img/export-howto.gif" alt="export" /></p>
|
||||
|
||||
<h4>Remove export preset</h4>
|
||||
<h4>Remove Export Preset</h4>
|
||||
<p>To <strong>remove an export presets</strong> you have to select the object and then press the “-” button at the export preset you want to remove.</p>
|
||||
<p><img src="/img/export-remove.gif" alt="export" /></p>
|
||||
|
||||
<h3 id="export-options">Export options</h3>
|
||||
<p>The anatomy of an export setting:</p>
|
||||
<p>The options of an export:</p>
|
||||
<ul>
|
||||
<li><strong>Size:</strong> options for the most common sizing scales.</li>
|
||||
<li><strong>Suffix:</strong> especially useful if you are exporting at different scales.</li>
|
||||
<li><strong>File format:</strong> PNG SVG, JPEG.</li>
|
||||
<li><strong>Size</strong> - Options for the most common sizing scales.</li>
|
||||
<li><strong>Suffix</strong> - Especially useful if you are exporting at different scales.</li>
|
||||
<li><strong>File format</strong> - PNG, SVG, JPEG.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="export-multiple">Multiple export presets</h3>
|
||||
<h3 id="export-multiple">Multiple Export Presets</h3>
|
||||
<p>You can set as many export presets you need for the same object. Set multiple exports to get the same object in different scales and/or formats with just one click.</p>
|
||||
<p><img src="/img/export-multiple.png" alt="export" /></p>
|
||||
|
||||
<h3 id="export-artboards-pdf">Export artboards to pdf</h3>
|
||||
<p>If you have a presentation made at Penpot you might want to create a document that can be shared with anyone, regardless of having a Penpot account, or just to be able to use your presentation offline (essential for talks and classes). You can easily export all the artboards of a page to a single pdf file from the file mmenu.</p>
|
||||
<h3 id="export-artboards-pdf">Export Artboards to PDF</h3>
|
||||
<p>If you have a presentation made at Penpot you might want to create a document that can be shared with anyone, regardless of having a Penpot account, or just to be able to use your presentation offline (essential for talks and classes). You can easily export all the artboards of a page to a single pdf file from the file menu.</p>
|
||||
<p><img src="/img/export-artboards-pdf.png" alt="export" /></p>
|
||||
|
||||
@ -1,67 +1,68 @@
|
||||
---
|
||||
title: 06· Grids & layouts
|
||||
title: 06· Grids & Layouts
|
||||
---
|
||||
|
||||
<h1 id="grids-layouts">Grids and layouts</h1>
|
||||
<p class="main-paragraph">All you need to know about how to set up grids in Penpot.</p>
|
||||
<h1 id="grids-layouts">Grids and Layouts</h1>
|
||||
<p class="main-paragraph">This chapter describes all you need to know about how to set up grids in Penpot.</p>
|
||||
|
||||
<p>Grids are design aids that can help you to align content easily to a geometric structure. At Penpot there are three types of grids: <strong>square</strong>, <strong>columns</strong> and <strong>rows</strong>.</p>
|
||||
<p>Grids are design aids that are used to help you to align content to a
|
||||
geometric structure. In Penpot there are three types of grids:
|
||||
<strong>square</strong>, <strong>columns</strong> and <strong>rows</strong>.</p>
|
||||
|
||||
<p><strong>Note:</strong> grids can only be visible at the viewport and will never be shown on exports.</p>
|
||||
<p><strong>Note:</strong> Grids are only visible in the viewport and will never be shown on exports.</p>
|
||||
|
||||
<h3 id="creating-grids">Creating layout grids</h3>
|
||||
<p>Grids can only be created at artboards level. To create a grid you need to select an artboard first. At the Design panel there is a section for "Grids & Layouts", click at the "+" button to add a grid to the arboard. You can add as many grids as you want.</p>
|
||||
<h3 id="creating-grids">Creating Layout Grids</h3>
|
||||
<p>Grids are created at the artboards level. To create a grid on artboard, select the artboard. In the Design panel there is a section for "Grids & Layouts". Click the "+" button to add a grid to the artboard. You can add as many grids as you want.</p>
|
||||
<p><img src="/img/grids-create.gif" alt="grids" /></p>
|
||||
|
||||
<h3 id="hide-remove-grids">Hide and remove grids</h3>
|
||||
<h3 id="hide-remove-grids">Hide and Remove Grids</h3>
|
||||
<p>You can hide an specific grid by clicking at the eye button of a grid configuration. If you want to remove a grid, use the "-" button at the right side of the grid pill.</p>
|
||||
<p><img src="/img/grids-hide-remove.gif" alt="grids" /></p>
|
||||
|
||||
|
||||
<h3 id="square-grids">Square grids</h3>
|
||||
<h3 id="square-grids">Square Grid</h3>
|
||||
<p><img src="/img/grids-square.gif" alt="grids" /></p>
|
||||
<p>Options for square or rectangular grids are:</p>
|
||||
<p>The options for square or rectangular grids are:</p>
|
||||
<ul>
|
||||
<li><strong>Size</strong> (pixels). </li>
|
||||
<li><strong>Color</strong>.</li>
|
||||
<li><strong>Opacity</strong>. </li>
|
||||
<li><strong>Size</strong> (in pixels) </li>
|
||||
<li><strong>Color</strong></li>
|
||||
<li><strong>Opacity</strong> </li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3 id="row-layouts">Row layouts</h3>
|
||||
<h3 id="row-layouts">Row Layouts</h3>
|
||||
<p><img src="/img/grids-rows.gif" alt="grids" /></p>
|
||||
<p>Options for row layouts are:</p>
|
||||
<p>The options for row layouts are:</p>
|
||||
<ul>
|
||||
<li><strong>Rows</strong>.</li>
|
||||
<li><strong>Type:</strong> stretch, top, center bottom</li>
|
||||
<li><strong>Height:</strong> "auto" by default.</li>
|
||||
<li><strong>Gutter:</strong> the space between each row.</li>
|
||||
<li><strong>Margin</strong>. </li>
|
||||
<li><strong>Color</strong>. </li>
|
||||
<li><strong>Opacity</strong>. </li>
|
||||
<li><strong>Rows</strong></li>
|
||||
<li><strong>Type</strong> - stretch, top, center bottom</li>
|
||||
<li><strong>Height</strong> - "auto" by default.</li>
|
||||
<li><strong>Gutter</strong> - the space between each row.</li>
|
||||
<li><strong>Margin</strong></li>
|
||||
<li><strong>Color</strong></li>
|
||||
<li><strong>Opacity</strong></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3 id="row-layouts">Column layouts</h3>
|
||||
<h3 id="row-layouts">Column Layouts</h3>
|
||||
<p><img src="/img/grids-columns.gif" alt="grids" /></p>
|
||||
<p>Options for column layouts are:</p>
|
||||
<ul>
|
||||
<li><strong>Columns</strong>. </li>
|
||||
<li><strong>Type:</strong> stretch, top, center bottom.</li>
|
||||
<li><strong>Width:</strong> "auto" by default.</li>
|
||||
<li><strong>Gutter:</strong> the space between each row.</li>
|
||||
<li><strong>Margin</strong>. </li>
|
||||
<li><strong>Color</strong>. </li>
|
||||
<li><strong>Opacity</strong>. </li>
|
||||
<li><strong>Columns</strong></li>
|
||||
<li><strong>Type</strong> - stretch, top, center bottom</li>
|
||||
<li><strong>Width</strong> - "auto" by default.</li>
|
||||
<li><strong>Gutter</strong> - the space between each column.</li>
|
||||
<li><strong>Margin</strong></li>
|
||||
<li><strong>Color</strong></li>
|
||||
<li><strong>Opacity</strong></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3 id="grid-defaults">Grid defaults</h3>
|
||||
<p>There are default settings at file level. You can easly change the settings of a grid to the default ones and you can also set a grid to be the default one just by using the buttons at the bottom of the advanced options menu.</p>
|
||||
<h3 id="grid-defaults">Grid Defaults</h3>
|
||||
<p>There are default settings available at file level. You can change the settings of a grid to the file defaults by using the "Use default" button. You can also set a grid to be the default by using the "Set as default" button.</p>
|
||||
<p><img src="/img/grids-defaults.gif" alt="grids" /></p>
|
||||
|
||||
|
||||
<h3 id="grid-snap-visibility">Snap to grid and visibility</h3>
|
||||
<p>If you want to hide/show all the grids at a file you can press <kbd>Ctrl/⌘</kbd> + <kbd>´</kbd> or use the option at the main menu at the top left of the navbar.</p>
|
||||
<p>If you want to enable/disable the snapping to grids you can press <kbd>Shift/⇧</kbd> + <kbd>Ctrl/⌘</kbd> + <kbd>´</kbd> or use the option at the main menu at the top left of the navbar.</p>
|
||||
<h3 id="grid-snap-visibility">Snap to Grid and Visibility</h3>
|
||||
<p>To hide or show all the grids at a file you can press <kbd>Ctrl/⌘</kbd> + <kbd>´</kbd> or use the option at the main menu at the top left of the navbar.</p>
|
||||
<p>If you want to enable or disable the snapping to grids you can press <kbd>Shift/⇧</kbd> + <kbd>Ctrl/⌘</kbd> + <kbd>´</kbd> or use the option at the main menu at the top left of the navbar.</p>
|
||||
<p><img src="/img/grids-snap-visibility.gif" alt="grids" /></p>
|
||||
|
||||
@ -9,11 +9,11 @@ eleventyNavigation:
|
||||
<img src="/img/home-userguide.png" alt="User guide" border="0">
|
||||
</div>
|
||||
|
||||
<h1 id="user-guide">Penpot user guide.</h1>
|
||||
<h1 id="user-guide">Penpot User Guide</h1>
|
||||
|
||||
<p class="main-paragraph">In this documentation you will find (almost) everything you need to know about how to work with Penpot. From the interface basics to advanced functionality. Know details about topics such as prototyping, organizing your designs, or sharing to make a difference getting the best of Penpot.</p>
|
||||
<p class="main-paragraph">In this documentation you will find (almost) everything you need to know about how to work with Penpot, from the interface basics to advanced functionality. Learn the details on topics such as prototyping, organizing your designs, or sharing, to get the most out of Penpot.</p>
|
||||
|
||||
<p class="advice">This documentation is a work in progress that will be updated frequently. If you have a suggestion, miss something or find anything incorrect, please write us at <a href="mailto:support@penpot.app" target="_blank">support@penpot.app</a>.</p>
|
||||
<p class="advice">This documentation is a work in progress that will be updated frequently. If you have a suggestion, see something is missing or find anything that needs correcting, please write to us at <a href="mailto:support@penpot.app" target="_blank">support@penpot.app</a>.</p>
|
||||
|
||||
<ul class="intro-sections">
|
||||
<li>
|
||||
|
||||
@ -6,10 +6,10 @@ title: 10· Libraries
|
||||
<p class="main-paragraph">Asset Libraries allow you to store elements and styles so that they can be easily reused. Libraries may include components, graphics, colors and typographies. Learn how to create and manage them to better organize the pieces of your designs and speed your workflow.</p>
|
||||
|
||||
<h3 id="file-library">File library</h3>
|
||||
<p>Each file has a File Library that allows to store assets that belong to it. You can find File Libraries at the workspace. To access them click the assets panel icon at the bottom of the left toolbar or press <kbd>Alt/⌥</kbd> + <kbd>i</kbd>.</p>
|
||||
<p>Each file has a File Library that allows assets that belong to it to be stored. You can find File Libraries at the workspace. To access them, click the assets panel icon at the bottom of the left toolbar or press <kbd>Alt/⌥</kbd> + <kbd>i</kbd>.</p>
|
||||
<p><img src="/img/libraries-asset-types.png" alt="libraries" /></p>
|
||||
|
||||
<h3 id="asset-types">Asset types</h3>
|
||||
<h3 id="asset-types">Asset Types</h3>
|
||||
<p>In Penpot you can store four type of assets: components, graphics, colors and typographies:</p>
|
||||
<ul>
|
||||
<li><strong>Components:</strong> A component is an object or group of objects that can be reused multiple times across user files (projects and teams in the future). Learn more at the <a href="/user-guide/components/">components section</a>.</li>
|
||||
@ -18,7 +18,7 @@ title: 10· Libraries
|
||||
<li><strong>Typographies:</strong> Penpot allows you to save typography styles with a set of reusable properties. You can always unlink a typography style maintaining the properties for the text layer.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="add-assets-to-library">Adding assets to libraries</h3>
|
||||
<h3 id="add-assets-to-library">Adding Assets to Libraries</h3>
|
||||
<p>You can use the “+” icon to add assets. Each of the categories have their own specific action:</p>
|
||||
<ul>
|
||||
<li><strong>Components:</strong> Each Main Component is automatically stored in the library so there is no button or specific action to do it. Learn more about components at the <a href="/user-guide/components/">components section</a>.</li>
|
||||
@ -38,7 +38,7 @@ title: 10· Libraries
|
||||
</ul>
|
||||
<p><img src="/img/assets-edit.gif" alt="libraries" /></p>
|
||||
|
||||
<h3 id="edit-assets">Use assets</h3>
|
||||
<h3 id="edit-assets">Using Assets</h3>
|
||||
<ul>
|
||||
<li><strong>Components:</strong> Drag the component directly from the library to the viewport.</li>
|
||||
<li><strong>Graphics:</strong> Same as components, just drag the selected graphic to the viewport.</li>
|
||||
|
||||
@ -3,41 +3,42 @@ title: 07· Styling
|
||||
---
|
||||
|
||||
<h1 id="styling">Styling</h1>
|
||||
<p class="main-paragraph">Penpot has a variety of styling options for each selected object that can be found at the Design panel.</p>
|
||||
<p class="main-paragraph">Penpot has a variety of styling options for each object. When selected, the styling options are displayed in the design panel on the right.</p>
|
||||
|
||||
<h3 id="fill">Fill</h3>
|
||||
<p>Color fills can be added to artboards, shapes, texts and to groups of layers. A fill can be a custom color (HEX) or color style from a library.</p>
|
||||
<p>To apply a fill you can use the color picker, the color palette or the color styles from a library.</p>
|
||||
<p>You can set <strong>opacity</strong> for custom fills.</p>
|
||||
<p>Color fills can be added to artboards, shapes, texts and groups of layers. A fill can be a custom color (in Hex) or a color style from a library.</p>
|
||||
<p>To apply a fill you can use the color picker, the color palette or a color styles.</p>
|
||||
<p>You can also set the <strong>opacity</strong> for custom fill colors.</p>
|
||||
<p><img src="/img/styling-fill-apply.gif" alt="fills" /></p>
|
||||
<h4>Remove fill</h4>
|
||||
<p>To <strong>remove a fill</strong> you have to select the object and then press the “-” button at the fill section.</p>
|
||||
|
||||
<h4>Remove a Fill</h4>
|
||||
<p>To <strong>remove a fill</strong> from a selected object, press the “-” button in the fill section.</p>
|
||||
<p><img src="/img/styling-fill-remove.gif" alt="fills" /></p>
|
||||
|
||||
<h3 id="stroke">Stroke</h3>
|
||||
<h3 id="strokes">Strokes</h3>
|
||||
<p>Strokes can be added to most of the objects at Penpot (rectangles, ellipses, artboards, curves).</p>
|
||||
<p><img src="/img/styling-stroke.gif" alt="stroke" /></p>
|
||||
<p>Stroke options are:</p>
|
||||
<ul>
|
||||
<li><strong>Color and opacity</strong>.</li>
|
||||
<li><strong>Width</strong> (pixels).</li>
|
||||
<li><strong>Position:</strong> center, outside, inside.</li>
|
||||
<li><strong>Style:</strong> solid, dotted, dashed, mixed.</li>
|
||||
<li><strong>Color and opacity</strong></li>
|
||||
<li><strong>Width</strong> (in pixels)</li>
|
||||
<li><strong>Position</strong> - center, outside, inside</li>
|
||||
<li><strong>Style</strong> - solid, dotted, dashed, mixed</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="stroke-caps">Stroke caps</h3>
|
||||
<h3 id="stroke-caps">Stroke Caps</h3>
|
||||
<p>Ever needed an arrow to point something? You can style the ends of any open paths selecting different styles for each end of an open path.</p>
|
||||
<p><img src="/img/styling-stroke-caps.gif" alt="stroke" /></p>
|
||||
|
||||
<p>Stroke caps options:</p>
|
||||
<p>The stroke caps options are:</p>
|
||||
<ul>
|
||||
<li><strong>Line arrow:</strong> An simple line arrow (two lines at 45º) with the same width as the stroke.</li>
|
||||
<li><strong>Triangle arrow:</strong> An solid arrowhead witht the shape of a triangle.</li>
|
||||
<li><strong>Square marker</strong>.</li>
|
||||
<li><strong>Circle marker</strong>.</li>
|
||||
<li><strong>Diamond marker</strong>.</li>
|
||||
<li><strong>Round:</strong> Adds a round ending to the end of the path.</li>
|
||||
<li><strong>Square:</strong> Adds a rectangular ending to the end of the path.</li>
|
||||
<li><strong>Line arrow</strong> - An simple line arrow (two lines at 45º) with the same width as the stroke.</li>
|
||||
<li><strong>Triangle arrow</strong> - An solid arrowhead witht the shape of a triangle.</li>
|
||||
<li><strong>Square marker</strong></li>
|
||||
<li><strong>Circle marker</strong></li>
|
||||
<li><strong>Diamond marker</strong></li>
|
||||
<li><strong>Round</strong> - Adds a round ending to the end of the path.</li>
|
||||
<li><strong>Square</strong> - Adds a rectangular ending to the end of the path.</li>
|
||||
</ul>
|
||||
<p><img src="/img/styling-stroke-caps.png" alt="stroke" /></p>
|
||||
|
||||
@ -51,12 +52,12 @@ title: 07· Styling
|
||||
<p><img src="/img/styling-shadow.gif" alt="shadow" /></p>
|
||||
<p>Shadow options are:</p>
|
||||
<ul>
|
||||
<li><strong>Type:</strong> Drop (outside the layer), inner (inside the layer).</li>
|
||||
<li><strong>Horizontal position</strong> (X).</li>
|
||||
<li><strong>Vertical position</strong> (Y).</li>
|
||||
<li><strong>Blur</strong>.</li>
|
||||
<li><strong>Spread</strong>.</li>
|
||||
<li><strong>Color and opacity</strong>.</li>
|
||||
<li><strong>Type</strong> - Drop (outside the layer), inner (inside the layer)</li>
|
||||
<li><strong>Horizontal position</strong> (X)</li>
|
||||
<li><strong>Vertical position</strong> (Y)</li>
|
||||
<li><strong>Blur</strong></li>
|
||||
<li><strong>Spread</strong></li>
|
||||
<li><strong>Color and opacity</strong></li>
|
||||
</ul>
|
||||
|
||||
<h3 id="blur">Blur</h3>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user