CSS Basics: The Second “S” in CSS

Post pobrano z: CSS Basics: The Second “S” in CSS

CSS is an abbreviation for Cascading Style Sheets.

While most of the discussion about CSS on the web (or even here on CSS-Tricks) is centered around writing styles and how the cascade affects them, what we don’t talk a whole lot about is the sheet part of the language. So let’s give that lonely second „S” a little bit of the spotlight and understand what we mean when we say CSS is a style sheet.

The Sheet Contains the Styles

The cascade describes how styles interact with one another. The styles make up the actual code. Then there’s the sheet that contains that code. Like a sheet of paper that we write on, the „sheet” of CSS is the digital file where styles are coded.

If we were to illustrate this, the relationship between the three sort of forms a cascade:

The sheet holds the styles.

There can be multiple sheets all continuing multiple styles all associated with one HTML document. The combination of those and the processes of figuring out what styles take precedence to style what elements is called the cascade (That first „C” in CSS).

The Sheet is a Digital File

The sheet is such a special thing that it’s been given its own file extension: .css. You have the power to create these files on your own. Creating a CSS file can be done in any text editor. They are literally text files. Not „rich text” documents or Word documents, but plain ol’ text.

If you’re on Mac, then you can fire up TextEdit to start writing CSS. Just make sure it’s in „Plain Text” mode.

If you’re on Windows, the default Notepad app is the equivalent. Heck, you can type styles in just about any plain text editor to write CSS, even if that’s not what it says it was designed to do.

Whatever tool you use, the key is to save your document as a .css file. This can usually be done by simply add that to your file name when saving. Here’s how that looks in TextEdit:

Seriously, the choice of which text editor to use for writing CSS is totally up to you. There are many, many to choose from, but here are a few popular ones:

You might reach for one of those because they’ll do handy things for you like syntax highlight the code (colorize different parts to help it be easier to understand what is what).

Hey look I made some files completely from scratch with my text editor:

Those files are 100% valid in any web browser, new or old. We’ve quite literally just made a website.

The Sheet is Linked Up to the HTML

We do need to connect the HTML and CSS though. As in make sure the styles we wrote in our sheet get loaded onto the web page.

A webpage without CSS is pretty barebones:

See the Pen Style-less Webpage by Geoff Graham (@geoffgraham) on CodePen.

Once we link up the CSS file, voila!

See the Pen Webpage With Styles by Geoff Graham (@geoffgraham) on CodePen.

How did that happen? if you look at the top of any webpage, there’s going to be a <head> tag that contains information about the HTML document:

<!DOCTYPE html>
<html>
	<head>
		<!-- a bunch of other stuff -->
	</head>

	<body>
		<!-- the page content -->
	</body>

</html>

Even though the code inside the <head> might look odd, there is typically one line (or more, if we’re using multiple stylesheets) that references the sheet. It looks something like this:

<head>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

This line tells the web browser as it reads this HTML file:

  1. I’d like to link up a style sheet
  2. Here’s where it is located

You can name the sheet whatever you want:

  • styles.css
  • global.css
  • seriously-whatever-you-want.css

The important thing is to give the correct location of the CSS file, whether that’s on your web server, a CDN or some other server altogether.

Here are a few examples:

<head>
  <!-- CSS on my server in the top level directory -->
  <link rel="stylesheet" type="text/css" href="styles.css">

  <!-- CSS on my server in another directory -->
  <link rel="stylesheet" type="text/css" href="/css/styles.css">

  <!-- CSS on another server -->
  <link rel="stylesheet" type="text/css" href="https://some-other-site/path/to/styles.css">
</head>

The Sheet is Not Required for HTML

You saw the example of a barebones web page above. No web page is required to use a stylesheet.

Also, we can technically write CSS directly in the HTML using the HTML style attribute. This is called inline styling and it goes a little something like this if you imagine you’re looking at the code of an HTML file:

<h1 style="font-size: 24px; line-height: 36px; color: #333333">A Headline</h1>
<p style="font-size: 16px; line-height: 24px; color: #000000;">Some paragraph content.</p>
<!-- and so on -->

