Mastering Strokes: Ignoring Opacity For Creative Freedom

When working with vector graphics, it's common to want to adjust the opacity of individual elements, such as the stroke or fill of a shape. However, in some software, the opacity settings for the stroke and fill are linked, making it challenging to adjust them independently. To get the stroke to ignore opacity settings and maintain its full opacity while adjusting the fill opacity, you can employ a few techniques. One method is to utilize the Appearance panel in applications like Adobe Illustrator, where you can find the Opacity setting for the stroke and fill separately. Simply adjust the arrow to the left of Stroke/Fill to access the desired opacity level. Alternatively, you can ungroup the shape, effectively turning the stroke into a separate shape, allowing for independent adjustments. Another approach is to adjust the alpha channel in the stroke color, as the opacity for the stroke or fill is a part of its color settings. By manipulating the alpha channel, you can achieve the desired transparency effect without interfering with the fill.

Using the Appearance Panel in Adobe Illustrator

The Appearance Panel in Adobe Illustrator is a feature that allows you to edit an object in multiple different ways. It lets you manage different properties of an object at the same time without making copies of it. It is a great tool to modify and add to the visual presentation of an object.

To open the Appearance Panel, go to the Window menu at the top of the Illustrator window and select Appearance from the list. Alternatively, you can use the shortcut Shift+F6. The Appearance Panel will also automatically show up on the Properties Panel when you select an object.

The Appearance Panel shows the attributes of selected objects, including text and paths. When selecting text, the panel will display three main attributes: Stroke, Fill, and Opacity, as well as an effect button (fx) where you can apply effects to the selected object. When selecting a path, the panel will show attributes like Fill color, Stroke color, and Stroke weight.

You can apply multiple properties to one object using the Appearance Panel. For example, you can add a new stroke by clicking on "Add New Stroke" in the panel. You can then add a different color and increase the stroke weight. Similar to the layer panel, you can swap between strokes and paths, and you can add as many strokes as you like.

The Appearance Panel also allows you to duplicate items. Simply click on the "Duplicate Selected Item" button in the panel, or drag the appearance attribute onto the "Duplicate Selected Item" button. This is useful if you want to create multiple copies of an object with different properties without having to redraw the object each time.

Additionally, you can change the stacking order of appearance attributes by dragging them up or down in the Appearance Panel. This can be useful if you want to change the order in which effects are applied to your artwork.

The Appearance Panel also gives you the option to hide or remove appearance attributes. To hide an attribute, click on the Visibility icon in the panel. To remove a specific attribute, select the attribute and click on the Delete icon.

Overall, the Appearance Panel in Adobe Illustrator is a powerful tool that allows you to edit and modify objects in a variety of ways. It is a great way to manage the appearance attributes of objects and create complex illustrations.

Using the Opacity Slider in Inkscape

Inkscape is a free and open-source vector graphics editor that is commonly used for creating illustrations, icons, line arts, charts, logos, and complex paintings. It is also widely used for website and UI design, as well as for manual tracing.

The opacity slider in Inkscape allows you to adjust the transparency of objects, layers, and effects. Here are some detailed instructions on how to use the opacity slider for different purposes:

Adjusting Opacity of Objects

To adjust the opacity of an object, such as an image or a shape, follow these steps:

• Open your project in Inkscape.
• Select the object by clicking on it.
• Click on the "Object" tab and choose "Fill and Stroke".
• In the pane that opens on the right side, you will see an opacity slider at the bottom. Move the slider to the left to reduce the opacity, making the object more transparent.

Adjusting Opacity of Layers

To adjust the opacity of a layer:

• Click on the layer in the "Layers and Objects" panel.
• At the bottom of the window, you will see a text field with an "O" next to it for opacity. Enter a value between 0 (fully transparent) and 100 (fully opaque) or use the slider if it is available.

Adjusting Opacity of Effects

To adjust the opacity of effects like drop shadows:

• Duplicate the layer by going to "Layers" > "Duplicate Current Layer".
• Lower the duplicate layer by going to "Layer" > "Lower Layer" (or use the shortcut Shift+Ctrl+PgDn).
• Adjust the opacity of the duplicate layer using the "Opacity Slider/Number Entry" at the bottom of the "Layers" docked menu.

Alternatively, you can insert a "Colour Matrix" filter primitive into your filter chain to adjust the opacity of the effect. This allows you to change the alpha channel, which controls the opacity of the effect.

Using the stroke-opacity attribute in SVG

The stroke-opacity attribute in SVG is a presentation attribute that defines the opacity of the paint server (colour, gradient, pattern, etc.) applied to the stroke of a shape. The attribute can be used with the svg, circle, path, image, text, tspan, tref, altGlyph, altGlyphDef, altGlyphItem, glyph, missing-glyph, clipPath, mask, marker, pattern, cursor, filter, linearGradient, radialGradient, mesh, meshgradient, and meshpatch elements.

The stroke-opacity attribute can be used to set the opacity of the stroke colour, gradient, or pattern individually, without affecting the opacity of the fill. This is useful when you want to have a semi-transparent stroke with an opaque fill, or vice versa.

The stroke-opacity attribute takes a value between 0 and 1, where 0 is fully transparent and 1 is fully opaque. You can specify the value as a number (e.g. stroke-opacity="0.7") or as a percentage (e.g. stroke-opacity="50%"). You can also use it as a CSS property (e.g. style="stroke-opacity: .3";).

