Difference between revisions of "Inkscape/C2/Fill-color-and-stroke/English"
Nancyvarkey (Talk | contribs) |
Nancyvarkey (Talk | contribs) |
||
| Line 671: | Line 671: | ||
|- | |- | ||
| style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:none;padding:0.097cm;"| About Slide | | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:none;padding:0.097cm;"| About Slide | ||
| − | | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:0.05pt solid #000000;padding:0.097cm;"| | + | | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:0.05pt solid #000000;padding:0.097cm;"| The video available at the following link summarizes the Spoken Tutorial project. Pls watch it. |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
|- | |- | ||
| style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:none;padding:0.097cm;"| About Slide | | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:none;padding:0.097cm;"| About Slide | ||
| − | | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:0.05pt solid #000000;padding:0.097cm;"| The Spoken Tutorial Project Team | + | | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:0.05pt solid #000000;padding:0.097cm;"| The Spoken Tutorial Project Team conducts workshops and gives certificates for those who pass an online test. |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | For more details, please write to us. | ||
|- | |- | ||
| style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:none;padding:0.097cm;"| About Slide | | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:none;padding:0.097cm;"| About Slide | ||
| − | | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:0.05pt solid #000000;padding:0.097cm;"| Spoken Tutorial Project | + | | style="background-color:transparent;border-top:none;border-bottom:0.05pt solid #000000;border-left:0.05pt solid #000000;border-right:0.05pt solid #000000;padding:0.097cm;"| Spoken Tutorial Project is supported by the NMEICT, MHRD, Government of India. |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | More information on this Mission is available at this link. | ||
|- | |- | ||
| Line 713: | Line 691: | ||
| − | This is Arthi and Saurabh from IIT Bombay, signing off. Thanks for joining. | + | This is Arthi and Saurabh from IIT Bombay, signing off. |
| + | |||
| + | Thanks for joining. | ||
|} | |} | ||
Revision as of 17:54, 6 July 2014
Title of script: Fill color and stroke
Author: Arthi. A and Saurabh Gadgil
Keywords: Fill color, Gradient and its types, Stroke paint and style
| |
|
| Opening Slide | Welcome to the Spoken Tutorial on “Fill color and stroke” using Inkscape. |
| Learning Objectives (Slide) | In this tutorial, we will learn about
|
| System requirements
(Slide) |
For this tutorial, I am using
|
| Go to Dash home and type “Inkscape”. | Let's open Inkscape.
|
| Click on Inkscape logo | You can open Inkscape by clicking on the logo. |
| Open the Assignment.svg | Let's open the Assignment.svg file that we created earlier.
|
| Point to the shapes on the canvas | These are the 3 shapes we created in an earlier assignment. |
| Point to the color palette | Recall that we had learnt to change color using the color palette at the bottom of the interface. |
| Click on the Fill and Stroke | Now we will learn how to fill colors of various types using Fill and Stroke.
|
| Point to the Fill and Stroke dialog box | Notice that the Fill and Stroke dialog box has opened on the right side of the interface. |
| Point to the 3 tabs | There are 3 tabs in this dialog box: Fill, Stroke paint and Stroke style |
| Click on the rectangle and point to Fill and stroke dialog box | Now, we will click on the rectangle in the canvas area.
|
| Point to the Fill tab | First, we will learn about the Fill tab. |
| Point to the 6 icons | Notice there are 6 icons under the Fill tab. Let us learn what these icons do. |
| Point to the No paint icon | The first icon is called No paint. It indicates that the object will not be filled with any color. |
| Click on the icon and point to the rectangle | Click on the icon and notice the change in the rectangle. The color of the rectangle has been removed.
<<PAUSE>> |
| Point to the Flat color icon | The next icon is Flat color. It helps to fill a solid color into an object. |
| Click on the icon and point to the rectangle | Click on the Flat color icon and observe the change of colour in the rectangle shape. |
| Point to the 5 modes of filling color | Under Flat color, notice that there are 5 sub-tabs. |
| Point to RGB tab | By default, RGB tab is selected. |
| Point to the RGB slider | Under RGB tab, there are 4 sliders. The first 3 sliders indicates the intensity of Red, Green and Blue colours. |
| Move the sliders in left or right directions | We can change the color by moving these sliders in left or right directions.
|
| Point to Alpha slider. | The fourth slider is the Alpha slider.
|
| Pointing to the RGBA box | As I move these 4 sliders, observe that the RGBA value of the color shown in this box, changes automatically. |
| Move one/two sliders in left or right directions | Let me move the sliders once again so that you can observe this change. |
| Point to the value of colors | We can change the color manually by changing the values of each color in the boxes at the right of the sliders. |
| Change the color values of Red, green and blue | Let me change the value of Red to 100, Green to 50 and Blue to 150.
Notice the color of the rectangle has now changed to violet. |
| Point to the Alpha slider | I keep the Alpha level as 255 since I do not want to reduce the opacity level.
|
| Point the HSL tab | The next tab is HSL and it stands for Hue, Saturation and Lightness respectively. |
| Adjust the Hue slider | We can use the Hue slider to get a base color.
|
| Adjust the Saturation slider | We can adjust the saturation of the base colour using the Saturation slider.
|
| Adjust the Lightness slider | The Lightness slider adjusts the lightness of the base color.
|
| Point to the Alpha slider | As before, the Alpha slider is used to increase or decrease the opacity level from opaque to fully transparent. |
| Point to each slider of CMYK | The next tab is CMYK which denotes Cyan, Magenta, Yellow and Black respectively. |
| Move the sliders in the left or right directions | By moving these sliders, we can increase or decrease the intensity or the depth of the base colour.
|
| Point to Wheel tab | Next is the Wheel tab. This is an alternative representation of the HSL color mixer. |
| Click on the outer ring on the Wheel | We can select the base hue by clicking on the color ring that is based on the standard color wheel.
|
| Click inside the triangle on the Wheel | Within the color circle, there is triangle with a small circle inside it.
|
| Point to CMS tab | The CMS tab will only be of real interest to those working in color managed environments. For now, we will skip this tab.
|
| Next, let us learn how to create a Linear gradient. | |
| Click on the circle. | Go to canvas and click on the circle. |
| Click on Linear gradient icon | Now come back to the Fill and Stroke dialog box and click on the Linear gradient icon. |
| Point to the circle. | Observe the gradient fill in the circle. |
| Point to gradient name | The gradient will be given a name ending with a series of random numbers.
|
| Click on Edit button | We can change the gradient by clicking the Edit button, which is right below the linear gradient number button.
|
| Point to the stop button | The top button in this box is named stop followed by some random numbers and it contains a drop down menu.
|
| Click on the transparent stop | The first one denotes the pure base colour.
Select the second option, that is, the transparent stop option. |
| Change the RGB values >> | Go to the Stop Color below.
Change the RGB values to whichever color you like, by moving the sliders. |
| Make Alpha value to 255 | Keep Alpha value at 255, to make the gradient fully visible.
Close the Gradient editor dialog box. <<PAUSE>> |
| Click on Edit path by nodes tool | Now we can change the gradient angle.
To do so, click on Node tool from the tool box, on the left of the interface. This is located right below the Selector tool. |
| == Point to the == | This will display a line on the circle.
|
| == Point to the arc handles. == | Notice 1 square handle and 1 circular handle called arc handles, at the two ends of this line. |
| == Move all the handles till the arc handles are seen clearly. == | These currently overlap with the arc handles of the circle.
|
| == Move the arc handles == | Click and drag the circular arc handle or the square arc handle to change the position where the gradient starts and ends. |
| == Rotate the gradient == | We can also rotate the direction of the gradient by moving the circular arc handle, as demonstrated.
|
| Click on the Radial gradient | Now we will learn how to use Radial gradient.
|
| Point to square and circular arc handles >> Click and drag on any square arc handle | Notice 1 square arc handle and 2 circular arc handles.
|
| Click and drag on any circular arc handles | Click and drag on any one of the circular arc handles, to make changes in the gradient.
|
| Point to Gradient tool | We can find the Gradient tool in the Tool box also.
|
| Notice that the cursor has now changed into plus sign with capital I. | |
| Click inside the circle and drag. | Now, click anywhere inside the circle and drag.
|
| Click outside the circle and drag. | Now, click anywhere outside the circle and drag.
|
| Click on the star shape | Next we will learn how to overlay various patterns on shapes.
|
| Click on Pattern icon | In the Fill and stroke dialog box, click on the Pattern icon.
|
| Click on Patterns fill | There is a drop down menu under Pattern fill.
|
| Point to the patterns | Let's click on Checkerboard and observe the change in the star shape.
You can use any of these available patterns shown here.
|
| Point to the Swatch icon | We will learn about Swatch in another tutorial.
|
| Click on Unset paint | The last icon called Unset paint, is used to unset the color of the selected object to black.
|
| Point to the Stroke paint
|
Now, let us learn how to give stroke or an outline to an object.
|
| Click on Stroke paint | Now, click on Stroke paint tab and click on the rectangle. |
| Point to the icons | The icons under the Stroke paint tab are the same as the Fill tab.
|
| Click on No paint | With the first icon, that is No paint, we remove the outline of the shape. |
| Move the mouse around the rectangle. | Next, we will click on Flat color icon.
|
| Increase the width parameter and then decrease it to show the change in the thickness of the outline. | We can increase or decrease the thickness of the outline using the Stroke style tab. |
| Change the width parameter | Let's keep the width parameter as 10.
We can also change the units into percentage, point, etc. depending on our requirement.
|
| Move the RGB slider | Let's go back again to the Stroke paint tab.
|
| Point to the Flat color tabs | Explore the other Flat color options such as HSL, CMYK, Wheel and CMS on your own. |
| Click on Linear gradient | Now, let me click on the Linear gradient. This gives a gradient outline to the rectangle shape. |
| Click on the drop-down | The gradients that we used earlier, will appear in the drop down list here. We can use any of those, too. |
| Select the last option | Let me give red and blue gradient outline to my rectangle. |
| Click on each Stroke icons | In a similar way, we can use the remaining stroke icons and give some interesting patterns and gradient outlines to our objects.
<<PAUSE>> |
| Stroke style | Next we will learn about Stroke style. Click on it. |
| Point to the width option | We already learnt how to modify the width of the stroke. |
| Point to the Joint icons | Now, lets look at the 3 Joint icons namely, Miter join, Round join and Bevel join.
|
| Zoom into one corner of the rectangle. | Let me zoom in to one of the corners of the rectangle for a better view. |
| Click on the Round join | Now, let's click on the Round join, to give a round corner to the stroke.
|
| Click on the Bevel join | Next, we will click on the Bevel join option to create a Bevel corner.
|
| Point to Dash pattern
>> Click on any one Click on the width drop-down on the right.
|
Various dash patterns are available in the Dashes drop down menu.
|
| Point to the Cap option | Next is the Cap option. This basically works on line strokes. |
| Click on Freehand tool >> draw 3 lines. | Go to Tool box. Click on Freehand tool.
|
| Zoom in | Now, let's zoom in to the end of the line. |
| Point to the Butt cap | By default, Butt cap is selected and it gives a flat edge to the end. |
| Click on Round cap | Now I will click on the Round cap, to give a rounded edge.
|
| Click on the Square cap >>
|
Next, is the Square cap which gives a flat and extended edge to the ends of the line.
|
| Point to the Markers | These are 3 Markers right below the Dashes tab, which places markers on the middle of the path.
|
| Point to the Start marker >> Click on Torso | Under Start Markers, let me select Torso. |
| Point to the Mid marker >> Click on Curvein | We will select Curvein as Mid markers. |
| Point to the End marker >> Click on Legs | For the End Markers, we will select Legs. |
| Point to the shape | Observe a cartoon shape is formed on the canvas.
|
| Point to Blur and Opacity | Lastly, notice 2 sliders at the bottom of the Fill and stroke dialog box, namely, Blur and Opacity. |
| Select the rectangle | Let's first select the rectangle again. |
| Click the move the Blur slider | The Blur slider is used to give a blur effect to an object. I will click on the slider and move it towards the right.
|
| Click the move the Opacity slider | The Opacity slider is used to give transparency to a shape.
Move the slider to the right and observe the changes in the shape. <<PAUSE>> |
| Summary (Slide) | Let us summarize.
In this tutorial we learnt to
|
| Assignment (Slide) | Here is an assignment for you
2. An ellipse filled with Wavy pattern and change the opacity to 70% 3. A line with a width of 10, with Start Markers as Arrow1Lstart and End Markers as Tail.
|
| Completed assignment | Your completed assignment should look like this. |
| About Slide | The video available at the following link summarizes the Spoken Tutorial project. Pls watch it. |
| About Slide | The Spoken Tutorial Project Team conducts workshops and gives certificates for those who pass an online test.
For more details, please write to us. |
| About Slide | Spoken Tutorial Project is supported by the NMEICT, MHRD, Government of India.
|
| Acknowledgment | We have come to the end of this tutorial.
Thanks for joining. |
