Gradient Editing Tool Google Web Designer English English (auto-generated)

Gradient Editing ToolYouTube↗ IA↗(long shot)
Science & Technology 17.8K views 38 likes 7 dislikes 15 Jan 2014

Google Web Designer 76.8K subscribers United States YouTube↗

Click to Play Video

ERIC MUELLER: So today, we're going

so today we're going to be showing the

to be showing the new gradient tools that

new gradient tools that are new to

are new to Google Web Designer.

Google web designer and so first of all

And so, first of all, let's see where

let's see where they are in the tool

they are in the Tool Palette. We added the Gradient Tool into a fly-out menu,

palette we added the gradient tool into

along with the Fill Tool and the Stroke Tool and the Gradient

a flyout menu along with the fill tool

and Stroke tool in the gradient tool or

Or you can also use the K key, which

you can also use the Kate K key which

will cycle through that set of tools.

will cycle through that set of tools so

So how do we use this tool? Let's make a div and put on a linear gradient.

how do we use this tool let's make a div and put on a linear gradient so we'll

So we'll give it a little more color here

give a little more color here and put

and put a stop in the middle. So there we have a gradient.

stop in the middle so there we have a

And there's a div with the gradient in it.

gradient and there's a div with a

So now, the Gradient Tool, you'll

gradient in it so now the gradient tool

notice, first off, where the cursor is, if there's nothing

you'll notice first off where the cursor

that the Gradient Tool can operate on,

is if there's nothing that the gradient

you get the little red circle with a line through it.

tool can operate on you get the little red circle with a line through it if

If the cursor is over something that it does like,

there's cursors over something that it

but that that goes away, you can click on that object,

does like that that goes away you can click on that object and you'll see some

and you'll see some handles appear.

handles appear or if that object is

Or if that object is selected and you go into the tool,

selected and you go into the tool the

the tool will look at the selection

tool will look at the selection and see

and see if it can operate on that.

if it can operate on that so you know

So the basic functioning is simple.

the basic functioning is simple all

All we're doing is setting the properties

we're doing is setting the properties of

of the CSS linear gradient.

the CSS linear gradient and so there's

And so there's really only a couple. We can change the color stops. We can bring those in, or stretch them out.

really only a couple we can change the the color stops we can bring those in or

stretch them out

Or we can rotate.

or we can rotate and we put the cursor

We can put the cursor over the Rotate.

over the rotate you see the cursor

You see the cursor indicate that it's rotating.

indicate that it's rotating when

And snapping works as it always does.

snapping works as it always does but

But you'll notice that the width of the gradient

you'll notice that the the the width of

will change, depending upon the orientation.

the gradient will change depending upon

And the reason for that is that CSS

the orientation the reason for that is that CSS defines the width of the

defines the width of the gradient

gradient by the width of the object and

by the width of the object. And so this is the 100% point, and this is 0.

so it this is 100% point and this is

And so if I rotate it, the gradient

zero and so if I rotate it it the

will fit the extents of the object, given the orientation.

gradient will fit the extents of the object given the orientation so so this

So this is now 100%. Or if we rotate around and snap to the vertical, that's 100%.

is now a hundred percent or if we rotate around and snap to the vertical that's a

So we can go in the Property Inspector and edit this.

hundred percent so we can go in the property inspector and edit this and we

And we can move the color stops around.

can move the color stops around and

And you'll see the handles on the stage update,

you'll see the handles on the stage

according to where we put those.

update according to where we put those

Now, there's a difference in when we're editing the color

now there's a difference in when we

stops in the Gradient Picker, as opposed to the tool.

reddit occult ops in the color and the gradient picker as opposed to the tool

And you'll notice that, when I move

and and you'll notice that when I move

one of the stops in the picker, none of the other colors change

one of the stops in the in a picker none

of the other colors change position in

If you edit in the tool, it will tend

if you edit in the tool you will tend to

to redistribute the colors so that they

redistribute the colors so that the they

keep the same relative distances to each other.

keep the same relative distances to each

So if I go back in, you'll see that the blue is staying

other so if I go back and you'll see that the blue is staying roughly halfway

roughly halfway between the red and the white,

between the red and knee and the white