While that’s possible, there are three serious strikes against writing styles this way:

  1. If you decide to use a stylesheet later, it is extremely difficult to override inline styles with the styles in the HTML. Inline styles take priority over styles in a sheet.
  2. Maintaining all of those styles is tough if you need to make a „quick” change and it makes the HTML hard to read.
  3. There’s something weird about saying we’re writing CSS inline when there really is no cascade or sheet. All we’re really writing are styles.

There is a second way to write CSS in the HTML and that’s directly in the <head> in a <style> block:

<head>
	<style>
  	h1 {
  		color: #333;
  		font-size: 24px;
  		line-height: 36px;
  	}

  	p {
  		color: #000;
  		font-size: 16px;
  		line-height: 24px;
  	}
	</style>
</head>

That does indeed make the HTML easier to read, already making it better than inline styling. Still, it’s hard to manage all styles this way because it has to be managed on each and every webpage of a site, meaning one „quick” change might have to be done several times, depending on how many pages we’re dealing with.

An external sheet that can be called once in the <head> is usually your best bet.

The Sheet is Important

I hope that you’re starting to see the importance of the sheet by this point. It’s a core part of writing CSS. Without it, styles would be difficult to manage, HTML would get cluttered, and the cascade would be nonexistent in at least one case.

The sheet is the core component of CSS. Sure, it often appears to play second fiddle to the first „S” but perhaps that’s because we all have an quiet understanding of its importance.

Leveling Up

Now that you’re equipped with information about stylesheets, here are more resources you jump into to get a deeper understanding for how CSS behaves:


CSS Basics: The Second “S” in CSS is a post from CSS-Tricks

How to Create a Cloud Icon in Adobe XD

Post pobrano z: How to Create a Cloud Icon in Adobe XD

Final product image
What You’ll Be Creating

With cloud computing on the rise, a simple „cloud” icon will always come in handy. Learn how to create one in this video from my course, Icon Design With Adobe XD.

How to Create a Cloud Icon in Adobe XD

 

Create the Basic Shapes for the Cloud

To start, set up a 60 x 60 px artboard, and then select it and turn on the Grid in the toolbar on the right. The grid is set to 1, so every one pixel there will be a horizontal and vertical guideline.

Select the Ellipse Tool and just left-click and hold Shift to draw a fairly small circle. Then go to Edit > Duplicate, move the copy up and to the right, and hold Shift and scale it up.

First two circles of the cloud shape

Drag over both of them and deselect the fill. And then select the smaller circle, and go to Edit > Duplicate again. Hold Shift and left-click and drag it to the right so it stays perfectly in line. 

Adding a third circle

Then go to Edit > Duplicate again. Make this new circle a little bit bigger by holding Shift, left-clicking, and scaling from one of the corners. 

Adding a fourth circle

Now select the Rectangle Tool and draw a horizontal rectangle. Then drag over everything and go to Object > Align to Pixel Grid. That just helps everything snap in place and line up at the bottom in particular.

Rectangle added over the circles

Drag this rectangle out a little, and then double-click the shape and select the top two corners and drag them in if they’re extending outside of the cloud icon. 

Rectangle being adjusted inwards

Create a Single Cloud Shape and Adjust It

Now, this does look like a mess of different shapes at the moment. However, in Adobe XD we can combine multiple shapes into a single shape. 

Simply drag over everything, and from the options at the top of the Property Inspector, select Add, and it will combine all of the shapes together into one shape. 

Create a single shape

You can see that at the bottom, we’ve got a little bit of an anomaly. But that’s fine—just zoom in, double-click, and try to adjust that path a little bit. Just moving that circle a little bit will help smooth out the curve. 

Anomaly being adjusted

Then drag over everything and give it a Border of 2. And from the color picker, select the color #4A4A4A, and deselect the fill. Scale it up a little, holding Alt-Shift and scaling from the center.

Again, go to Object > Align to Pixel Grid if you need to. You can see it shuffles it a little bit, so you may need to adjust some of the shapes again, as we did before. 

Full cloud shape

Add the Final Detail

The last thing that we’re going to do is add a little curve, just to give the cloud a bit more detail.

Select the Pen Tool and just left-click, left-click again to create a curve, and press Escape to complete it. Then select that same #4A4A4A swatch from the color picker. And the last thing that we can do is drag over everything and go to Object > Group so that we can move it around as one object.

Cloud with detail line added

