The Concept

I first saw a graphic piece on Flickr one day and it basically had a heart with a bunch of words filling it.  From there I got inspired to do my own version by using the name of that special person and then making a heart from the words that describe her or my feelings about her.  Along with just the typography, I’d also put images that describes her personality and finally capture it as what I see in my heart.

Step 1 – Making the Background

The background simply consists a gradient using a yellow-light blue-dark blue color scheme.  As you can see, I made the center to be light to give hint that the center will be the main focus of the piece.  I found a stock of a sky that filled the vertical area well and set that to soft light while masking a few parts that I didn’t like (mainly the edges of the piece since I wanted to have some parts faded out and other parts more prominent).

Step 2 – Main Content

Here I began creating the main focus of the piece which is the typography part.  In terms of design difficulty, all I had to do was make a heart shape and adding a gradient and stroke to it, and then I began filling in adjectives and adverbs.

The hardest part of this was actually coming up with the words that I felt, as well as wording and placing them in a way that the words would fit inside the heart shape.  In addition to just having text, I experimented with different opacities to make some words more prominent and kind of give the eye a tease of jumping back and forth between what words pop out.

Step 3 – Decorating your main focus

In this step, I simply added embellishments by finding stocks of flowers, and leaves to surround the heart to give it background of some sort.  By simply masking parts I don’t need and rearranging layers, I can make the heart look like it’s been enraptured in the foliage.

Step 4 – More Decoration

I brought in more stocks in particularly a lion, parrot, and a lime to give the piece more color, and different depths of photomanipulation.  Again, I masked out parts that shouldn’t be shown, and in addition, I found that using the old “Duplicating the layer and giving it a blur and setting it to soft light/hard light” to be quite useful in making the pictures more vivid.

Other than that adjustment, all the pictures so far are on normal blending mode since I didn’t want the stocks to blend with the blue background.

Step 5 – Starting to Add Details

I begin to add details by adding some splatters, and some inkblots stocks that I’ve had.  I wanted to add more depth into the piece and so one way to do that is to simply give objects in the scene a shadow to show that there is a distinction between that object the background.

You can use either the “Drop Shadow” option within the Blending Options of the layer OR what I do is add my own shadows by making a new layer behind the object that I want to add a shadow to and brush behind the objects with a “Soft Round Brush” with black and played around with the opacity of the layer and erased any unnecessary bits that didn’t flow with the piece.

Step 6 – Adding more depth and decorations

Now I began to add more to the piece by adding a polaroid background behind the heart and more splatters.  I introduced some more text on the bottom of the polaroid by choosing a font and setting the opacity down.  The splatters were simple to integrate as they were on white background and so I set the blending mode of them to multiply to show the splatter, and the white background is simply gone.

Step 7 – Faded lines

A technique (if you want to call it that) that I started to use was making lines and bars of different colors and masking them with textured brushes to give a faded out look.  It works well in abstract and grungy pieces and doesn’t make the piece harsh by having the masked parts.

As you can see below, all you need to do to make these type of lines is to have shape/layer of anything, and give it a layer mask and use a textured brush to mask some parts of it away.

Step 8 – Adjustment Layers and Scanlines

As we get closer to the end, I decided that the piece needed some adjustment layers to bring up the colors and make the color brighter.  I added a Curves layer, and some Gradient Maps and set them to soft light.

In addition, I added scanlines to give the background some texture.  Scanlines are simply just patterns and I filled the background with it.  Below is a step by step process of how to create scanlines fast.

Step 9 – Colorful Light Flares

To top the piece off, I added some “Light Flares” to the piece to give lighting and more color.  You’ll find these among a lot of graphic pieces since they are quite popular and they do add more to the piece in terms of effects.

By simply making a new layer and using soft brushes of different colors, set the layer to screen or linear dodge, and notice how they add more color and lighting to a piece.

Conclusion – Final Result

Of course your piece may or may not look like this, but that’s not the point.  The main point is to show the simple process of making a graphic like this and showing some techniques that are used in them.  I hope you enjoy the tutorial, and subscribe and keep updated with Creative-Le Studios for more.

So what’s the fastest way to clean up?

Step 1 – Another CSS file just for Internet Explorer

One of the quickest fixes, rather than trying to find in your CSS what could be the problem is to simply have another CSS file just for Internet Explorer. I usually call mine style-ie.css or ie-style.css. Once made, we need to import that stylesheet, however if we just imported like normal, then the styles in the new stylesheet will actually replace our main sheet. We only want to fix the problems in Internet Explorer, so how do we target that browser specifically?