It's important to note that if the stroke opacity is different from 1, it will partially show the fill underneath. To avoid this effect, you can apply a global opacity to the entire object using the opacity attribute, or you can put the stroke behind the fill using the paint-order attribute.

Here's an example of how to use the stroke-opacity attribute in SVG:

Svg viewBox="0 0 40 10" xmlns="http://www.w3.org/2000/svg">

!-- Default stroke opacity: 1 -->

Circle cx="5" cy="5" r="4" stroke="green" />

!-- Stroke opacity as a number -->

Circle cx="15" cy="5" r="4" stroke="green" stroke-opacity="0.7" />

!-- Stroke opacity as a percentage -->

Circle cx="25" cy="5" r="4" stroke="green" stroke-opacity="50%" />

!-- Stroke opacity as a CSS property -->

Circle cx="35" cy="5" r="4" stroke="green" style="stroke-opacity: .3;" />

/svg>

In this example, the first circle has the default stroke opacity of 1, which means it is fully opaque. The second circle has a stroke opacity of 0.7, making it semi-transparent. The third circle has a stroke opacity of 50%, which is equivalent to 0.5, so it is also semi-transparent. The fourth circle uses the stroke-opacity CSS property to set the stroke opacity to 0.3, making it even more transparent.

You can also adjust the opacity of the stroke using the Appearance panel in some SVG editing software, such as Adobe Illustrator.

Using the Opacity Modifier in Blender

The Opacity Modifier in Blender allows you to change the opacity (alpha) value of stroke points. This can be used to make points go from totally transparent to totally opaque. The color transformation will be applied to the stroke/fill color or stroke hardness. When hardness is selected, the opacity affects the stroke's transparency (alpha) from the center to the border.

To use the Opacity Modifier, first enable "Stroke & Fill", "Stroke", "Fill", or "Hardness". This will make the opacity equal for the entire strokes. Then, adjust the Absolute opacity for the stroke points. A value of 1.0 respects the original alpha value of the points, a shift less than 1.0 makes the points more transparent, and a shift greater than 1.0 makes the points more opaque. For example, setting the value to 2.0 makes the points fully opaque.

In addition to the Opacity Modifier, there are other ways to control an object's opacity in Blender. If you want to adjust the opacity in the 3D viewport (solid mode), you can use the X-Ray settings. For Rendered preview mode, you can adjust the object's alpha. If using EEVEE, change the Blend Mode to something other than Opaque.

You can also control an object's opacity in Solid view mode through the color options controlled by Viewport Shading overlays. There are two main modes: Material-based and Object-based. When shading mode is set to Material, the color of the objects in the scene is controlled by Properties > Material Settings > Viewport Display > Color. The color wheel here has an Alpha channel that can be turned down for transparency. When shading mode is set to Object, colors can be decided on an individual basis via Properties > Object Settings > Viewport Display > Color.

Using the Transparency Panel in Adobe Illustrator

The Transparency panel in Adobe Illustrator is an essential tool for adding transparency effects to your artwork. Here's a detailed guide on how to use it:

Accessing the Transparency Panel

To access the Transparency panel, go to "Window" > "Transparency" in the menu bar. This will open the Transparency panel, allowing you to adjust the opacity and blending mode of objects.

Adjusting Opacity

Opacity refers to the level of transparency of an object. To change the opacity of an object, select it and then go to the Transparency panel. You can also use the Appearance panel within the Properties panel. Drag the opacity slider to the desired level, ranging from 0% (fully transparent) to 100% (fully opaque). Adjusting the opacity will make the underlying artwork more or less visible.

Working with Blending Modes

Blending modes determine how the colours of overlapping objects interact with each other. To change the blending mode, select the object and then choose the desired mode from the pop-up menu in the Transparency panel. Illustrator offers various blending modes, such as Normal, Multiply, Screen, Overlay, and more. Each mode produces distinct colour effects by altering how the base colour and blend colour interact.

Using Opacity Masks

Opacity masks allow you to create variations in transparency within an object. To create an opacity mask, select an object or group of objects, open the Transparency panel, and choose "Show Options" to see the thumbnail images. Double-click to the right of the thumbnail, and an empty mask will be created. Use the drawing tools to create a mask shape. The dark areas of the mask will be transparent, while the light areas will be visible. Grays create a scale of transparency.

Creating Knockout Groups

A knockout group is where the elements of a group do not show through each other. To create a knockout group, target the desired group or layer in the Layers panel and select "Knockout Group" in the Transparency panel. This option cycles through three states: on, off, and neutral. Use the neutral option to group artwork without affecting the knockout behaviour of the enclosing layer or group.

Applying Transparency Effects

Transparency can be added to artwork in several ways:

• Lowering the opacity of objects to reveal underlying artwork.
• Using opacity masks to create variations in transparency.
• Applying blending modes to change how colours interact among overlapping objects.
• Using gradients or meshes that include transparency.
• Adding transparent effects like drop shadows.
• Importing Adobe Photoshop files with transparency.

Remember that transparency is a powerful tool in Illustrator, and understanding how it works is essential for creating compelling designs. Play around with the Transparency panel, experiment with different settings, and you'll be able to create stunning transparent effects in your artwork!

Frequently asked questions