You’ll see that our cloud is ever so slightly off the pixel grid. So you can just drag over everything, and go to Object > Group to group it all together. And then go over to the toolbar and adjust the y value so that instead of being 15.5, it’s rounded down to 15. And you’ll see it now aligns to the pixel grid nicely.

Watch the Full Course

In the full course, Icon Design With Adobe XD, you’ll learn how to use the tools available in Adobe XD to design a variety of different icons. As well as the cloud, you’ll learn to create a phone, browser, pencil icon and more, picking up some useful Adobe XD skills along the way.

You can take this course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 440,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

​Wix.com: Make the Web Your Playground

Post pobrano z: ​Wix.com: Make the Web Your Playground

(This is a sponsored post.)

Here’s something you should consider having: your own professional website. The only thing you’ll need to get started is your imagination, a little free time, and an innovative website builder.

Wix is the world’s most technologically advanced website builder. Sign up for Wix, choose a template, and start customizing it. Whether you’re a novice, a business owner, a sophisticated designer, or a professional website builder, you’ll have full control of your website – from design prototyping to production.

Wix takes care of all the heavy lifting. You get reliable, safe, secure hosting that you’ll never need to worry about. You get a custom domain name and email. To get started, all you need is a computer and a little time.

Don’t underestimate what you can do with Wix. There are all kinds of advanced design features and functionality if that’s something you need. The web is your playground. We’ve come along way from the website building platforms of the 90s. Now, you can create any kind of website you want and even collaborate with friends or coworkers.

Save yourself some time and head over to Wix.com to get started.

Direct Link to ArticlePermalink


​Wix.com: Make the Web Your Playground is a post from CSS-Tricks

CSS Basics: Styling Links Like a Boss

Post pobrano z: CSS Basics: Styling Links Like a Boss

The web was founded on links. The idea that we can click/tap a link and navigate from one web page to another is how surfin’ the web become a household phrase.

Links in HTML even look different from regular text without any CSS styling at all.

See the Pen Default Link by CSS-Tricks (@css-tricks) on CodePen.

They are blue (purple if visited). They are underlined. That’s a link in it’s purest form.

But what if we want to change things up a bit? Perhaps blue doesn’t work with your website’s design. Maybe you have an aversion to underlines. Whatever the reason, CSS lets us style links just we can any other element. All we need to do is target the <a> element in our stylesheet.

Want to use a different font, change the color, remove the underline and make it all uppercase? Sure, why not?

a {
  color: red;
  text-decoration: none;
  text-transform: uppercase;
}

See the Pen Link With Some Style by Geoff Graham (@geoffgraham) on CodePen.

Now we’re cooking with gas! But why stop there? Let’s look at a few other ways we can style links to complete the experience.

Style Each Link State

Links have different states, meaning they adapt when we interact with them on a webpage. There are three additional states of a link that are worth considering anytime we change the default style of links:

  • Hover (:hover): When the mouse cursor is place on top of the link without a click
  • Visited (:visited): The appearance of a link that the user has clicked on the page before when the mouse cursor is not on top of it
  • Active (:active): When the link is in the process of being clicked. It might be super quick, but this is when the mouse button has been depressed and before the click is over.

Here is the same link we have been looking at. First, try hovering your mouse on top of it without clicking and notice that it becomes underlined. Then, click on the link, but leave your mouse button clicked down for a little bit to see how the active style changes the color of the link to black. Finally, let up on the mouse button and the link should turn purple before it’s technically been visited.

See the Pen Link With Styled States by Geoff Graham (@geoffgraham) on CodePen.

Links seem like a simple concept, but boy do they have a lot going on—and CSS gives us some incredible power to customize the experience!

Links as Buttons

While there is some debate about it, we can use CSS to make a text link look like a button.

Like other HTML elements, CSS can add background colors and padding to links that allow us to create the appearance of a button. Here’s our link using those techniques:

a {
  background-color: red;
  color: white;
  padding: 1em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
}

See the Pen Link as a Button by CSS-Tricks (@css-tricks) on CodePen.

Great! Now, let’s use the state-altering powers we learned in the last section to make our faux-button more interactive. We’ll make the button dark gray on hover, black on active, and light gray on visit:

a {
  background-color: red;
  color: white;
  padding: 1em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
}

a:hover {
  background-color: #555;
}

a:active {
  background-color: black;
}