Step 2 – Conditional HTML Statements

If and Else Conditional Statements are one of the most used logic statements used in web developing. Simply, it states “If this is true, then do the following. However, if it’s not true, then do this other thing instead”. For those that don’t know much about if statements, consider that a basic review. These statements would go in the HEAD section of your html document or php document (for those Wordpress/Joomla users).

So here’s the code snippet we will use to target Internet Explorer:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->

Now, we’re off to a good start, but again, Internet Explorer plays a trick on us and decides that not all Internet Explorers are the same. You’ll notice most specifically that IE6 and IE7 are really different. IE8 is probably the most standard and close to Firefox and other modern browsers. So now you want to target just IE7, or IE6 by themeselves?

This is simply done by just adding the version after the “IE” in the if statement just like this:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />\
<![endif]-->

And from there you can quickly cheat and move some margins, do some positioning, and other CSS fixes you may need to do to make your website appear relatively the same cross-browser.

Being Cross Browser Compatible

Knowing how to be cross browser compatible and being cross browser compatible is a very good addition to your arsenal of services and also makes you more presentable to everyone. (Although, shame on them to use such an old browser). I’m not a big fan of IE, as you can see, I haven’t even done fixes in IE for my site, and personally I don’t think I will either way. However, for clients where most of their audience are using old and deprecated browsers, then it’s definitely a selling point to say that you can make their website look good across all platforms.

Final Thoughts

That’s it for my coding quick tips. I’ll most likely have a lot of these since they are more easy to handle than a big tutorial teaching everything. In addition there’s lots of resources out there that you can use to teach yourself the basics, and even more advanced techniques than what I show here. Again, I’m showing techniques that I experience in my career and ones that I find very useful for everyone to know. Keep following, and subscribe to my site. See you again tomorrow.

Typography has always been a favorite topic of mine, and I can already say that I’m not even close to a beginner in knowing all the techniques, “rules”, and properties of typography. As I grow older as a designer, I want to slowly strive to be better artist in typography. There’s something about fonts, placement, and the way you decorate the letters that makes me really appreciate the simplicity of typography at the same time be in awe on the complexities of making good typography art. As I delve into this topic, I’ll share my experiences and hopefully I can get better as time goes by.

In the meantime, here’s a walk through of my first experiment with typography and utilizing Adobe Illustrator (I’m using CS4 but I’m sure it can be done with CS and up) and Photoshop.

Final Result

Preproduction – The Concept of the Piece

To be honest, I didn’t plan to make this piece about Greek letters, I just saw the greek glyphs in Illustrator and decided to use them. It wasn’t until I made the background for my piece until I decided to think of the saying, “It’s all greek to me”. Ever get that feeling when somebody is talking in a different language, and you’re trying to understand it, but at the same time you know you’re lost? This piece is attributed to that.

Step One – Creating 3D Text in Illustrator

To create 3D Text in Illustrator, you first create your text that you want to have. For my piece, I was playing around with the glyphs of my font. To see the glyphs window in Illustrator, go to Window > Type > Glyphs. I noticed a lot of greek letters in there, and I wanted to work with it, so that’s why I chose the text I did now. The font I used was Avant Garde.

After typing your text and giving them a color, it’s time to make them 3D. To do this, make sure your click on your text that you want to apply the 3D effect and then simply go to Effect > 3D > Extrude & Bevel. You’ll get a new dialog menu that will show you a few options on how you want to rotate your text, how much you want to extrude, and if you want to bevel it or not.

Depending on your piece, the settings will be different, so I’m going to leave that up to you. As a reminder if you wanted to see the 3D text live before you apply the effect, click on the preview check box. Please note that it may render slow/fast depending on your computer specs.

Step Two – Importing to Photoshop

Now that we created our 3D Text in Illustrator, it’s time to import it into Photoshop. The quick and easy way is to just copy and paste it into your Photoshop document. I created a new Photoshop document, 900×1200, and then I pasted the text into the document. You’ll get a dialog box asking how you want to paste it. Make sure you check “Smart Object“, and then you can click “OK”. By importing it as a smart object into Photoshop, you are now able to resize it up and down without distorting it.

As you can see here, I imported 3D text and from there I scaled it, rotated it around, and positioned it. (Don’t clear out the smart object unless you’re positive that you’re not going to change it). If the 3D text doesn’t look good at that angle, then it’s back to the drawing board with Illustrator to position it in the way that you want. You can also position the text correctly in Illustrator and import it into Photoshop. (Now that I think of that, that’s probably more efficient than what I did)