whereas, in the Gradient Picker, only the red is changing. So that's, essentially, the linear gradient. We can also edit radial gradients.

whereas in the gradient picker only the red is changing so that's essentially the linear gradient we can also edit radial gradients and so I'll change that

And so I'll change that to a radial gradient.

to a radial gradient and so this is now

And so this is now the default radial gradient.

the default radial gradient and it again

And it, again, has a couple of handles.

has a couple of handles you can change

You can change the width and the height of the gradient

the the width and the height of the

gradient independently if I hold the

If I hold the Control key down while I'm dragging,

control key down while I'm dragging it

it will constrain the aspect ratio of the gradient.

will constrain the aspect ratio of the

Or with the Shift key down, it'll

gradient or with the shift key down it

constrain it to be a circle. Or I can move the center point.

will constrain it to be a circle or I can I can move the center point if I

If I double-click on the center point, it will re-center.

double-click on the center point it will

If I double-click on the tool, it

recenter if I double-click on the tool

will reset to the default tool, or the default gradient rather.

it will set reset to the default tool or the default gradient rather the other

The other thing I wanted to point out

thing I wanted to point out is we can

is we can also edit gradients on the stroke.

also edit gradients on the stroke so

So I'll go ahead and put a linear gradient on the stroke

I'll go ahead and put a linear gradient

here. And now, you can see there's a couple of options

on the stroke here and now you can see

with the Gradient Tool. This icon means that we're editing the fill.

there there's a couple options with the gradient tool this this icon means that we're editing the fill and this one says

And this one says we're editing the stroke.

we're editing the stroke so I can go and

So I can go and I can do my modifications on the stroke.

I can do my modifications on the stroke

And you can see the stroke is updating.

you can see the stroke is updating or I

Or I can switch over, and I can edit the fill.

can switch over and I can edit the fill

And so we do that.

and so do that and we can preview make

And we can preview to make sure that we have the results

sure we have the results that we want

that we want. You can see that we do. And that's the gradient tools.

see that we do and it's the gradient

Similar videos:

Pinnacle Studio Tutorial - Object Masking with Motion Tracking
PinnacleStudioLife
44.4K views 90 likes 14 dislikes 24 Oct 201628% match

0 views 0 likes 0 dislikes 05 Jun 202628% match

3-1 Your First Project: Creating & Project Settings in LumaFusion
Create with LumaTouch
15.2K views 140 likes 3 dislikes 16 Jan 202027% match

HOW TO REPLACE THE CHIEF OF THE BIKE OF AGE
bike DIY
16.1K views 448 likes 9 dislikes 25 May 201826% match

Motion Paths Overview - Google Web Designer
Google Web Designer
37.8K views 228 likes 5 dislikes 21 Jun 201726% match

Smart-Shopfront: Design a basic shopfront and change hardware style
Smart Glazier Software
1.6K views 3 likes 1 dislikes 21 Jul 201426% match

blur objects with Final Cut Pro
AppleManiacos
4.8K views 65 likes 5 dislikes 27 Oct 201626% match

[Resolve] Mastering the FX Browser with Boris FX Continuum
Boris FX
1K views 15 likes 0 dislikes 17 Sep 201926% match

12-1 Trimming Clips on the Timeline in LumaFusion
Create with LumaTouch
7.2K views 136 likes 3 dislikes 17 Jul 202025% match

Cubo de Rubik inteligente - Unboxing y Review | SuperCube Giiker | Rubik's Cube puzzle Bluetooth
AirXander
639 views 60 likes 1 dislikes 29 Jan 202025% match

Крепление поручня к столбу 3 способа, как закрепить поручень.

6.8K views 180 likes 3 dislikes 05 Feb 202125% match

2D & 3D Drawing Overview - Google Web Designer
Google Web Designer
6.3K views 34 likes 5 dislikes 03 Jan 201825% match

Google Web Designer - AdWords Dynamic Overview
Google Web Designer
55K views 64 likes 21 dislikes 31 Aug 201525% match

Tag Tool Demo
Google Web Designer
17.6K views 57 likes 3 dislikes 30 Sep 201320% match

Text Tool Demo
Google Web Designer
26.1K views 94 likes 2 dislikes 30 Sep 201320% match

Settings Privacy About Contact Donate