a:visited {
  background-color: #ccc;
}

See the Pen Link as a Button With Styled States by Geoff Graham (@geoffgraham) on CodePen.

Styling a link as a button and taking advantage of the states allows us to make some pretty cool effects. For example, let’s create a button with some depth that appears to get pressed when it’s active and pop back up when the click is done.

See the Pen Link as a 3D Button by Geoff Graham (@geoffgraham) on CodePen.

Oh, and Cursors!

We’ve gone into pretty great depth on style links, but there is one more component to them that we cannot ignore: the cursor.

The cursor indicates the position of the mouse on the screen. We’re pretty used to the standard black arrow:

The standard mouse cursor arrow

We can change the arrow to a hand pointer on it’s hover (:hover) state so that it’s easier to see that the link indicates it is an interactive element:

Using cursor:
pointer;
provides an interactive cue.
a:hover {
  cursor: pointer;
}

See the Pen Link as a 3D Button With Pointer by Geoff Graham (@geoffgraham) on CodePen.

Whew, that’s much nicer! Now, we have a pretty fancy link that looks like a button with proper interactive cues.

Leveling Up

We’ve covered quite a bit of ground here, but it merely scratches the surface of how we can control the style of links. If you’re ready to level up, then here are a few resources you can jump into from here:

  • Mailto Links – A good reference for linking up email addresses instead of webpages.
  • The Current State of Telephone Links – Did you know you can link a phone number? Well, here’s how.
  • Cursor – The CSS-Tricks reference guide for customizing the cursor.
  • When to Use the Button Element – If you’re wondering about the difference between a link button and a traditional form button, then this is a good overview with suggestions for which is better for specific contexts.
  • Button Maker – A free resource for generating the CSS for link buttons.

CSS Basics: Styling Links Like a Boss is a post from CSS-Tricks

How to Create a Typography Adobe Photoshop Action

Post pobrano z: How to Create a Typography Adobe Photoshop Action

Final product image
What You’ll Be Creating

In this tutorial you will learn how to create an amazing logo typography effect. I will explain everything in so much detail that everyone can create it, even those who have just opened Photoshop for the first time.

The effect shown above is the one I will show you how to create in this tutorial. If you would like to create the even more advanced logo typography effect shown below, using just a single click, then check out my Logo Typo Photoshop Action.

Action final result

What You’ll Need

To recreate the design above, you will need the following resources:

1. Let’s Get Started

First, go to File > New to create a new file to work with, name it Logo Typography, and use the settings below:

Creating a new file

2. How to Create a Background

Step 1

In this section, we are going to create a background. Go to Layer > New Fill Layer > Solid Color to create a new solid color fill layer, name it Background Color, and choose the color #262626 as shown below:

Creating new solid color fill layer

Step 2

Now choose the Horizontal Type Tool (T) and set the font to Arial, font style to Bold, font size to 30 px, alignment to Left, and color to #000000. In the Character panel, check All Caps and set the Leading to 18 px as shown below. Then, click anywhere inside the canvas and go to Type > Paste Lorem Ipsum to paste some random text. Feel free to use your own text and font settings.

Creating text layer

Step 3

Right-click on this layer in the Layers panel and choose Convert to Paragraph Text. Then, Double-click on this layer thumbnail and transform the Text Box as shown below:

Transforming text box

Step 4

Now go to Type > Paste Lorem Ipsum and repeat this step until you cover the whole canvas with text. Again, you can use your own text—just make sure it covers the whole canvas.

Adding text

Step 5

Press Control-A on your keyboard to make a selection of the canvas and click on Align Vertical Center and then on Align Horizontal Center to align the text both vertically and horizontally. Then, press Control-D to deselect and name this layer Text.

Aligning text

3. How to Add a Logo

Step 1

In this section, we are going to add a logo. Go to File > Open, select the Learnimo Logo.eps file, choose Open, and enter the settings below:

Opening logo file

Step 2

Now choose the Eraser Tool (E), pick a hard brush, and remove Your Slogan Here text of the logo as shown below:

Editing logo

Step 3

Choose the Rectangular Marquee Tool (M) and make a selection around the Learnimo text of the logo as shown below:

Making a selection

Step 4