Step Three – Building Text together

Now we get to the fun part of playing Tetris with your text. Start positioning your text the way you want. I decided to build them at one angle to make it easy for me, but feel free to experiment around with it.

Step Four – Creating the background

For the background, you can already see that I made a linear gradient background from sky blue to light purple (Somewhat close to those colors). I also duplicated my 3D text a few more times and rotated it and positioned it to make a collage of my 3D Text.

Then I took that collage and duplicated it more and created a background from it. I merged them all together and set the layer to “Multiply“. I made “holes” in the background to reveal the background and underneath my collage background layer I put another layer of my collage set to Normal blending option. I gave my big collage background that’s set to Multiply a blending option of “Drop shadow” to show that the background looks like it’s breaking or peeling off.

Step Five – Post Production Effects

And finally the post production effects — I added a “Curves” Layer, “Gradient Map” Layer, and a few other enhancements to spice it up a bit.

Conclusion

This tutorial wasn’t too detailed on the steps, but I hope you got the steps for creating 3D text in Illustrator better. I’ll be looking up for sites about typography and learn some tutorials and come back for you guys to make a good simple illustration. Thanks for viewing my tutorial and enjoy.

Table of Contents

1. Beginning HTML – HTML Doctypes, Head, Body
2. HTML Images and Hyperlinks – IMG, A
3. Basic HTML Structure, Tags, Classes, and IDs – HTML Cheatsheat, Divs, Spans, Paragraph
4. HTML List Tags – UL, LI, OL
5. Beginning Cascading Stylesheet (CSS) – Inline Styles, Internal Stylesheet, External Stylesheet
6. Positioning HTML elements with CSS – Floats, Margins, Padding, Relative, Absolute
7. Background Images in CSS
8. HTML/CSS Cheatsheet and Tricks – Overflow, Hovers, Text-Indent
9. Browser Compatibility – Internet Explorer (IE 6, 7, 8), Mozilla Firefox, Apple Safari, Google Chrome

Final Result

What is CSS?

Cascading Stylesheet or CSS for short is one of the most important component in web design. As I mentioned before, HTML is simply a language that structures and puts your content on the site. CSS is where your site transforms into an actual design. CSS will provide the positioning, colors, images, and other design functions that will make your HTML site into a well designed website.

You can do a lot of things with CSS. Move your elements around, give them a different text color, change the font size, give them a specific width, center the object, giving them borders, changing the bullet image of lists, and even give them special attributes for when the user hovers or clicks on a link. We will learn about them as we continue these tutorials. In the end of all of these tutorials, we’ll be making a simple HTML website with a simple CSS based layout.

There are 3 different ways to stylize your site:

Inline Styles
Internal Stylesheet
External Stylesheet

Inline Styles

Inline styles is used within the HTML file. They are included within the tag elements that you want to style such as the div, span, ul, li, a, and other tags. You can add inline styles to these to make them unique to other elements. Saying that, when using inline styles, they take precedence over other styles set through internal and external stylesheet.

Here’s how to implement an inline style. In our case, I’m going to style the title and make it red:

<span class="titles" style="color:#ff0000;">My Title Here</span>

With this code snippet, the words “My Title Here” is now red. I used the CSS attribute of “color” and inserted the value for it. For colors, CSS recognizes different types of value for color. Two mostly used are a 6 character hex codes like #ff0000, #ffffff, #000000, and actual color names such as “red”, “blue”, and “gray”. (Look at resources below for some cheat sheets on what colors are available out there)

Personally, I don’t like to use inline styles as it clutters up the code in the HTML file, and I like to keep everything organized in their own file. HTML in html files, CSS in their separate CSS files. The only reason I’m mentioning this is because you’ll come across when looking at old sites, or perhaps a script or plugin for your site will have a markup that has inline styles.

Internal Stylesheet

Another way to style your website with CSS that’s more clean and organized than inline styles is the use of an internal stylesheet. With internal being the keyword, all the style resides within that same file that you placed it in and will ONLY affect that one file.

Internal Stylesheets are declared in the beginning of an HTML file within the <head> tag.

The code to set up the internal stylesheet is as follows:

<style type="text/css">

<style>

Once declared, you are now able to put any CSS attributes in there. Now we’re going to skip “how” to actually put it in there, as I’m going to show you what external stylesheets are. After that, then putting CSS attributes will be explained as they are the same with internal and external stylesheets.

CSS Attributes – These are attributes that will change the style of the element such as borders, width, height, color, etc…