Now go to Layer > New > Layer Via Cut to cut the selected area of the logo to a new layer. Then, Right-click on this new layer and choose Blending Options. Select the Color Overlay option, and set the Blend Mode to Normal, Color to #ffffff and Opacity to 100% as shown below:

Changing blending options

Step 5

Control-click on Layer 1 to select both layers at the same time, Right-click on any of the layers, and choose Convert to Smart Object. Then, name this new layer Logo.

Converting layer to smart object

Step 6

Now, using the Move Tool (V), drag this layer to the Logo Typography file. Then, press Control-A on your keyboard to make a selection of the canvas and click on Align Vertical Center and then on Align Horizontal Center to align the logo both vertically and horizontally.

Aligning logo

Step 7

Press Control-T on your keyboard and set Width and Height to 200% as shown below:

Transforming the logo

Step 8

Now press Control-Alt-G on your keyboard to create a clipping mask.

Creating clipping mask

4. How to Add a Focus

Step 1

In this section, we are going to add a focus. Go to Layer > New > Layer to create a new layer and name it Focus.

Creating a new layer

Step 2

Now press D on your keyboard to reset the swatches. Go to Edit > Fill and set Contents to Foreground Color, Blending to Normal, and Opacity to 100% as shown below:

Filling layer with foreground color

Step 3

Press Control-A to make a selection of the canvas and go to Layer > Layer Mask > Hide Selection to hide the selected area of the layer.

Adding layer mask

Step 4

Now click on the link icon between the layer thumbnail and layer mask to unlink them. Then, press Control-T on your keyboard and set Width and Height to 85% as shown below:

Transforming the layer mask

Step 5

Go to Filter > Blur > Gaussian Blur and set the Radius to 150 px as shown below:

Adding gaussian blur filter

Step 6

Now change the Opacity of this layer to 50%.

Changing the opacity

You Made It!

Congratulations, you have succeeded! Here is our final result:

Final result

If you would like to create the even more advanced logo typography effect
shown below, using just a single click, then
check out my Logo Typo Photoshop Action.

The
action works so you simply open the logo file and just
play the action. The action will do everything for you,
giving you fully
layered and customizable results. You can also add perspective (you can choose from five different perspectives), focus and lighting.

The action comes with a detailed video tutorial that demonstrates how to use the action and customize the results to get the most out of the effect.

Action final result

How to Create a Sari-Inspired Text Effect in Adobe Illustrator

Post pobrano z: How to Create a Sari-Inspired Text Effect in Adobe Illustrator

Final product image
What You’ll Be Creating

In
this tutorial you will learn how to draw a text effect inspired by
the stunning sari/saree clothing. The color theme here is bright pink
and gold. There are plenty of details and plenty of Illustrator
brushes and effects that we’ll use to create the beautiful
decorations and silky texture, so follow along and learn some new techniques.

If
you are hungry for more text effects, make sure to check out
GraphicRiver and you’ll surely find what you are looking for there. 

1. How
to Open a New Document 

Launch
Illustrator
and
go to
File
> New
to
open a blank document. Type a name for your file, set up the
dimensions, and then select
Pixels
as
Units
and
RGB
as
Color
Mode
.
Make sure that
Align
New Objects to Pixel Grid
is
not checked.

Next,
go to
Edit
> Preferences > General
and
set the
Keyboard
Increment
to
1
px
and
while there, go to
Units
to
make sure they are set as in the following image. I usually work with
these settings, and they will help you throughout the drawing process. 

how to open new illustrator document

2. How
to Create the Sari Text

Step
1

Copy
the text “
साड़ी“, which is the Hindi word for sariand
Paste it on your artboard using the Type Tool (T). You most likely
will see squares instead of the text, but change the font to “Nirmala
UI”, Bold, size of 220 pt. This is a Microsoft font that comes with the Windows OS, and
this is the only font in my collection that allows me to see the
Hindi characters. You can download it from here or here
.

Another option is to simply use the word Sari or Saree.

Use
the Selection Tool (V) to select the text and drag it a little to the
right to make it wider.

how to type Hindi word for Sari

Step
2

While
the text is still selected, choose Expand from the Object menu and
then Ungroup (Shift-Control-G). You will get the individual pieces of
text. Throughout this tutorial, I will refer to the pink character as
piece 1” of text, to the orange character as “piece 2” of
text, and the green, blue and red ones as “piece
3
”, “piece 4” and “piece 5” respectively.

As
you can see, the pieces of text are overlapping at the top, especially
the orange and green pieces. You need to fix that. Grab the Direct
Selection Tool (A)
and use it to select only the top left anchor
points of the orange piece and move them towards the inside, up to the pink edge. Continue
with the top right points and move them up to the green edge. Repeat
the same thing between the green and blue pieces.

Fill
the newly obtained text with bright pink.

how to adjust the sari text

3. How
to Create the Golden Border Around the Sari Text

Step
1

Copy
and Paste in Back (Control-B) all five pieces of text and remove the
fill color. Select a 1.5 pt beige Stroke and press the Align Stroke
to Outside
icon in the Stroke panel. While this Stroke attribute
stays selected in the Appearance panel, go to Effect > Path >
Offset Path
and apply an Offset of 1 px.

Add
a New Stroke at the bottom of the Appearance panel and select a 1 pt
light brown Outside Stroke. Apply an Offset of 2.5 px this time.

Add
a New Stroke at the top of the Appearance panel and select a 1
pt Outside Stroke
.

how to create the golden border around the sari text

Step
2

Let’s
create a mask shape now. Copy and Paste in Place (Shift-Control-V)
the five pieces of text, remove the fill color, and select a 3.5 pt
Outside Stroke
which is the exact thickness of the golden border.
Choose Expand Appearance from the Object menu in order to turn the
strokes into fills. While the resulting blue borders stay selected,
go to Object > Compound Path > Make (Control-8) to merge them
into a single compound shape (1).

Grab
the Rectangle Tool (M) and draw a rectangle between the inside points
of the blue border as shown (2). Now, select the blue compound path
along with this rectangle and press Minus Front in the Pathfinder
panel. As a result, you will get rid of the small segments of blue
border that were on the inside (3).

how to create a mask shape for the golden border around sari text

Step
3

Take
the Pencil Tool (N) and draw a random wavy path following the golden
border of the first piece of text (1). Do the same thing for the
other pieces of text (2).

Stroke
these wavy paths with the Watercolor -Blend Art Brush that you can
find in the Brush Libraries Menu > Artistic >
Artistic_Watercolor
. Keep the Stroke Weight at 1 pt and then go to
Effect > Blur > Gaussian Blur and apply a Radius of 2 px. Set
the Blending Mode to Color Burn (3).

how to create shading on golden border around sari text

Step
4

Now,
select the mask shape from earlier (which must be in front of
everything and set to stroke-none, fill-none (1)) along with all the
wavy paths, and go to Object > Clipping Mask > Make (Control-7).
As a result, the shading details will be visible only on the golden
border (2). You can see a before and after in the close-ups.

how to mask the golden border around sari text

4. How
to Create the Golden Decorative Stripe on the Sari Text

Step
1

First,
let’s define where the decorations will go. Use the Rectangle Tool
(M)
to draw a rectangle with a size of about 575 x 88 px over the
text (1).

Fill
the rectangle with the color indicated and then add a New Fill above.
Use the Leaves Tropical Color Pattern that you can find in the Swatch
Libraries menu > Patterns > Nature > Nature_Foliage
. Set the
Blending Mode to Hard Light and reduce the Opacity to 45% (2).

With
the rectangle still selected, go to Object > Transform > Scale,
type 50% in the Scale field, and make sure to check only the Patterns
option. Hit OK and the pattern will be smaller (3).

how to create the pattern rectangle on sari text

Step
2

Select
the five pieces of text and then Copy and Paste in Place
(Shift-Control-V)
to make copies of them in front of everything. Go
to Object > Compound Path > Make (Control-8) to merge them into
a single shape and set it to stroke-none and fill-none (1).

Now,
select the pattern rectangle along with the newly obtained compound
path and go to Object > Clipping Mask > Make (Control-7) (2).

how to mask the pattern rectangle on sari text

Step
3

Use
the Pen Tool (P) or the Line Segment Tool (\) to draw a straight path
over the text. Give it a 2 pt warm brown Stroke and select the Gold
Leaf Pattern Brush
from the Brush Libraries menu > Borders >
Borders_Decorative
. Open the Stroke Options window and set the
Colorization Method to Tints and Shades so the brush becomes warm
brown as well. Move this path under the mask that you created in
the previous step (1).