External Stylesheets

External Stylesheets are the same as internal ones except they are located in a separate file. They are just normal documents with the file extension of “.css” at the end. They are mostly named “style.css”, “layout.css”, etc… It doesn’t matter what it’s called, as long as it has a “.css” file extension then we know it’s a CSS (Cascading Stylesheet).

You can make as many external sheets as you want, however, they won’t do anything until you link them into your HTML file or website. To do this, you insert a link tag to import the external CSS file into your HTML file. Again, this code must be placed in the <head> section.

Here’s the code snippet to import an external CSS file into your website:

<link rel="rel="stylesheet" href="style.css" media="all">

Notice the attribute href. Just like making hyperlinks, you can direct it exactly where you put your CSS sheet, whether it be in another folder or named different. For this tutorial, the CSS sheet is located in the root directory and labeled “style.css”.

Adding CSS attributes to elements

I’ll be using the external stylesheet for our examples. However, note that the code structure for external stylesheet will be the same for an internal stylesheet.

So open up your CSS file and the first thing we are going to learn is how to comment in it. Comments are important to document what you do in your project. By using comments, you can further organize your code as in any language where you learn to comment in addition to making it easy for other people to understand it if you happen to pass this code off to someone.

To start a comment, all you need to do is add a “/*” in front of your comment and then finish the comment by adding a “*/” at the end of your comment.

As a result:

/*CSS for Creative-Le Website Tutorial*/

For the purpose of this tutorial, there are three ways to target/select an element in your website to style.

Global elements
ID elements
Class elements

Remember on our tutorials about div, p, span and ul, li, and ol tags where we talked about giving them ID and Classes?

The reason why it’s important to have classes and ID is because you can use those names to target and select them in your CSS. Not all the divs in your html site are going to function the same, so it’s important to give them a special name, so that you can target them specifically and style them in a special way without having to mess up the other elements.

Global Elements

Global elements isn’t the actual name, but I’m naming it that because it basically covers all the basic html elements that it recognizes such as body, div, p, span, ul, li, etc… It’s not specific, so if you target a basic div and make all the text inside a div red, then all the divs in your website will have red text, unless specified otherwise by their ID or Class name.

Here’s a snippet of how to target a global element:


body{
font-size: 14px;
}

ul, li{
list-style:none;
}


Notice how each element is followed by an open-bracket “{“ and ends with a closed-bracket “}”. And also, any CSS attribute line has a semi-colon “;” at the end. This is the standard CSS coding syntax. And so, if there are any errors on your site, and you believe it’s an error in the CSS file, then it might be your syntax. Make sure you don’t miss any brackets or semi-colons.

With this code in the CSS file, we make all the text located within the body tag to 14px and we made all ul and li tags to have no bullets on them. list-style:none makes it so the list will not have any bullets. This is useful because many times, designers use lists for their navigation for semantic purposes but they don’t want the ugly bullets to be in the way.

Note: If multiple elements on site requires the same styling, you can include them in a series instead of declaring each of them individually. From the example above, I have “ul, li” and then my code. That means, all ul and all li elements will have that style. It’s a shorter way than typing:

ul{
list-style:none;
}

li{
list-style:none;
}

There are lots of global elements that you can target and style. It’s good practice to use them because the less CSS write, the less size the file will be. Try not to give every class a font-size: 14px; if you can just do that in one swoop by putting that in the body tag.

Class Elements – HTML Tags that have Classes

HTML tags that have class names are targeted and selected a different way than global elements. To target class objects, you need to have a period “.” in front of the class name. For example:

.copyright{
color: #ff0000;
font-size: 10px;
}

From our last website tutorial, we fully had a site with a few classes and IDs. Here I’m targeting the span class “copyright“. Notice the period “.” in front of it. Through CSS, I’m adding a color to it, in addition to making the font size of it 10px.

Also a note, that once you start selecting and targeting elements specifically, they override the pre-existing files. Everything in the body is supposed to be 14px but now that I targeted “copyright” specifically, it now changes to what I told it to be. Also, once stylized, any tag that has the class name of “copyright” will have the styling that I put in. So whether it’s a div or even a p tag, if it’s given a class name of “copyright” then they will also inherit the styles.

That’s what makes CSS very versatile and useful. To be able to change multiple elements instantly and to be able to change them individually, gives websites a lot of options for designs.

ID Elements – HTML Tags that have IDs

Similar to classes, targeting IDs require something special in front of the name. Instead of the period “.”, we use the number sign “#”. Keep in the mind the differences between ids and classes.