While
this Stroke attribute stays selected in the Appearance panel, go to
Effect > Distort & Transform > Transform and type -45 px in
the Move Vertical field. This will move the brush stroke upwards and
should go exactly up to the edge of the pattern rectangle (2).

how to create the decorative stripe on the sari text

Step
4

Add
a New Stroke under the first in the Appearance panel and use the
Floral 1 Pattern Brush from the Brush Libraries menu > Borders >
Borders_Decorative
. Set the Stroke Weight to 0.75 pt and then set the
Colorization Method to Tints and Shades in the Stroke Options window
again to change the color of the brush.

While
this Stroke attribute stays selected in the Appearance panel, apply
the Transform effect again, and this time type -15 px in the Move
Vertical
field.

how to add the second brush on the decorative stripe on sari text

Step
5

Add
a New Stroke at the bottom of the Appearance panel and use the Leaf
Pattern Pattern Brush
from the Brush Libraries menu > Decorative >
Elegant Curl & Floral Brush Set
. Set the Stroke Weight to 0.5 pt.
The Colorization Method is set to Tints by default, so you don’t have
to change it this time.

While
this Stroke attribute stays selected in the Appearance panel, apply
the Transform effect and type -33 px in the Move Vertical field. This
will move the brush right under the long stripe at the top of the text.

how to add the third brush on the decorative stripe on sari text

Step
6

Add
a New Stroke at the bottom of the Appearance panel and use the Rococo
Pattern Brush
from the Brush Libraries menu > Borders >
Borders_Decorative
. Keep the Stroke Weight at 1 pt. Open the Stroke
Options
window, set the Colorization Method to Tints and Shades, and
use the color indicated. Apply the Transform effect and type 5 px in
the Move Vertical field.

how to add the fourth brush on the decorative stripe on sari text

Step
7

Add
a New Stroke and the last one at the bottom of the Appearance panel
and use the Scallopped Pattern Pattern Brush from the Brush
Libraries menu > Decorative > Elegant Curl & Floral Brush
Set
. Reduce the Stroke Weight to 0.75 pt. Apply the Transform effect
and type 15 px in the Move Vertical field.

At
this point, the decorative stripe is ready.

how to add the fifth brush on the decorative stripe on sari text

5. How
to Create Shading & Highlights on the Sari Text

Step
1

Select
all five pieces of text and then Copy and Paste in Place
(Shift-Control-V)
to make copies of them in front of everything. Fill
the copies with a linear gradient called Tin from the Swatch
Libraries menu > Gradients > Metals
. Next, go to Effect >
Sketch > Chrome
and apply the settings shown. Set the Blending
Mode
to Overlay and reduce the Opacity to 55%. As a result, you will
get the appearance of shading and highlights on the text.

how to apply chrome effect on sari text

Step
2

Take
the Pen Tool (P) and draw the four paths on the first piece of text.
Give them a 5 pt black Stroke and use the Tapered Blend Art Brush
that I’ve shown how to create and save in step 10 of the Candy Monster Character
tutorial. 

Next, go to Effect > Blur > Gaussian Blur
and apply a Radius of 3 px. Set the Blending Mode to Multiply and
reduce the Opacity to 75%. The green path is set to 55%.

how to create shading on the first piece of sari text

Step
3

Select
the first piece of text and then Copy and Paste in Place (Shift-Control-V)
to make a copy of it in front of everything. Set this copy to
stroke-none and fill-none.

Now,
select this copy along with the piece of text with the Chrome effect
applied to it and the four paths from the previous step and go to
Object > Clipping Mask > Make (Control-7).

how to mask shading on the first piece of sari text

Step
4

Use
the technique explained in the previous two steps and create some
shading for the other pieces of text.

how to create shading on other pieces of sari text

6. How
to Create Shading & Highlights on the Golden Decorative Stripe

Step
1

Let’s
create the mask shape first. Select the path with all the decorative
strokes applied to it and then Copy and Paste in Place
(Shift-Control-V)
to make a copy of it in front of everything. From
the Object menu, choose Expand Appearance and then Compound Path >
Make (Control-8)
(1).

Select
the four pieces of text and Copy and Paste in Place (Shift-Control-V)
to make copies of them in front. Go to Object > Compound Path >
Make (Control-8)
to merge them into a single shape (2).

Now,
select these two new compound paths and press Intersect in the
Pathfinder panel. You can see the resulting shape in the image below
(3).

how to create a mask shape for the decorative stripe on sari text

Step
2

Use
the Pencil Tool (N) to draw a random wavy path over the decorative
stripe. Give it a 1 pt black Stroke and use the Watercolor – Blend
Art Brush
from the Brush Libraries menu > Artistic >
Artistic_Watercolor
. Apply a 5 px Gaussian Blur; then set the
Blending Mode to Color Burn and the Opacity to 75%.

how to create shading on the decorative stripe on sari text

Step
3

Copy
and
Paste
in Front (Control-F)

the wavy path from the previous step and choose Flip Vertical from
the fly-out menu of the Transform panel. Change the stroke color to
white and the Blending Mode to Overlay at 100% Opacity.

how to create highlights on the decorative stripe on sari text

Step
4

Now,
select the two wavy paths along with the mask shape made earlier,
which should be in front and set to stroke-none, fill-none and go to
Object > Clipping Mask > Make (Control-7). You will get a
notification saying that the mask shape is very complex, but do it
anyway.

how to mask shading  highlights on the decorative stripe on sari text

Step
5

Here
is a before and after GIF so you can see the difference better.

before and after shading  highlights on decorative stripe on sari text

7. How
to Create the Inner Shadow on the Sari Text

Select
all five pieces of text and then Copy and Paste in Place
(Shift-Control-V)
to make copies of them in front of everything.
After that, go to Object > Compound Path > Make (Control-8)
(1).

Fill
the newly obtained shape with white; then go to Effect > Stylize >
Inner Glow
and apply the settings shown. Set the Blending Mode to
Multiply but only for the Fill attribute because this way the white
will become transparent but you will still be able to see the inner
shadow (2).

how to create inner shadow on sari text

8. How
to Add Shine on the Sari Text

Use
the Pen Tool (P) to draw the following paths on the text.
Give them a 3 pt Stroke and use the Tapered Blend Art Brush again.
Apply a 3 px Gaussian Blur and then set the Blending Mode to Color
Dodge
.

how to create shine on sari text

9. How
to Create the Fabric Texture on the Sari Text

Copy
and Paste in Place (Shift-Control-V) the five pieces of text and
replace the fill color with light gray. Next, go to Effect >
Texture > Texturizer
and apply the settings shown. Set the
Blending Mode to Multiply and reduce the Opacity to about 10%. It
should be only slightly visible.

how to create the fabric texture on sari text

10. How
to Create Extra Decorations on the Sari Text

Step
1

Draw
a straight path with the Pen Tool (P) or the Line Segment Tool (\)
and use the Floral 1 Pattern Brush from the Brush Libraries menu >
Borders > Borders_Decorative
. Keep the Stroke Weight at 1 pt (1).

While
the path stays selected, choose Expand Appearance from the Object
menu and then select only the small shape in the center (2).

Make
a copy of this shape, Rotate it -30 degrees, and replace the existing
fill color with the linear gradient shown. Next, go to Effect >
Stylize > Drop Shadow
and apply this effect twice using the
settings shown below (3).

how to create extra golden decorations on sari text

Step
2

Multiply
the small golden decoration and align a few of the copies on each piece of
text.

how to arrange extra golden decorations on sari text

11. How
to Create the Shadow for the Sari Text

Copy
and Paste in Place (Shift-Control-V) the five pieces of text to make
copies of them and then go to Object > Compound Path > Make
(Control-8)
. Move the new compound path to a New Layer behind the
text effect (1).

Remove
the existing fill color and select a 3 pt Outside Stroke. Next, go to
Effect > Stylize > Drop Shadow and apply this effect four times
to create a shadow under the text (2).

how to create shadow under sari text

Here
are the settings for the Drop Shadow effects in order.

settings for drop shadow effects

Congratulations!
You’re Done!

The
sari-inspired text effect is ready now. I hope you learned new
techniques today that you’ll be able to apply to other text effects
and future projects.

If
you decide to recreate this effect, don’t forget to share an image because it will surely make my day.

sari inspired text effect final image

Agregator najlepszych postów o designie, webdesignie, cssie i Internecie