To target an ID, the code would look like the following, except the name will be replaced by whatever ID of an element you want to target.

#footer{
text-align:center;
}

This makes all text everything within the footer to be center aligned. And that’s how you target IDs.

Most commonly used CSS Attributes

There are many attributes that you can add to an element. Some elements are restrictive in that you may not be able to position, you may not be able to color it, etc… I personally don’t remember all the rules, but I know enough to just do a trial and error to see if it works for that html tag or not.

Below are just a few links to most commonly used CSS attributes that you can add in your code. At the end of this whole tutorial session I’ll make a quick cheat sheet with most of them so that you can download and don’t have to worry about researching it again unless you wanted to learn more.

Commonly Used CSS Terms
CSS Code Gallery of Terms
CSS Cheat Sheet
30+ CSS Cheat Sheets and Reference Guides

Conclusion

In this tutorial we have learned a lot about CSS (Cascading Stylesheets). We know how to do inline styles, internal stylesheets, and making our own external stylesheets. In the download below, I have included the files that I’ve used for this lesson. There is the index.html, about.html, images folder, and now a new file called “style.css”.

What I’ve done in the source was linked the external stylesheet with index.html, and put some CSS coding to stylize certain parts. What you can do is link the style.css file to the about.html and also mess around with targeting different elements in the html files.

I hope you enjoy the tutorial and begin to learn how powerful CSS is for a website. If it wasn’t for CSS, all websites would relatively look the same. Any questions, comments, feedback are appreciated. Make sure to comment below, and I’ll get back to you.

Download Source Files (.zip)

Additional Resources

W3 Schools – CSS
CSS Quick Tutorial
Introduction to CSS
CSS References
CSS Hex codes and Color Names

Final Result

Here’s what you will be making at the end of this tutorial (maybe not exactly, but the shape in there will be made):

You’ve probably seen these shapes quite often, whether it be my portfolio or in general designs out there. They are pretty trendy and add a lot of decoration to a design. When used right, the colors can be a great addition to a design and add that sense of abstractness.

Let’s set up our canvas. You should be able to do this with Photoshop CS and up. (maybe even Photoshop 7, it’s been a long time since I used that so I forgot whether it had custom shapes or not)

Step 1 – Setting Up Your Canvas

I always like to make a new canvas that’s 500px by 500px for all of my testings and experimentation when making shapes or brushes. It’s enough space to mess around with, and it’s not too small.

Step 2 – Setting Up Your Tools

The next step is to set up the custom shape tools so that you’ll be able to make your new custom shape. The settings I have are pictured above.

I turned Shape Layers on so that I can see the shape with color. And since this is our first shape it’s automatically defaulted to Creating a New Shape Layer. So pick the circle shape and let’s make our first circle.

Don’t make too big of a circle since you’ll need the space to add additional shapes.

Step 3 – Adding Multiple Shapes

While your circle is still selected (you’ll see a little ring around it), change the option of the custom shape tool to Add to Shape Area (+). From here, you can just have a free for all in making circles just like the picture below.

HINT: You don’t have to necessarily switch to that custom shape option. Rather you can hold shift, and your cursor will have a little plus sign similar to the cursor when you choose that option.

Step 4 – Subtracting From Your Custom Shape

Sometimes you may have added too many shapes, or you want to give your shape some interesting cuts in it. By choosing the Subtract Area (-) option, you can make shapes that will cut/erase your current shape like below.

It may look a bit busy, but if you wanted to see how your shape looks like without the pen lines, you can just hide them by pressing Crtl/Cmd+H.

Step 5 – Defining Your Custom Shape

After you finishing make your shape, select the pen tool from your tool bar or press the Photoshop shortcut key “P” and right click on the shape. You will see the option to “Define Custom Shape…”

After you click on that, name your custom shape and press “Ok“. You now have a custom shape. To access this custom shape, go to your custom shapes menu and look for it. Usually, newly created ones will show up last on the list.

And now you can use your shape as many times as you want, and even resize it without losing any pixels because it’s not rasterized yet.

Here’s my result after messing around with the same shape. I flipped it, I duplicated it, I rotated and changed it’s colors.

You can do a lot by making your own shapes. You’re not even limited to circles. Use other shapes, or even use custom shapes you’ve already made. The sky’s your limit on this one.

Conclusion

Thanks for looking at my tutorial about creating abstract custom shapes for Photoshop. If you have any questions or confusion, comment below and I’ll get to them. Show off your results as well here, or share a link.