Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 19 2014

14:00

February 10 2014

14:00

CSS Best Practices to Follow and Bad Habits to Avoid

Creating a well-managed set of CSS codes can be a challenge. As technology evolves, it’s not really easy to say if you’re doing the right CSS practices or you’re just messing up the code and compromising the quality of your website on different browsers.

Through practice, you should be able to avoid CSS errors. So, to give you a guide on the dos and dont’s when writing CSS codes, we listed below the CSS best practices to follow as well as the bad habits to avoid. So, get ready and let’s get started.

css-best-practices-and-bad-habits-to-avoid

CSS Best Practices 

Use CSS Reset

Browser inconsistencies are one of the biggest problems of front-end development nowadays. Styles like margins, paddings, line heights, headings, font sizes and so on may look different on different browsers. The goal of a reset style sheet is to reduce browser inconsistencies by providing general styles that can be edited and extended.

One of the great examples for a reset CSS stylesheet is normalize.css, a modern HTML5 CSS reset. All you have to do is include it before your own style definitions in your HTML file under the Head section. Otherwise, these styles will override your own style definitions.

Provide Style Sheet Information

Put a Title, Author, Tags, Description, URL  information and so on on your stylesheet. This will give the user/developer a reference person to contact whenever they need support regarding your creation.

/*
Theme Name: Simple Parallax Website
Description: Simple Parallax Scrolling Effect
Author: Samuel Norton
Author URI: http://www.1stwebdesigner.com/
Tags: Parallax, Website
*/

Organize Elements on the Stylesheet from Top to Bottom

Usually for beginners, they put the elements on the stylesheet according to what they want to put first. But this is not a good practice for CSS code structure as it will give you a hard time finding CSS code elements on the stylesheet. Ordering them from inclusive styles (such as body, H1, p, a and the likes) followed by a header to a footer will make a lot of sense.

As an example consider the code structure below.


/****** General Styles *********/

body {...}
h1, h2, h3 {..}
p {...}
a {...}

/****** Header Style *********/
#header {...}

/****** Navigation Style *********/
#nav {...}

/****** Footer Style *********/
#footer {...}

Shrink CSS file size with CSS Compressors

It’s really a great idea to shrink the CSS file size as it will remove white spaces, line breaks and remove redundant CSS styles. Through this, you can help browsers to speed up the loading of your CSS codes. Using tools like CSS Compressor and CSS Compressor & Minifier can make this happen.

css-compressor

css-minifier

Group IDs and Classes That Fall under the Same Element

If you have an element that contains different IDs and classes, you might want to group them to make them look organized and easy to find so looking for errors would not take time.

As an example, you have a class container that contains a div tag that has an ID of logo and another div tag that has an ID of icons.

</pre>
<div>
<div id="logo"></div>
<div id="tagline">< /div></div>

You can group them on your CSS code like this:

.
container {width: 960px; margin: 0;  padding: 0;}.
container #logo {font-family: Arial, sans-serif;  font-size: 30px;  color: red;}.
container #tagline {font-family: Verdana; font-size: 10px;}

Use Annotations/Comments to Identify a Set of CSS

Another best practice for CSS coding is putting a comment on each group of CSS. This will make it easy for you to look for specific groups of CSS once you got in to some CSS errors.


/****** General Styles *********/

body{
	margin: 0;
	padding: 0;
	width: 100%;
}

h1, h2, h3 {
    font-family: Arial, sans-serif;
	font-weight:normal;
	font-size: 55px;
	text-align: center;
	color: #fff;
	margin: 0;
	padding: 0;
}

Structure Naming Convention

Using proper naming conventions on IDs and classes will make a lot of sense to your work. This will help your work easier and faster in case you need to add elements or redesign a website.

For instance, putting a class of title-red will not make sense when you change the color of the title so why not just put title instead. Always name your elements properly based on their use not on their properties such as what color or font size the element have.

Use Hex Code instead of Name Color

According to a performance test run by Sean Connon, Senior Web Developer at Alien Creations, Inc, hex codes seems to be just barely faster on 4/5 runs. Check out the test performance here. Therefore, we recommend using hex codes rather than name colors.

hex-vs-colorname

Use CSS Vendor Prefixed

If you are aware of the new features of CSS3, you must also know that each browser has its own specification when it comes to a specific style. That’s why browser prefixes are being used to make sure that the browser supports the specific features/style you want to use.

Many designers and developers are having an error with this simple matter because they forgot to add vendor prefixes to target specific browsers.

The CSS browser prefixes are:

  • Chrome: -webkit-
  • Firefox: -moz-
  • iOS: -webkit-
  • Opera: -o-
  • Safari: -webkit-

For instance, you want to add a CSS3 transition to your CSS code, you will just use transition property along with a vendor prefix. Check out the code below.

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;

Validate Your CSS

Using W3C free CSS Validator will let you know if your CSS code was properly structured. Another benefit of using it is it can point you the error on your stylesheet, thus, saving you more time on troubleshooting it manually.

Bad Habits to Avoid

Creating Redundant CSS

Using styles again and again for specific elements is not a good practice. It’s very important that you clean your code and remove redundant styles. For example, if you have a paragraph tag and span tag that has the same font size and color, you might just group them using a comma.

Take a look at the code below.

BAD PRACTICE

span {font-size: 12px; color: red;}
p {font-size: 12px; color: red;}

BEST PRACTICE

span, p {font-size: 12px; color: red;}

Mixing Tag Names with ID or Class Name

Adding tag name to an ID or Class Name is not a good practice since it would slow down the matching process unnecessarily.

Check out the code below.

BAD PRACTICE

p#container {color: red; font-size: 8px;}

BEST PRACTICE

#container {color: red; font-size: 8px;}

Targetting Margin and Padding Positions Separately

Using separate CSS codes to target margin or padding either on top, left, right or bottom is not a good idea. Shrinking your code and combining it in one line will make your code more readable and makes the loading of the browsers faster.

BAD PRACTICE

For example, you have a div id of container and you target all the positions’ margin separately. See the code below.

#container {
margin-top: 10px;
margin-right: 2px;
margin-left: 5px;
margin-bottom: 14px;
}

BEST PRACTICE

You can just combine all these styles in one line. Check out the code below.

#container {margin: 10px 2px 5px 14px;}

Using Underscores on ID or Class Name

Using underscores might give you unnecessary results on old browsers. It is highly recommended to use hyphens.

Take a look at the example below.

BAD PRACTICE

.
left_col {margin: 0; padding: 0;}

BEST PRACTICE

.
left-col {margin: 0; padding: 0;}

Final Words

Throughout this article, I provided you some tricks and guidelines on how to write a better CSS code and what mistakes to avoid. Keeping these rules while you’re coding will help you implement clean codes and prevent you from having errors in the future. Make sure you validate your CSS code using W3C CSS Validator for a quality and error-free CSS code.

Sponsored post
feedback2020-admin
04:05

January 29 2014

14:00

How to Use UI Kits – Plus Free UI Kits to Choose From!

UI kits can be seen anywhere on the Web. But what is this UI kit thing? Do you know how to use UI kits? You can see a lot of resources with beautiful interface elements such as buttons, sliders, breadcrumbs, media players, forms and the likes. Perhaps it crossed your mind how these elements came to be.

Let me give you first a brief introduction about UI kits. A UI kit stands for “User Interface Kit”, which are PSD files that are composed of user interface elements. These come in a variety of colors, patterns and asl files that are being integrated on web and mobile designs. Though sometimes there are UI elements that are included on the package that you don’t think you will be using. That being said, UI kits will vary according to your web design needs. Usually the premium versions of UI kits come with a lot of user interface elements than the free ones.

Using UI kits is all about improving and speeding up the workflow without giving a lot of time thinking what to design. This allows you to focus more on the functionality and usability of the website you are working on.

OK, enough for introduction. I know you’re all fired up and want to know how to use UI kits. So let’s rock!

Choosing a UI Kit to Use

There are a lot of UI kit resources on the Web that you can use, depending on what you need. But for this tutorial, we will be using Flat UI PSD format by Designmodo.com since it has a lot of user interface elements that we can choose from.

Feel free to check these out too!

Flat UI Pro, a professional design framework

1.  Flat AP UI Kit

From: Andrew Preble
free-flat-UI-kit-1

2. Featherweight UI – A free, vector based and retina ready UI kit

From: Sara Hunt
free-flat-UI-kit-2

3. Flat Design UI Kit Vol. 1

From: Bloom Web Design
free-flat-UI-kit-15

4. FREE flat UI kit.

From: Visualcreative.cz
free-flat-UI-kit-4

5. UI Kit

From: Abhimanyu Rana
free-flat-UI-kit-5

Opening the UI Kit PSD File

Unzip the file first to view the contents of the folder. You can see four folders and 2 .txt files inside. Open the UI folder and then view the flat-ui-free.psd file in Adobe Photoshop.

file-structure

photshop-opened

By default, there are three folders on the Flat UI PSD file:

  • Basic Elements – consists of a series of individual UI element folders.
  • Samples – consists of the actual application design of the UI elements.
  • Background – the white background of the UI elements.

psd-file-structure

Using the UI Kit Elements

Now that the Flat UI PSD file is opened, we can now go on and use the UI elements. Click Auto Select on the Option Bar (on the top left section of Photoshop near the menu. Make sure Group is selected instead of layer) and then open the Basic Elements folder.

auto-select

open-basic-element

Next, select the UI elements that you want to use. For this example, we will select the menu, share status buttons, radio buttons and checkboxes. Click on the selected UI elements and then move them to a new Photoshop document file.

menu-ui

Resizing UI Kit Elements

To resize UI elements, click on the Direct Selection Tool on the toolbar on the left section of the Photoshop.

direct-selection-tool

And then select the path on the right side of the UI element you want to resize. For this example, we will resize the menu element, press shift and drag the path to the right to resize.

resize

Changing the UI Element Color Scheme

To change the color scheme, you need to select the specific element you want change then click on the shape and select your preferred color on the color picker. For this example, we will change the background color of the menu. Go to the Menu folder and look for the shape layer that has the same background color of the menu. Change the background color of the menu to hexadecimal color: #00acc0.

change-color

Using Vectors and Glyphs

Vectors and glyphs add a touch of  creativity to web design elements. Let’s use the existing vectors and glyphs of the Flat UI kit. Create a new Photoshop document file. Next, create a box using Rounded Rectangle Tool with the dimension of 372px by 372px.  Now drag the retina vector icon and static green button on the box you created. Then drag the round check icon glyph to the left of the static green button. You just use the vectors and glyphs of UI elements.

vector-glyphs

Exporting UI Elements for Web

Now that we already know how to resize and change the color scheme of UI elements, let’s export them for web use. Simply drag your preferred UI element in the new Photoshop document file with a transparent background. Make sure you will only select the layers of that UI element, not the whole folders themselves. For this example, let’s use the paginator. Drag the UI element in the new Photoshop document and go to Image then choose Trim.

trim1

The Trim window will then appear. Next, select the Transparent Pixels radio button and make sure that all of the checkboxes are selected on Trim Away section (Top, Bottom, Left, Right) and then click OK.

trim2

Then Go to File > Save for Web & Devices. In the Save for Web & Devices Window, select the type of preset you want to use. For this example, PNG-24 is used since high quality image with no transparent background is preferred. Click Save to place it on your preferred location.

save-for-web

Congratulations! You just learned how to use, resize, change color scheme, apply vectors and glyphs and export UI kit elements for web used.

Conclusion

UI kits are very helpful to both web designers and web developers. If you are a freelancer, using UI Kits will save you a lot of time since you don’t need spend more time thinking for the design. It can please your clients too because you can deliver the project faster. You can explore more UI kits here. The web is composed of hundreds of UI Kits, both in free and premium versions. You just need to choose the UI kit that suits your needs. You might also want to try to apply it on your actual web or mobile design and then later on code it using HTML and CSS.

January 22 2014

15:00

Get ‘Layed’: What You Need to Know about Photoshop Layers

Photoshop is revered as one of the best digital multimedia solutions software. So there is no question on what you need to know about Photoshop layers because there is always something to be learnt about this amazing software. It basically encompasses every design need there is. Artists consider using it because of its flexibility. It can be utilized by any artist notwithstanding their design inclinations. Most photographers use the software in editing their photos. Some digital artists use Photoshop, (if not, Illustrator) in their designs. Meanwhile, most web designers use this software in building the visuals of their designs. Truly, with these uses, Adobe’s carrier software has been the one-man-wrecking-machine software that solved most of our digital problems.

photoshop-layers-02

photo from Wallpaper Stock.net

Having said that Photoshop is a must-have software, it is also equally a must to master it. And that entails a great deal of effort. With all the tools, options and features of Photoshop, which – until today – is continually developing, it is very difficult to start training with the software. But never fret, you have us. What is 1stwebdesigners for, right?

photoshop-layers-01

Photo from Deviantart

One of the probably gazillion things you need to know about Photoshop is its layers. The importance of mastering this feature is, of course, pertinent for a web designer as a web design, before being coded, is most probably created through Photoshop.

Layers are free and independent elements in a Photoshop work space. They can be manipulated in scaling, color, effects, position, opacity and more. Layers often represent separate elements that a designer wants to tweak or customize. In the realm of web design, layers play an important role. They are used to represent the design elements of a webpage. They are made to imply a text box, an image, a background, the content and a lot more.

photoshop-layers-03

Photo from Designcontest.com

Most Photoshop users will agree to the notion that one of the key features of a software like Photoshop is its good layering options. Here are some of them that you need to know.

Fill and Opacity

Fill and opacity are two different things. Although they are commonly confused as the same terms and often connected as a single terminology (i.e. Fill-Opacity), they are completely different from one another.photoshop-layers-04

Fill is an option of a layer to customize how many percent of the background color is seen. This option is commonly used for shapes

.photoshop-layers-03

On the other hand, opacity is the option that dictates how transparent the whole layer relative to the other layers in the design.

The difference between the two is that the Fill option does not affect layer styles. For example, you put a stroke in the image. Notice that when you ticker down the fill percentage, the stroke is still seen unlike if you lower the opacity percentage, you see the whole image together with the layer styles is made transparent.

photoshop-layers-05

Grouping

This is one of the most rudimentary learnings a Photoshop user should have when it comes to layers. Grouping really does not do a lot of things in the design per se. Despite that predicament, the importance of grouping is never left behind. You see, grouping helps in the organization of layers. Aside from naming them properly, which is also very useful, grouping layers improves the workflow because you don’t need to search the whole design looking for a single pixel. Just find where it belongs and voila! You have it!

photoshop-layers-09

photo from elated.com

Masking

Masking is the act of hiding particular portions of the layer to show the layers below it. This technique is a very important skill in a designer’s arsenal as it is a good way of combining multiple photos in one seamless image.

Photoshop masks can be used at a very large amount on a single layer. According to TutsPlus.com, you can use up to 11 Pixel Masks and 11 Vector Masks!

If you want a good tutorial, better visit this.

photoshop-layers-06

Photo from Photoshopsupport

photoshop-layers-07

Photo from Amazon news

Selecting

Supposed you’re slicing up particular photos in a design. You have a lot of options to choose from. Either you click the layer you want to copy or cut, press CTRL+A and paste it wherever you want to, or use the lasso or quick selection tool. But you have a third option. That is quick selecting it by pressing CTRL + click the image desired.

photoshop-layers-11

Layer Styles

Layer styles give you the liberty to select specific options to enhance the design. There are some options to tinker on:

  • General Blending – here you can choose the Blending Mode. The Blending mode option allows you to customize background and image relationships and how to complement, contrast or both. Aside from that, you could also choose from advanced options where you are allowed to reduce the opacity of the layer as a whole or per channel.
  • Bevel and Emboss – this option gives your layers a 3D feel as they tend to pop out of the design. The Bevel and Emboss option add depth to the design, making it more ‘realistic.’ In this option, you could select from contouring options like inner bevels, emboss and more.
  • Stroke – this is one of the most used options in the menu. Stroke adds an outline to the main image. You can choose the opacity of the stroke, the color and its blending options.
  • Inner Shadow- gives you a subtle darkening of the layer. Inner shadow also provides depth. (Outer Shadow is the opposite of this)
  • Inner Glow – adds a shiny and feathered yellow design in the outline of the image within. (Outer Glow is the opposite of this)
  • Color Overlay – fills the whole image with a chosen color. It will totally forget what’s inside the fill. It will surely fill every spot of what you wanted it to fill with.

photoshop-layers-10

Conclusion

Layers are one nasty piece of business to study. It requires a lot of time and patience to do this. With the importance of layers highlighted, it is equally important to study them well. The key to this lesson is that you should try using them and commit mistakes. It’s where we really learn- from our mistakes. So next time, you’ll be dealing with layers, stand up and be proud that once in your life, you got ‘layed’ here at 1stwebesigner. Again, pun intended.

January 06 2014

14:00

70 Best Web Design Tutorials of 2013

2013 has ended with a great blast and I’m pretty sure that everyone has done their countdowns and throwback blog posts, tweets and even status updates. It’s a pretty cool thing to do because you get to remember all the awesome things 2013 has given you. You look back at how bad you were design-wise last year and how well you’ve improved. With this, you get to assess yourself how much more you could exert and, in turn, how much more money you could earn. Retrospection also tells you what more could you learn. Seeing what you’re weak at will also allow you to see where you could trained. That is why self-correction and openness to new things is a great habit for a designer.

Speaking of learning, were you able to catch some of the best web design tutorials of 2013? has given a lot of trends and knowledge that made tutorials prevalent as stars in the night sky. Well, for one thing, these tutorials will teach give you new knowledge and improve on what you already know. You’ll never know; maybe one day, the web design noob becomes the ninja.

Now, let’s look back at the top 70 tutorials that rocked the web design world in 2013. Some of these, you might have seen before. Others, you might have missed. But one thing is for sure, these tutorials don’t kid when they say they will teach you new cool things. So, for those who lived under the rock last year, let’s roll!

Graphic Design

The following tutorials highlights graphic designs. It includes typography and basic web mock up designs. These tutorials are aimed at making your website look better using graphic design elements such as fonts, shapes and a lot more!

Working with Types: Typography Design Tutorial for Beginners
This one discusses the basics of typography and how to create your very first design! For beginners, this one’s recommended.

70-tutorials-2013-typography

Your Logo as a Web Font Ligature
Create beautiful logos using types and not worry about CSS3 cross browser considerations (which is very, very tricky, messy and takes a lot of effort). This one shall render with better quality with the smallest effort and time.

70-tutorials-2013-ligature

Flat Web Design Tutorial – Portfolio Landing Page [FREE Download]

This tutorial will teach you to create a very beautiful flat design portfolio landing page. Very easy to follow and tinker with!

70-tutorials-2013-portfolio-landing-page

PSD to HTML/CSS, SASS, CSS3, HTML5

Three of the best used platforms in web design are used in this section. This is a list of PSD to HTML/CSS tutorials and HTML and CSS tricks. Make your site look better using these easy-to-follow tutorials.

Basic Web Design Video Course – Wireframing, Photoshop Tools & Panels, and Designing [Part 1]

Talking about details, this one goes off the charts. Broken into parts, this comprehensive tutorial discusses the major facets of web design that you should know. Great for both beginners and experts.

70-tutorials-2013-wireframing

How to Create Your Own Custom Grid System in Photoshop

Grid systems are of great help in putting different elements in a page without becoming lost in pixels. This tutorial teaches you how to use a very simple tool (a Photoshop plugin called Guide Guide) to design using grids.

70-tutorials-2013-grid-using-photoshop

 Hide / Show Notification Bar With CSS3

Do you want to create a sliding notification bar? This tutorial is for you. Written in the simplest and most understandable way possible, you will be amazed at how easy it is to add a notification bar in your website design.

70-tutorials-2013-hide-or-show-notifications

Web Design: How to Convert CSS to SASS & SCSS

SASS and SCSS are pretty new to some designers. With CSS still known as a very plausible and useful language, learning how to convert CSS to SASS and SCCS is not bad for some knowledge that you might use in the future. When you read this tutorial, you will see how these languages are both alike and different in many ways.

70-tutorials-2013-css-to-sass

How To Style Google Maps

Putting maps on your website is great, especially for corporate clients. But styling them? That’s better. Now learn how to do this through this tutorial, and you’ll be able to look at maps in a whole new way.

710tutorials-2013-Style-google-maps

Getting Creative with the Google Maps API 

We’ve seen earlier how could we style maps. This one is another tutorial about this. The only difference is that it pushed further as it incorporated a lot of new elements that we thought we could never place in maps before. Amaze your clients at how you could design a map just for them.

70-tutorials-2013-googlemaps-creative

Web Design: Equal Column Height With CSS
What bugs most designers is unequal column heights. An OC designer will have a hard time tinkering with pixels and doing trial and error computations. This becomes a major headache for beginners as they still don’t know the tricks of the trade yet. So, this tutorial becomes a must if they need to add more to their skills. Look at this tutorial to see which of your methods is easier  to execute and which produces more accurate results!

70-tutorials-2013-unequal-height

How To Create a Web-Based Video Player

It’s always fun to customize all the elements you post in your website. It gives a personal touch to it. More so, you achieve uniformity in design. This tutorial is a proof of this perk. Learn how to create a web-based video player that you can really call ‘yours’.

70-tutorials-2013-web-based-video-payer

How To Use CSS3 Multiple Backgrounds
When I first read this tutorial, I never knew that having multiple backgrounds in one div or class is possible. Well, we all have our moments of learning, don’t we? This one is a great yet simple example of this. 

70-tutorials-2013-multiple-backgrounds

Creating Content Tabs with Pure CSS

In the early popularity of CSS3,  this tutorial has done wonders for me. Being able to create tabbed contents easily with CSS? It’s a pretty amazing thing to know.

70-tutorials-2013-content-tabs

Fun CSS Loading Animations

I’ve talked about loading animations before and how cool they are. They make your website more fun and makes your audience do (or see) something while they’re waiting. Interested? Learn from this tutorial.

70-tutorials-2013-loading-animation
Flat UI Pro Tutorial: How To Use LESS to Create a Sign-In Form

David East gives a very simple and detailed explanation on how he created a custom sign-up form using LESS and HTML. It’s very simple and easy to follow. You just need basic coding knowledge. That’s all.

70-tutorials-2013-custom-sign-up-using-css-and-less

Create an e-Commerce Web Element with CSS3
Have you ever had any e-commerce customers? Or you wanted to put up one? Well, this tutorial is a good kick-start. Learn how to put e-commerce elements in any site using only CSS3!

70-tutorials-2013-e-commerce

Create a Drop Down Menu with Search Box in CSS3 and HTML
Do you want to create a very simple and elegant drop-down menu and search box? This one’s for you. With its very trendy design and easy to follow steps, a drop down menu could never be created this easier.

70-tutorials-2013-drop-down-menu

Learn SASS on Treehouse
“SASS is the most mature, stable, and powerful professional grade CSS extension language in the world.” So does the SASS website says. So where to learn this Syntactically Awesome Style Sheets? Nowhere else but on this tutorial!

70-tutorials-2013-sass

Creating Non-Rectangular Layouts with CSS Shapes

Sometimes it’s good to deviate from designing norms. A good example of this is non-rectangular layouts. It gives a refreshing look to the over-all design of the page. Give your clients and yourself a new view by trying this tutorial out.

70-tutorials-2013-non-rectangular

How To Create Flat Style Breadcrumb Links with CSS

Breadcrumbs are great tools for navigation. It lets you know where are you exactly on the website and prevents you from getting lost in the deep, dark woods. Learn how to save your viewers with breadcrumbs and learn how to do it creatively using CSS!

710tutorials-2013-bread-crumbs

Bring Your Forms U- to-Date With CSS3 and HTML5 Validation

Great for contact forms, this tutorial will help you create a simple but very useful contact form. I was amazed at how it matched with any design because of its awesome simplicity.

70-tutorials-2013-contact-form

Quick Tip: Don’t Forget the Viewport Meta Tag

Is responsive designing complicated? Or are you just complicating things out? It turns out that, most of the time, you’re the one complicating things out. Good thing you have this tutorial to clarify.

70-tutorials-2013-viewport

How to Customize the Foundation 4 Top Bar

Another navigation menu tutorial proves to be brilliant as it crosses over browsers and devices with simplicity, style and sense. Great tutorial.

70-tutorials-2013-ctopbar

Build a Freshly Squeezed Responsive Grid System

Using one of the many grid systems, this tutorial is aimed towards teaching designers to use grids for easy styling. This method is a very great tool, especially when doing responsive designs.

70-tutorials-2013-lemonade

Build an HTML Email Template From Scratch

Email templates could attract more traffic to your website. Once you send your subscriber cool emails, they will be awed at how good you are and might even hire you because of this. So learn how.

70-tutorials-2013-email-template

Quick Tip: Implement a Sticky “Back to Top” Button

One of the greatest advancements in web design is that “back-to-the-top” button which allows you to scroll into the top of the page in a single click. This tutorial lets you create that. Put it on your website now!

710tutorials-2013-back-to the-top

Quick Tip: Using Images as Fullscreen Faux-Gradient Backgrounds

I personally love full screen backgrounds. They give professional and neat-looking feel to your website. Try this on your designs and your client will surely love them!

70-tutorials-2013-faux-background

Circle Navigation Effect with Css3

This easy-to-navigate and use navigation effect gives a very clever method of presenting data in your website. Another quality tutorial for your convenience.

710tutorials-2013-circle-nav

Blur Menu with CSS3 Transitions

Another amazing navigation effects, this tutorial lets you create a very cool navigation that blurs unselected links. I recommend this for designers who want to design portfolios.

70-tutorials-2013-blur-menu

Animated Border Menus

Who would have thought that you could do something as clever as this? I love this tutorial because it lets me understand the greatness and coolness of using borders with animations.

70-tutorials-2013-animated-border=menus

Building a Circular Navigation with CSS Transforms

The world surely is both flat and round as this tutorial proves that something amazing can be achieved by fusing two opposing ideas in the literal aspect. With different effects to tinker on and with this conveniently written article, you’ll soon adapt this in your creative outputs.

70-tutorials-2013-circular-navigation

jQuery

Here’s for you guys who like to have a little bit of a challenge. Some advanced stuff! jQuery effects that will surely make your clients’ eyes pop! The list is easy to follow and comes with demos that you could download and tinker!

Beginner’s Guide to Working with jQuery Animation

This tutorial delves into jQuery animation basics and lets you understand these fundamentals while preparing you for more advanced stuff. For beginners, this is a yes-yes tutorial.

70-tutorials-2013-jquery

jQuery How-to: Creating and Inserting New Elements

Learn the basics of jQuery from this very comprehensive set of tutorials!

70-tutorials-2013-tutorial-part-1

Creating Touch-Enabled Slider With SwipeJS And jQuery

With the advent of mobile touch devices, doing jQuery sliders became a little bit more complicated. As we all know, it is very easy for web designers to use jQuery slider navigations. But it becomes difficult when transforming these into mobile as the navigation icons become cluttered in the tight screen resolution. The answer to this? Make the slider touch-enabled.

70-tutorials-2013-touch-enabled-slider

Customizing Browser Scroll Bar With CSS / JQuery

Does the default scroll bar bore you? Well, good news is, you could re-design them. Learn how from this tutorial.

70-tutorials-2013-scroll-bar

Building a Mobile Panel With jQuery Mobile

I first saw this mobile panel on the mobile version of Facebook. Well, for one thing, I knew that someday someone will do the re-creation of this panel. So, here it is!

70-tutorials-2013-mobile-panel

How to Implement Infinite Page Scroll Effect in Static Webpages

Are you into infinite scrolling? Or do you want your design to have one? You came to the right place because I will tell you where it is. It’s right in this particular tutorial. Learn how to seamlessly feed your future viewers with content.

710tutorials-2013-infinite-scroll

Smart (Auto-Hiding) Website Header & Footer Using jQuery

This tutorial discusses and demonstrates how you can build a sticky header bar that will auto-hide after a few scrolls. This is very advantageous because it allows you to achieve the ease of access capability of a sticky nav bar, and the convenience as well as lack of distraction in a regular nav bar.

710tutorials-2013-sticky-nav-bar

Sticky Position (Bar) with CSS or jQuery

Make your sidebar and other elements on your website always visible. Avoid scrolling them together with the content through this tutorial.

710tutorials-2013-sticky-nav-bar=02

Create an Awesome 3D Interactive Object Using Only Images and jQuery

Do you have a client who wants to put up an online shopping website? Do you need a 3d presentation of a product you want to place in your website? This one is perfect for you.

710tutorials-2013-3d-elements

Creating an Immersive Slider Experience with jQuery Immersive Slider

Sliders are still a thing in the world of web design. Be creative and try this tutorial out. Your eyes will pop at the fusion of simplicity and beauty at its finest.

710tutorials-2013-slider-background-blur

Creating a Parallax Scrolling Webpage Using Jarallax.js

Doing a videogame website design? Or a promotional website for a movie? Try this tutorial and let it help you using Parallax scrolling.

 70-tutorials-2013-parallax

Create a Smooth Jump To Sub-Navigation Menu in One JS Call

Navigation is a key element to any website. If you have the easiest to navigate design, more likely, you’ll get the money. Allow your users to still navigate even within posts using this tutorial.

70-tutorials-2013-jump-to

FancyScroll.js: Add an iOS/Android Overflow Scroll Effect

Are you a fan of Android or iOS scroll effects? Adapt them to your website and give it a feel of simplicity and professionalism.

70-tutorials-2013-overfow-scorll-effect

OnePageScroll.js: Creating an Apple’s iPhone 5S Website

One page scrolling has been a think this year. With the major companies like Apple following the trend, it becomes a bandwagon design as it epitomizes the functionality of all content within one page.

70-tutorials-2013-one-page-scroll

Notify Better.js: Creating a Dynamic Favicon and Title

Dynamic favicons are cool. Period. It gives a flare on your designs and lets you own every bit of it. Create dynamic favicons by following this tutorial and I bet you’ll have a very good time tinkering with this.

70-tutorials-2013-dynamic-notificaion

LoadingBar.js: Adding a YouTube-like Loading Bar to Your Website

When YouTube first adapted that loading bar, everybody’s eyebrows went high and wondered if they could re-do it and adapt the design into their website. Well, we can. Here’s the tutorial.

70-tutorials-2013-youtube-loading

Super Simple Text Rotator with Almost No Effort Required

Great for advertisements and short descriptions, this text-rotator will make your website more creative and adds flavor of movement and dynamism into it.

70-tutorials-2013-text-rotator

Create a Path-like Menu Button with WheelMenu.js

With the revamp of Path a few years back came a button like no other. It is very convenient and eye-pleasing. Learn how to create it through this tutorial.

70-tutorials-2013-path-like-menu

Creating the New Google Play’s Multi-Level Navigation from Scratch

Reeking with googliness is the next tutorial that borrowed the design of Google play. Learn how to create this eye-candy tutorial now.

70-tutorials-2013-multi-level-google-play-nav

Add Depth to Flat UI with Flat Shadow.js

Use long shadows using code? Yes, you can. I didn’t believe that too. Well, not before I have finished reading this tutorial. Read and see for yourself.

70-tutorials-2013-long-shadow

Creating a Swipeable Side Menu for the Web

Learn to recreate the behavior of side menus in smartphone applications in your website design. Both designs are suited for mobile and desktop versions. Learn how this tutorial works and become fun for both mobile and desktop users!

70-tutorials-2013-swipable-menu

Creating a 3D Interactive Gallery with CSS and jQuery

Imaginations are pushed further as this gallery is put into the limelight. Be amazed at how simple and yet awesome the output is. This is great for portfolio designs!

70-tutorials-2013-gallerry-using-jQuery

Making Draggable Webpage Elements Using jQuery

Draggable elements are very interactive. It lets your viewer see how your mind works by stretching your users’ imagination. Using this tutorial, you will learn how to put a little twist in your regular design.

70-tutorials-2013-draggable-elements

Make Pretty Charts For Your App with jQuery and xChart

Want to put something analytic in your website? How about trying charts using jQuery and xCharts? Be prepared for eyegasms as you will be pampered with good-looking data.

70-tutorials-2013-pretty-charts

Create a Beautiful Password Strength Meter

If you are planning to put sign-up forms, better spice it up using this tutorial. Add a beautiful password strength meter to ensure the safety of your users while adding a different look in your forms.

70-tutorials-2013-password-strenght-indicator

How to Build an iOS-Style Content Slider using jQuery

Create a cool slideshow using jQuery inspired by iOS. The good thing about this tutorial is that it allows you to drag the images to navigate them.

70-tutorials-2013-ios-style-slider

How to Create a CSS3 Login Form

Refurbish your log-in page through this very simple tutorial. Give your users a new look and make your website better.

70-tutorials-2013-css3-login-form

Create a Sticky Navigation Header Using jQuery Waypoints

This is another cool tutorial that involves the navbar. This time, it moves a few pixels down and becomes less opaque.

70-tutorials-2013-sticky-sidebar3

Quick Tip: Embedding New Google Maps

Maps are back on track as another tutorial is included in this list. Re-tweak your maps using this tutorial and revolutionize how people navigate in real life.

70-tutorials-2013-google-maps

Build a Dynamic Dashboard With ChartJS

This chart tutorial adds effect to the previous one as it provides with more samples and templates to choose from. Present your data using pie, line and hexagonal charts.

70-tutorials-2013-charts2

Draggable Image Boxes Grid

Do you have a client who wants a gallery type design? Well, this one might help you. Using grids and tiles as navigation tools, your client will surely love your work.

70-tutorials-2013-draggble-image-boxe

Medium-Style Page Transition

Showcase your posts in a totally new way using these transitions. With both simplicity and elegance, this tutorial will surely help you impress your clients, now and in the future.

70-tutorials-2013-medium-transitions

3D Shading with Box-Shadows

3D-looking boxes are not an abomination in the flat design trend. In fact, adding a 3D effect in your designs will accentuate the message you are trying to convey. Learn how it works on this tutorial.

70-tutorials-2013-box-shadows

Google Nexus Website Menu

Want to tinker more on menus? This Nexus-looking menu is great for a start. It is totally refreshing to see and amazingly easy to navigate. Try it.

70-tutorials-2013-google-nexus

Caption Hover Effects

Hovers have never been this awesome. I admit that I was pretty impressed with this tutorial. Clever as it may seem to be, reading this will make you realize that it’s not that difficult to do after all.

70-tutorials-2013-hover-effects

Responsive Retina-Ready Menu

Inspired from the colors of the Maliwan Borderlands Game, this menu is both retina-ready and colorful. Try to resize the page and see if the images become pixelated.

70-tutorials-2013-retina-ready

Thumbnail Grid With Expanding Preview

Another gallery tutorial that lets you enlarge the image for a better preview by clicking on the thumbnail.

70-tutorials-2013-Thumbnail-grid

How WordPress Plugins Work

Perhaps one of the best WordPress plugin tutorials there is. This one introduces you to the magical world of plugins and teaches you step-by-step to become a plugin developer.

70-tutorials-2013-wordpress-plugin

Killer Responsive Layouts With CSS Regions

Still in responsive layouts? Smashing Magazine gives an option using CSS Regions. Read this tutorial and become free from the limits posed by CSS elements.

Conclusion

And there you have it, guys. Seventy tutorials that highlights 2013. As 2014 comes right into our doorsteps, read these tutorials to refresh and to learn new things for the next year will surely be a bang! More tutorials to come, more design trends to be inspired from, more clients to ask for your help and hopefully, more money to fall right into your pockets.

September 03 2013

13:00

Beginners Guide to Working with jQuery Animation

In this tutorial, we are going explore the basics of jQuery animations for you to get prepared for advanced designs. Animations is the core functionality behind the interactive elements in web design.

The design of a website plays a major role in attracting visitors on a consistent basis. Interactive designs get more attention compared to the plain old static designs.

Technology is improving at a rapid pace to cater the advanced modern web designs. As a result, CSS3 offers the animations without the help of JavaScript. Even though CSS3 and HTML5 are improving in leaps and bounds, jQuery seems to be the popular choice for creating interactive designs.

Let’s get started!

Practical Usage of jQuery Animations

jQuery has been used widely for designing interactive elements such as sliders, menus, scrollers and so on. Before we start the animation aspects, I suggest you to have a look at the following practical implementations, which illustrates the power of jQuery animations.

As a beginner, you can’t  just jump into the types of designs illustrated in the preceding section. So here we are going to cover the basics of jQuery animations from the beginner’s perspective.

Introduction to Basic Animations with jQuery

Most designers have the knowledge of working with basic jQuery or JavaScript codes. Changing the visibility of an element is a common task that is included in almost every website design. We can just hide/show the element using CSS display or visibility attributes. jQuery simplifies the process by introducing two functions called hide and show. Consider the following code for showing and hiding an HTML element.


$("#panel").show();

$("#panel").hide();

With the preceding code, the element appears and disappears in a very limited time range. Use the following jsFiddle link to see a demo of the preceding code in action.

http://jsfiddle.net/nimeshrmr/bMmFS/

Ideally, we should smoothen the process of hiding and showing elements using animations to provide better user experience. jQuery provides two built-in techniques for showing and hiding elements with simple animation effect.

  • Fading – Integrates a fading motion into HTML elements by changing the element’s opacity.
  • Sliding – Integrates a sliding motion into HTML elements by changing the element’s height.

Let’s see how to use the above techniques to show and hide the elements with an animated effect.

jQuery encapsulates the complexity of animations by providing built-in methods to cater various tasks in web design.

Fading

Fading is mainly provided by the functions called fadeIn and fadeOut. Opacity of the element is increased by the fadeIn function and decreased by the fadeOut function. We can also pass the time interval for fading as shown in the following code.


$("#panel").fadeIn("slow");

$("#panel").fadeOut("fast");

We have the option of choosing slow or fast as the predefined values for the time interval . Also,we can pass the number in milliseconds to define the duration of animation. Here is the jsFiddle demo for working with fadeIn and fadeOut functions.

http://jsfiddle.net/nimeshrmr/zcRzL/

Sliding

Sliding functions change the height of the element instead of opacity for animating elements. Functions and syntaxes work exactly similar to fading, where slideUp is used for hiding and slideDown is used for showing elements. Following code previews the basic usage of sliding functions.


$("#panel").slideDown("slow");

$("#panel").slideUp("fast");

Duration parameter also works similar to the usage of fading functions. Here, you can see the actual beginning of the animations by moving the element. Consider the following URL for a demo usage of sliding functions.

http://jsfiddle.net/nimeshrmr/nDz6J/

Getting Started with jQuery Animate Function

Most beginners will think that building animations is a quite complex task. Definitely it’s difficult if you are doing it from scratch. jQuery encapsulates all the complexity by providing a single standalone function, which handles any type of animation. Basically, the animations will be created by altering the values of the CSS attributes. Once you get used to the jQuery animate function, building complex animations will become a simple task. Let’s get started by looking at the basic syntax of animate function.


$( "#panel" ).animate({

  // CSS Properties and values

}, 5000, "linear", function() {

  // Completion Handler

});

Preceding code illustrates the syntax for using the animate function. The first parameter contains all the CSS properties and values. The next optional parameter defines the duration of the animation. The third parameter defines the easing( animation type) and the final parameter defines an anonymous function for handling animation completion. Having looked at the basic usage, we can move into creating something practical with jQuery animations.

Animating Image Parts

In this section, we are going to look at how we can display an image by animating image parts. First, we have to split an image into smaller images. You can use the technique provided in my tutorial on Create Jigsaw Puzzle Using jQuery and PHP for splitting images.

Here, is the image that we are going to use for animation.

animations1

Inside the source codes, you will find 12 images generated by splitting the preceding image. Each image will have the dimensions of 150px x 150px. Sub images are divided into 2 rows of 6 blocks. Then all the 6 blocks of each row will be positioned in the right hand corner of the page using the following code.


<div id="img_panel">

    <div class="img_item"><img src="1.jpg" /></div>

    <div class="img_item"><img src="2.jpg" /></div>

    <div class="img_item"><img src="3.jpg" /></div>

    <div class="img_item"><img src="4.jpg" /></div>

    <div class="img_item"><img src="5.jpg" /></div>

    <div class="img_item"><img src="6.jpg" /></div>

    <div class="img_item2"><img src="7.jpg" /></div>

    <div class="img_item2"><img src="8.jpg" /></div>

    <div class="img_item2"><img src="9.jpg" /></div>

    <div class="img_item2"><img src="10.jpg" /></div>

    <div class="img_item2"><img src="11.jpg" /></div>

    <div class="img_item2"><img src="12.jpg" /></div>

</div>

Here, we have separated 12 images into 2 columns using two CSS classes called img_item and img_item2. Now let’s look at the CSS code for positioning images.


    .img_item{

       position: absolute;

       right: 0px;

       opacity:0;

       top :0;

    }

    .img_item2{

       position: absolute;

       right: 0px;

       opacity:0;

       top:150px;

    }

According to the above code, all the images of each row will be hidden and positioned on top of each other using absolute positioning. Now we can look at the jQuery code for generating the image through animations.

$(document).ready(function(){

   var left = 0;

 $(".img_item").each(function(i,val){

           $(this).animate({

               left: left,

               opacity: 1

           }, 1500 );

           left += 150;

   });

   left = 0;

 $(".img_item2").each(function(i,val){

           $(this).animate({

               left: left,

               opacity: 1

           }, 1500 );

           left += 150;

       });

    });

First, we have two selection statements for filtering img_item and img_item2 class items. Then we execute the animate function on the individual elements to convert opacity to 1 and left positioning relative to the preceding image part. Basically, all the image parts will start the animation at the same time providing an output similar to the following image.

animate3

We can use similar effects inside sliders, splash screens, image galleries. Here is the demo of the preceding implementation.

Now you know the basics of working with animate function. Let’s dig deeper into the animation aspects by looking at advanced configurations.

Designing Sequential Animations

In the preceding scenario, all the elements started animating immediately on page load. But sometimes we want sequential animations, where animation of each element starts after the completion of preceding element. So here we are going to load the same image using sequential animations. Let’s start by defining the HTML code.


<div id="img_panel">

    <div class="img_item"><img src="1.jpg" /></div>

    <div class="img_item"><img src="2.jpg" /></div>

    <div class="img_item"><img src="3.jpg" /></div>

    <div class="img_item"><img src="4.jpg" /></div>

    <div class="img_item"><img src="5.jpg" /></div>

    <div class="img_item"><img src="6.jpg" /></div>

    <div class="img_item"><img src="7.jpg" /></div>

    <div class="img_item"><img src="8.jpg" /></div>

    <div class="img_item"><img src="9.jpg" /></div>

    <div class="img_item"><img src="10.jpg" /></div>

    <div class="img_item"><img src="11.jpg" /></div>

    <div class="img_item"><img src="12.jpg" /></div>

</div>

The only change from the previous code is the use of single CSS class instead of two classes for rows. This implementation will generate the rows from jQuery code instead of hard coding using CSS classes. The CSS code for this implementation will be same as the code used for the previous example. Now let’s look at the jQuery code for sequential animation.


    $(document).ready(function(){

       var left = 0;

       var items = $(".img_item");

       animateImg(items,0,0,0);

    });

Once the page is loaded, we get all the image elements using img_item class. Then we pass the items into a function called animateImg for processing animations. The following code provides the implementation of animateImg function.


var indexNum = 1;

 var animateImg = function(items,left,height,indexNum){

 if(items.length >= indexNum){

           var item = items.get(indexNum);

           $(item).animate({

               left: left,

               top : height,

               opacity: 1

           }, 1500 ,function() {

               left += 150;

               indexNum++;

               if(indexNum  % 6 == 0){

                   left = 0;

                   height += 150;

               }

 animateImg(items,left,height,indexNum);

           });

       }

    };

The animateImg function uses four parameters for providing its functionality. The first parameter defines the collection of image items. The second and third parameters define the left and top values of the screen. Initially these 2 values will be set to 0 to start the image from the top left corner of the screen. The fourth parameter is the index number of image for separating them into rows.

First, we check whether we have reached the end of the items array by using an if condition. Then we get the image at the given index number from the items array. Then we call the animate function with a duration of 1500 milliseconds. Next, we increase the index number to get the next element from items array.

In this scenario, we have 2 rows with 6 images each. So we take the module of the index number to check whether we have reached an end of a row. If so, we increase the top value of the image to dynamically create rows. Finally, we call the animateImg function in a recursive manner to traverse through all the elements and generate the complete animation. The following image previews the sequential animation for this scenario.

animate2

Here you can find the demo for the preceding scenario.

As you can see, we have used the animation complete function to execute the animation on the next element. So each animation will start after the preceding one is completed. We can achieve similar functionality with queue functionality of the animate function.

Chaining Animations

Up to this point, we created single animations on each element. In complex scenarios, we need to chain multiple animations on a single element. So let’s modify the preceding example to chain animations.


var animateImg = function(items,left,height,indexNum){

 if(items.length >= indexNum){

           var item = items.get(indexNum);

           $(item).animate({

               left: left,

               top : height,

               opacity: 1

           }, 1500 ,function() {

               left += 150;

               indexNum++;

               if(indexNum  % 6 == 0){

                   left = 0;

                   height += 150;

               }

               console.log(items);

 animateImg(items,left,height,indexNum);

           }).animate({ left:left+150}, 1500);

       }

    };

We can chain animations on elements by calling the animate function multiple times using the dot notation. In the preceding code, we have started another animation after the first animation using .animate function. We can add any number of animations using this technique. Here is the demo of chaining animations.

Wrap Up

In this tutorial, we explored the possibilities of building animations with jQuery animate function. We have looked at various practical techniques when animating the parts of an image to generate the complete image. Now you can continue researching about the things mentioned in the following list for enhancing jQuery animations.

  • Animations queueing
  • Handling animation progress
  • Handling animation steps

Hope you take time to build some amazing animations as we listed in the beginning of this tutorial. Feel free to share and discuss about them using the comments section.

July 02 2013

13:17

Create a Flat Countdown Timer in Photoshop – iOS 7 Inspired

In this tutorial I’m going to show you how to create a simple countdown timer, iOS 7 inspired!

Flat design is dominating the web and I’m sure you all know that Apple created a new look and feel for their OS. I’m really happy seeing the minimal look of the user interface and I know Apple fans are eagerly waiting to test iOS7 this fall. So, while we’re waiting I’m going to show you some great wallpapers and we’ll create a countdown timer in Photoshop. The look and the colour scheme will be based on the iOS 7 wallpapers that have been released. This tutorial will be very quick and beginners will find this Photoshop tutorial helpful in understanding the power of Free Transform.

Video Tutorial

And in case you prefer to do it the rough way, here’s a text and screenshot combo tutorial for you!

Step 1

Create a new document in Photoshop 730px by 410px and then let’s create guidelines by just dragging some guides from the Ruler Tool and placing them at the center of the canvas horizontally and vertically.

Step 2

Using the Ellipse Tool (U) create a 120px by 120px shape and place it in the center. Hide the fill layer and a stroke of 5px, color to #e1e1e1.

Step 3

Zoom in about 1200% and create a 1px line using the Line Tool (U) starting from the top edge of the circle down to the middle.

Step 4

Press Ctrl + Alt + T on the keyboard and you will see a transform control. See that Pivot Point (something like the crosshair of a sniper) on the center of the line? Let’s move that to the bottom edge of the line by holding the Alt key on the keyboard and clicking and dragging it to the very bottom.

Step 5

Don’t press enter yet. While the transform control is still there change the value of the Rotation to 10 degrees and press enter twice.

Step 6

Now press Shift + Ctrl + Alt + T on the keyboard, what this does is copy what we did in Step 5. Just continue pressing the keys until you have a spiral line shape.

Then change the color to white.

Step 7

Duplicate the base first/base shape that we’ve created and place it at the very top of the layers panel. This will serve as the rotation indicator.

Apply this gradient overlay.

Step 8

Mask the part you want to hide and make sure it matches with the desired day, time, min, sec that we will put it.

Step 9

Using the Text Tool (T) add a number for the desired day, time, min, sec and add the right label to it.

Final Step

Group the layers that we’ve created and duplicate it 4 times and align them horizontally by adding a 20px gap between each timer.

Look what I did here. With the timer that we’ve created I put an iOS7 wallpaper and blurred it about 15%. Then I played with the layer mask to hide the unnecessary parts, added some drop shadows and Boom! I came up with image you see below.

It’s a challenge for you to take this tutorial and go to the next level by just playing with layer mask and adding touches to make it look interesting, yet still minimal.

The Wallpapers

Man Of Steel


Download

Flying Paper Plane


Download

Windmills


Download

Hot air balloon


Download

Hot, Ice, Cozy and Frapp


Download

The Evolution of Man Geek


Download

Paper Plane


Download

Vintage Camera


Download

Air Plane


Download

Space Shuttle


Download

iOS7 Wallpaper

Image from Ihponehacks
Here is the iOS 7 Wallpaper from WWDC 2013. You can download the wallpaper here.

That’s it guys, I hope you learned something from this tutorial. It will be awesome if you share your results below. If you have questions feel free to drop them below. I would love to hear your thoughts and I am willing to answer your questions. I’ll catch you guys in the comments. Peace!

August 12 2012

13:00

40 Creative and Versatile Adobe Illustrator Tutorials From 2012

Adobe Illustrator is the designer’s best friend (and together with Photoshop, they’re like Starsky & Hutch). Illustrator offers unlimited opportunities, but you need to know how to use them. That’s where neat tutorials come handy.

Tutorials are not going to make you a better or more talented designer, yet the techniques and tricks they cover will come to assist you for a long time.

For this roundup, we’ve prepared 40 fresh (2012 only), creative and comprehensive Adobe Illustrator tutorials. By going through these tutorials, you will learn many things, such as how to create cute little characters, get to know the basic shapes and find out why it is a good choice to use Illustrator for designing user interfaces. 

Learn Illustrator CS6

Learn-cs6-adobe-illustrator-tutorials

As you may know, Creative Suite was released recently but what does it mean for Illustrator grinders? You can check out these video series by Adobe on the basics of Illustrator CS6, getting started, new features, tutorials etc. created by product experts.

1. Creating a Day of the Dead Inspired Portrait

Day-dead-adobe-illustrator-tutorials

This tutorial is going to show you how to create a Day of the Dead inspired portrait with Adobe Illustrator CS5. Along the way you’ll be using a variety of different sources to obtain color palettes, using a selection of brushes and many other quick tips you can use in future projects.

2. Create a Detailed Lifebuoy Illustration

Lifebuoy-adobe-illustrator-tutorials

In this Adobe Illustrator tutorial you will learn how to create a semi-realistic lifebuoy graphic. Once you are done with the basic shapes you’ll continue with some Pathfinder options, several Warp and Gaussian Blur effects plus some basic masking techniques.

3. Create a Detailed Scanner Illustration

Scanner-adobe-illustrator-tutorials

In this Adobe Illustrator tutorial you will learn how to create a detailed scanner illustration. You’ll be starting with a bunch of simple shapes and some basic vector shape building techniques. Once you have the starting shapes you’ll continue with some Pathfinder options, several new effects plus some basic masking techniques.

4. Create a Printer Illustration

Printer-adobe-illustrator-tutorials

In this Adobe Illustrator tutorial you will learn how to create a detailed printer illustration. You’ll start with two simple rectangles and some basic vector shape building techniques. Once you have the starting shapes you’ll continue with some Pathfinder options, a bunch of complex linear gradients and some simple effects. For the highlights you’ll use some simple blending techniques.

5. Create a Simple Map Illustration

Map-adobe-illustrator-tutorials

In this Adobe Illustrator tutorial you will learn how to create your very own simple vector map illustration. Some basic vector shape building techniques along with a bunch of warp effects is covered.

6. Create a Detailed Restaurant Chalkboard

Chalkboard-adobe-illustrator-tutorials

In this new Adobe Illustrator tutorial you will learn how to create a detailed restaurant specials style chalkboard. This is a pretty challenging tutorial, but with patience and some basic Illustrator knowledge you will make it through, and have a new illustration to play with.

7. How to Create Hand-Painted Sign in Adobe Illustrator

Sign-adobe-illustrator-tutorials

In this tutorial you will learn how to create an inscription in a retro style based on the free font — the Agency FB. In the process of the font-change you will learn something about letter anatomy. The techniques described here will be useful not only for the work with typography but also for the work with any vector objects.

8. Creating the Sole of a Sports Shoe with the Appearance Panel

Sports-shoe-adobe-illustrator-tutorials

This tutorial is going to show you how to use the Appearance panel to create a stylized version of the bottom of a sneaker. It’s a great exercise for those who are just getting to grips with the Appearance panel.

9. How to Create a Detailed Button and Needle Illustration

Button-needle-adobe-illustrator-tutorials

In this tutorial you will learn how to create a detailed button and needle illustration. This tutorial uses many different vector techniques including the Appearance Panel, Transparency Settings, Patterns and more.

10. How to Create a Promotional Website Infographic in Adobe Illustrator

Infographic-adobe-illustrator-tutorials

In this tutorial you will learn how to collect and process statistical data, then visualize it using Adobe Illustrator. You will also learn how the various vector elements of this project were created, as well as how to save the project in PDF format, edit it, add hyperlinks, and place navigation between pages.

11. Quick Tip: How to Create Subtle Patterns for Web Projects in Adobe Illustrator CS6

Subtle-patterns-adobe-illustrator-tutorials

Recently, the subtle pattern has been used more often in the design of websites. This tutorial will show how to create several types of these fillings. The whole process should take you only a few minutes if you use the Pattern Creation feature in Adobe Illustrator CS6.

12. Create a Detailed Syringe Illustration

Syringe-adobe-illustrator-tutorials

In this tutorial you will learn how to create a detailed syringe illustration. You’ll use basic illustrator shape creation tools and Illustrator’s Pathfinder tool to cut the shapes you need. Then you’ll color in details using gradients. You’ll use additional Illustrator tools along the way and work to pixel precision.

13. Create a Stylish, Vector Hair Typography Illustration

Hair-adobe-illustrator-tutorials

This tutorial is going to show you how to create this stylish piece of hair typography in Adobe Illustrator CS5. You’ll also finish it off with a quick aged coloring giving it a vintage design feel.

14. Creating a Detailed Eye from Stock in Adobe Illustrator

Eye-adobe-illustrator-tutorials

This tutorial is going to show you how to create a detailed eye from a stock image in Adobe Illustrator. You’ll work from some basic skin shading around the eye, to eyelashes, then a detailed iris and even eyebrows in this vector workflow.

15. How to Create a Line Art Vintage Vector Scooter in Illustrator

Scooter-adobe-illustrator-tutorials

This tutorial is going to show you how to create a vintage vector scooter illustration. It’ll show you how to create simplified line art without over-complicating the image. You’ll learn how to create a quick texture as a finishing touch from resources you have available to you within Adobe Illustrator.

16. Quick Tip: How to Easily Outline Curly Letters

Curly-letters-adobe-illustrator-tutorials

Making smooth looking curves and curls in vector can be tricky, especially if you’re working with hand drawn forms. This quick tip is going to show you the process of outlining some extremely curly letterforms that have been hand drawn and scanned into the computer.

17. Create a Skull & Crossbones Sticker Design in Illustrator

Skull-sticker-adobe-illustrator-tutorials

Follow this step by step guide to create a cool little skull and crossbones sticker design in Adobe Illustrator. This tutorial will hopefully be a great one for Illustrator beginners, as you’ll not only be creating the skull and crossbones design using all the important tools found in Illustrator, you’ll also be setting up the basic print document with bleeds and guides.

18. How To Create a Vector Sponge Art Effect in Illustrator

Sponge-art-adobe-illustrator-tutorials

Today designers and illustrators strive to add that retro/vintage style to their work with textures, so this tutorial covers the process of creating a cute kids style illustration complete with a vector sponge stamp effect.

19. Create a Retro Triangular Pattern Design in Illustrator

Triangular-pattern-adobe-illustrator-tutorials

Follow this step by step Illustrator tutorial to create the popular retro style pattern design made up of lots of colourful squares and triangles. The process is pretty simple, making this a good tutorial for newcomers to Adobe Illustrator.

20. How To Create a Cool Vector Yeti Character in Illustrator

Yeti-character-adobe-illustrator-tutorials

Follow this step by step Illustrator tutorial to create a cool vector Yeti character. You’ll use as many basic shapes as possible to achieve that quirky style of illustration, then bring the character to life with a palette of cold colours. Despite the use of basic shapes this tutorial includes a good spread of intermediate to advanced tools and techniques.

21. Happy Tree Friends in Illustrator

Tree-friends-adobe-illustrator-tutorials

Happy Tree Friends became classic because of the contrast between the cuteness of the characters and the violence and gore that they get into. That’s what you’ll try to depict following this tutorial. It’s a beginner tutorial, so no one should get any trouble on doing it.

22. Create Courage, The Cowardly Dog in Illustrator

Courage-dog-adobe-illustrator-tutorials

Courage, The Cowardly Dog was one of the awesome Cartoon Network series characters. Learn how to draw him in Illustrator. This is half a case-study and half a tutorial.

23. Create a Creamy Ice Cream Poster on Illustrator

Ice-cream-poster-adobe-illustrator-tutorials

A step by step tutorial, the idea is to incentive the idea of playing in Illustrator. It’s a simple tutorial and will deal with some pretty basic shapes, but a good knowledge of the softwares tool will make things quite easier for you, also if you are using a tablet for this tutorial.

24. Create a 3D custom map in Illustrator

3d-map-adobe-illustrator-tutorials

This tutorial explains how to create isometric icons in Illustrator using a grid and the 3D Extrude tool. Once you get the hang of drawing the simplest shapes in this isometric style, you can draw just about anything.

25. Video tutorial: Quick and easy pattern swatches in Illustrator CS6

Pattern-swatches-adobe-illustrator-tutorials

Becca Allen explains how to make complex and colourful pattern swatches using the Pattern Creation mode in Illustrator CS6.

26. Create retro graphics in Illustrator

Retro-adobe-illustrator-tutorials

This tutorial explains how to create a cool T-shirt graphic with a retro feel in just a few simple steps. Using Illustrator, you’ll form some simple vector shapes with the Pen tool and then add textures for a retro aesthetic.

27. Create a textured vector cityscape

Cityscape-adobe-illustrator-tutorials

This Masterclass shows how painter and graphic artist Phil Ashcroft created his urban cityscape newbuild (Creekside), which looks at new housing developments growing within areas that had previously fallen into decline. Phil explains how he combined traditional compositional, colour and layout skills, utilizing a background in painting to create a bold, clear yet atmospheric digital work.

28. Bring the happy to an illustration

Happy-adobe-illustrator-tutorials

With a carefully constructed composition that makes creative use of colour, it’s possible to create an image rich in magic and positivity without it being sickly sweet. The chance find that forms the basis of the artwork in this tutorial is a sacred tree-stump temple for tiny practitioners of a unique style of woodland-based martial arts.

29. Create Art Deco type art

Art-deco-adobe-illustrator-tutorials

This tutorial’s featured artwork began life when Adam Pointer was commissioned by design agency Zip to produce a piece promoting the Sunday night event at the now-defunct London West End club, The End. This Masterclass focuses on the process, which author says is about creating, selecting and positioning elements without resorting to any great wizardry.

30. Create promotional artwork that sells you to new clients

Self-promotional-adobe-illustrator-tutorials

Self-promotion is one of the most important areas of any freelancer’s business. Ben the Illustrator devotes some of his time to devising art purely to win over potential clients, and in this tutorial he takes you through the creation of a piece from what he calls his ‘seasonal billboard’: online self-promotional work depicting the four seasons.

31. How to Create Infographics in Adobe Illustrator

Infographic-2-adobe-illustrator-tutorials

In this tutorial you will learn how to create information graphics (infographics) using the standard tools of Adobe Illustrator. You will also get to know some ways to change graph appearance retaining its dynamic functions; i.e. you will be able to edit the data graphs after all transformations.

32. How to Create a Mail App Icon Using Adobe Illustrator

Mail-icon-adobe-illustrator-tutorials

This tutorial is going to show you how to create icons for iOS-applications, it will also cover the technical requirements that are applied to this kind of products. In the process you will be using unique techniques that will allow you to create light and shade and soft play of colors.

33. Sketch to vector Illustrator Tutorial

This tutorial will show you how to go from sketch to vector and maintain that hand-drawn look. You’ll start off with cleaning the image in Photoshop, then take it into Illustrator and use the automated live trace tool.

34. How to Create Vector Illustrations Using the Pen Tool in Adobe Illustrator

This tutorial shows you how to use the pen tool to trace out images and create vector illustrations.

35. Bezier Basics: Introduction to Pen Paths in Adobe Illustrator

This is a very basic introduction into how Pen paths (or Bezier Paths) work in Adobe illustrator. Later tutorials will show you how to do basic tracing and drawing work in Illustrator. You will also examine how other software, such as Photoshop, After Effects, Motion, Final Cut, and Cinema 4D all use bezier paths in their own way to do things like create shapes, control movement and generate 3D forms.

36. Illustrator: setting up a graph

Learn how to set up a graph and edit basic settings in Adobe Illustrator. Useful for creating infographics.

37. How to Create a Detailed Calendar Widget

Calendar-widget-adobe-illustrator-tutorials

In this Illustrator tutorial you will learn how to create a detailed calendar widget.

38. Creating a Slice of Cake Icon with Adobe Illustrator

Slice-cake-adobe-illustrator-tutorials

This tutorial is going to show you how to create a slice of cake icon in Illustrator. It’s going to take on a previously determined style to help become part of a baked goods icon set.

39. Why you should use Adobe Illustrator to create user interfaces

Interface-adobe-illustrator-tutorials

Novice designers always come up with a question about which application to use to create user interfaces. Most choose a bitmap editor such as Photoshop. However, some believe that vector editors are better suited for this purpose, especially when it comes to such a powerful application as Adobe Illustrator. Why? This article is an introduction to the series of tutorials that will be devoted to the creation of interface elements in Adobe Illustrator.

40. How to Create a Gift Card and Prepare Artwork for Printing Using Adobe Illustrator

Gift-card-adobe-illustrator-tutorials

This tutorial covers the issues concerning the creation and pre-press workflow of a vector file. When creating an artwork that you are going to print, you should take into consideration the design’s technical factors. Author uses some premium plugins but you can even manage without them.

What do you think of these tutorials? Do share your thoughts in the comments below!

July 18 2012

13:00

Create a Pricing Table using Photoshop in about 20 Minutes

We are used to presenting data using different graphics, modules and tables so that the information is easier to understand. Pricing tables have been, and still are, used by a lot of companies and individuals to display their available plans. It’s pointless to use a pricing table if you only have one plan to offer. But if you have more, then it is a very useful and attractive way of displaying information about each of your plans. We’ll be using Adobe Photoshop to create a pricing table which will only take about 20-30 minutes.

Are you ready?

Pricing Table

Step 1

Create a new 1200x600px document. Our pricing list itself will be 1000x340px but we need some work space that’s why our main document is larger.

Step 2

By using the Rounded Rectangle Tool (U), create a shape of 1000x340px. Apply a barely visible outer glow effect as well as a 1px stroke. Set the stroke color a little bit darker than the color of our shape.

Step 3

We’ll divide our pricing table into 3 sections. The “header”, the “content” and the “CTA” zone.  Our “header” section will only contain the name of the plan. By using the Rectangle Tool (U), create a shape that is 1000pixels wide and 70px high. Give it a dark gray color (#e0e3e3) and apply some Drop Shadow to achieve the effect we would get by applying “Outer Glow”, the only exception is that we can set a direction (by changing the angle).

Step 4

Our Pricing Table will contain 4 plans which you can sign up for. It is a common thing to highlight one of the plans, and mark it as the “Best Deal” or something similar. Use the Rounded Rectangle Tool (U) and create a shape of 250x290px. Your shape must have the same effects applied as our base layer.

Step 5

Repeat the third step, the only exception would be the header. Give it a darker gray color (#d1d1d1).

Step 6

In our pricing plan, we will be using 2 fonts, “Open Sans” and “Helvetica”. Use the Semibold weight of “Open Sans” for the plan names in the “header” section of our table.

Step 7

Use “Helvetica” for the price of each plan. As we want to highlight our “Advanced” plan, we will make the price tag a brighter red.

Step 8

We move on to the “content” section. It will consist of 3 features that you are going to provide your customers. It has a pretty simple structure. We’ll be using “Open Sans” as our font. The numbers are 24pt Bold. The text is 14pt Regular. Each feature is divided by a “dotted line”, but can be easily changed with a simple line.

Step 9

Each plan must have a CTA Button which would allow customers to take an action. Whether it will allow them to find out more, or proceed to pay, the button must be there. By using the Rounded Rectangle Tool (U), create a gray shape and apply a dark gray Drop Shadow effect.

Step 10

Apply the Gradient Overlay effect with the Blend Mode set as Soft Light, and the Opacity: 40%.

Step 11

Finish the button by adding a Gradient type of Stroke.

Step 12

By using “Open Sans Bold”, 24pt, input some text on the button. “Choose Plan” looks good to me. Now duplicate the “content” and “CTA”  sections twice that we have just created and place them accordingly. Refer to the final version if you feel a little bit confused.

Step 13

The “Advanced” plan does not differ much except the brighter price tag and the CTA button. The red button is pretty similar to the gray one, the only exceptions are its base color which is: #ed161c and the stroke colors which you can see below.

Step 14

Change the stroke colors from the gray ones to the following red ones and finish the button.

Final Result


Want To Check Details Yourself? – Download PSD


What do you think about this tutorial? Share your thoughts!

July 16 2012

13:00

Create an All-Purpose Advertisement Banner in Photoshop

In this tutorial you will learn how to create an advertisement banner in a few easy steps. We’ll take you through the process of creating a banner from scratch in a few minutes. We’ll do our best to make it for general purpose so you could use it to advertise almost any project of yours.

Step 1

One of the most basic and common size for ad banners is: 300x250px. Open Adobe Photoshop and create a new document that’s larger than that. I’ve used a simple grunge texture on gray for the background.

Step 2

By using the Rectangle Tool (U), create a dark gray rectangle. As we said, the rectangle must be 300×250 pixels. Apply an Outer Glow effect to it (#343434).

Step 3

Apply an Inner Glow effect as well. Even if it looks blurry at the moment, the inner glow will be a nice touch to our rectangle when we finish it.

Step 4

We will apply a seamless (transparent) pattern to our shape. We want it to be barely visible, that’s why I’ve set the blend mode to: Soft Light and the opacity to 5 percent. The pattern I used is a part of this set.

Step 5

We’ll finish the rectangle with a stroke effect. It must be 1px in size and darker than the base color of our rectangle.

Step 6

Grab any ornamental vector set you can find on the web. There are plenty of them available for free on the internet, with lots of elements. I used 2 identical ornamental shapes I have found on the web, and placed them accordingly. For our headline, we will use the “Bebas Neue” font, 48px. Apply a drop shadow effect to the headline and to the ornamental shapes as well.

Step 7

Grab the Rounded Rectangle Tool (U), set the radius to 2 pixels and create a shape of 260×125 pixels. Apply a drop shadow effect to it. You’ll have to duplicate the shape two times, and reduce the size of the first by 1 percent and the second one by 2 percent.

Step 8

Input some text by using the “Museo Slab” font (#887e7e). Grab any 16×16 px icons from the IconSweets 2 set and place them accordingly. By using the Line Tool (U), create two subtle lines (#e6e6e6) which will work as dividers for the text strokes.

Step 9

By using the Rounded Rectangle Tool (U), create a red shape (#dc4027). This will be the base for our call-to-action button. Apply a drop shadow effect.

Step 10

Apply a subtle inner shadow effect. Set the opacity to 15 percent.

Step 11

Apply a gradient overlay effect with a soft light blend mode applied. Set the opacity to 35%.

Step 12

Finish the button by adding the stroke effect. Set the Fill Type as Gradient so you can apply a darker red color for the bottom part and a brighter one for the “first half” of the button.

Step 13

Use the “Bebas Neue” font again to input some text on the button. It can be whatever you’d like, i chose “Sign Up”. Apply some drop shadow to the text as well.

Step 14


If you wanted to get PSD file, you can get it right here!:



Finish the button by adding some “hand-written” text under the CTA button. Use “Journal” to achieve that handwritten-like effect. It’s really easy to create the arrow as well. You will have to create any shape, like a slash and then use the “Warp Text” feature to achieve the desired result.

April 26 2012

13:00

How to Design a Sleek Downloader Interface Using Photoshop

This is the link to the original article creator of this site, if this message appears to another site than 1stwebdesigner - Graphic and Web Design Blog - 1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles. it has been stolen, please visit original source then!

I’m back once again with another cool web interface tutorial. Today we’ll be making this sexy file downloader with crisp and clean details. This can be used for web and mobile applications, perfectly cool for smartphones and tablets too!

As you will see there are quite a lot details in here, the whole point and also the hardest part of adding details is to make them noticeable, but not TOO obvious. Make them soft, clean and smooth. Pick colors with not too much contrast and especially play around with the opacity until it feels right.

You’ll also learn how to create a simple pattern in your design with the use of the pen tool.  Patterns can be a key to perfection in your designs. Use them wisely, too many patterns can destroy a design.

Now, let’s see what we are going to make:

As you can see, there’s a lot of detail in there. But the level of contrast and cleanliness is still perfectly balanced.

Alright, let’s start this off!

Step 1 – Building the main shape

First we have to make the base shape of this file downloader.

This shape exists on 4 separate layers.

Reference:

We start off with the “List bg” layer.

Create a (about) 308px by 130px big rectangle with the Rectangle Tool.

Once you have that you’ll need to add some style to that thing!

This is what it’s gonna look like:

Layer styles:

Gradient Overlay:

Stroke:

Inner shadow:

Drop Shadow:

Your shape should look similar to mine by now. You may have noticed the gradient I used in the stroke. This is because of the gradient I had in the background. To keep the contrast even on every spot I had to make that gradient.

Next we’ll make the background for the downloading file.

Reference image:

This shape is also 308 px width, but only 50 px high.

Layer styles:

Gradient Overlay:

Stroke:
 

Inner Shadow:

Drop Shadow:

I made the lines on there with the pen tool. Use the shift button to make perfect 45○ angle lines.

After you made the correct shape, use ctrl + click on the layer thumbnail to load up the selection. Then make a new layer and fill up your pen tool shape with a solid white.

These lines could move from the right to the left when the file is actually downloading to show some activity.

After this, duplicate a few times until the whole thing is filled.

Only thing left for the main shape is the bottom part. This shape makes the whole downloader way more dynamic. It gives it a sort of 3D effect.

Grab the Rectangle tool again and make a new layer called ‘Bottom’ see layer reference image on top for how to stack the layers.

The shape:

The layer styles:

Gradient overlay:

Stroke:

Drop Shadow:

That’s it.  The main shape is there.

Step 2 – Let’s get some content in there

Before we’re gonna add the text and icons, we have to create the yellow progress bar. This bar visualizes the progress of the download.
2 Layers here. The full width progress bar. And the yellow bar on top of it.

The full width bar first.  #343434, pick yourself a nice height.

Layer styles:

Inner shadow:

Drop Shadow:
 

Then, the yellow bar, of course, having the same height.

Some layer styles:

Gradient Overlay:

Inner Shadow:

You can play with some patterns on this or anything you want. Bring out your creativity ;)

That’s it for the progress bar.

2 Things left to do:

  • Fill in the active downloading file
  • Create the list of the files to be downloaded.
The top:

Font: Open Sans download here.

Size: 10 pt.

Light grey color.

Next is the active state of the download.

Layer styles:

Gradient Overlay:

Inner Shadow:

Drop Shadow:

Applaud yourself, you are almost done ;)

Last bits: (For the cancel icons, mine came from the iconsweets icon pack. you can pick your own though.)

That’s it guys. You’ve just made a sexy file downloader! The details look awesome, don’t they? Thanks for following this tutorial and if anything is unclear, feel free to leave a comment!

Final image:

March 19 2012

10:00

50 Fresh and High Quality Adobe Photoshop Tutorials

Waiting for the fresh collection of Adobe Photoshop tutorials? If yes, then your waiting has come to an end. Here we are featuring a good collection of some high quality Adobe Photoshop tutorials for you so that you can learn some new techniques and can polish your Photoshop skills.

Adobe Photoshop itself is quite easy to learn and with the help of tutorials the learning process becomes a fun activity. Enjoy looking into this collection and have more fun in using them for your works. Let us know what you think about this compilation or if we have missed out some cool tutorials, just drop us a line and we will try to include that in our next compilation.

1. Create a Baseball-Inspired Text Effect

Applying texture to a text effect can be a lot of fun. In this tutorial we will explain how to create a baseball-inspired text effect using layer styles, patterns, and brushes. Let’s get started!

Create a Baseball-Inspired Text Effect in Photoshop

2. How to Create a Psychedelic Tiger Illustration

Learn how to create this super cool neon tiger poster in Photoshop! You’ll learn how to get neon colors using Gradient maps and learn some over-painting techniques to bring the whole image to life.

How to Create a Psychedelic Tiger Illustration in Photoshop

3. Create a Semi-Realistic MacBook Pro from Scratch

In the following Photoshop tutorial you will learn how to create a semi-realistic MacBook Pro from scratch. First, you will learn how to use the grid and the snap to grid for an easier workflow.

Create a Semi-Realistic MacBook Pro from Scratch

4. Create a Festive Cocktail Using Photoshop’s 3D Capabilities

In this tutorial, we will explain how to create a festive cocktail using Photoshop’s 3D capabilities just in time for your New Year’s celebrations. Let’s get started!

Create a Festive Cocktail Using Photoshop’s 3D Capabilities

5. Create a Cartoon-Style Graffiti Text Effect

Learn how to create graffiti text from scratch in Photoshop! This tutorial will show you how to use layer styles and finish the effect with a vector-style brick background.

The Avengers Poster in Photoshop

6. Create a Royal Gold Text Effect in Photoshop Using Layer Styles

In this quick tutorial we will show you how to create a royal gold text effect using layer styles in Photoshop. Let’s get started!

The Avengers Poster in Photoshop

7. Create a “Real Steel” Film Poster Inspired Text Effect

In this tutorial, artist will show you the steps he took to Create a “Real Steel” Film Poster Inspired Text Effect in Photoshop. This is an intermediate tutorial so some steps can be tricky, but why not have a try :)

Create a “Real Steel” Film Poster Inspired Text Effect in Photoshop

8. Create Realistic Shoelaces From Scratch

In this tutorial we will explain how to create realistic shoelaces from scratch in Photoshop. Let’s get started!

Create Realistic Shoelaces From Scratch in Photoshop

9. Create a Magical Photo Manipulation with Flowery Effect

In this tutorial, you will learn how to create a Magical Photo Manipulation with Flowery Effect in Photoshop. This is an intermediate tutorial so some steps can be tricky, but why not have a try :)

Create a Magical Photo Manipulation with Flowery Effect in Photoshop

10. How to Make a Car Advertisement Poster Design

In this graphic design tutorial, we’ll cover the essential advertising workflow. By following along with this Photoshop ad tutorial, you’ll see how to take just a simple stock image and build a pixel perfect artwork around it, while also communicating valuable information about the brand to viewers.

How to Make a Car Advertisement Poster Design

11. Create an “Action” Text Effect

In this quick tip tutorial we will demonstrate how to create a cinematic “Action” Text Effect in Photoshop using layer styles. Let’s get started!

Quick Tip: Create an “Action” Text Effect in Photoshop

12. Create a Mini Planet Using Photoshop’s 3D Capabilities

When most people think about Photoshop, they probably don’t think about 3D. What most people don’t realize, however, is that Photoshop CS5 Extended includes some powerful tools to help you render your artwork in 3D. In this tutorial we will demonstrate how to create a mini planet using Photoshop’s 3D capabilities. Let’s get started!

Create a Mini Planet Using Photoshop’s 3D Capabilities

13. Create a Dramatic Building Explosion Scene

In this tutorial we will learn how to create a Dramatic Building Explosion Scene.

Create a Dramatic Building Explosion Scene

14. Create an Action Packed Movie Poster in Photoshop

In this tutorial we will explain how to create a character-centered movie poster using photo manipulation techniques. We will also explain how add text to give our poster a cinematic feel. Let’s get started!

Create an Action Packed Movie Poster in Photoshop

15. Create a “Transformers” Text Effect Using Layer Styles

In today’s quick tip tutorial we will demonstrate how to create a cinematic “Transfarmers” Text Effect using the layer styles. Let’s get started!

Quick Tip: Create a “Transfarmers” Text Effect Using Layer Styles in Photoshop

16. The Avengers Poster in Photoshop

In this tutorial we will show you how to create the shine effect of The Avengers poster using only Photoshop. We will pretty much play only with Layer Styles and the Brush Tool.

The Avengers Poster in Photoshop

17. Create a Rusty and Worn Metallic Textured Skull Using 3D Renders

Photoshop is a fantastic tool to help 3D artists save time and improve the look of their renders. In this tutorial we will demonstrate how to combine ZBrush materials and lighting render passes to create a stunning metallic textured skull. Let’s get started!

Create a Rusty and Worn Metallic Textured Skull Using 3D Renders

18. Create the Emotional Photo Manipulation Flaming Heart

In this tutorial we will show you how to create a photo manipulation with firing effect. You will learn how to manipulate stocks images together, use brush, masking, work on fire, do some special extracting and retouching techniques as well as adjust colors and lighting to create a beautiful and emotional scene.

Create the Emotional Photo Manipulation Firing Heart

19. How to Create High Quality Metal 3D Text in Photoshop

Most of you probably know those awesome letters that were generated with 3D programs. But what about when you don’t have any particular program and you need to make 3D typography? This tutorial will show you how to create the 3D text shape and give it a high quality metal look using pure Photoshop. Check it out!

How to Create High Quality Metal 3D Text in Photoshop

20. Learn How To Create A Stubby Pencil In Photoshop

In this tutorial we will be showing you how to create a neat stubby pencil from scratch using adobe photoshop.

Learn How To Create A Stubby Pencil In Photoshop

21. Create a Medieval Battle Axe in Photoshop

In this tutorial we will demonstrate how to construct a medieval battle axe in Photoshop. This tutorial will cover several techniques but don’t worry, it won’t be too difficult to follow. Let’s get started!

Create a Medieval Battle Axe in Photoshop

22. Learn How To Create A Photoshop Style Pen Tool Icon

In this tutorial we will be showing you how to make your very own photoshop pen tool icon from scratch, using photoshop CS5. Lets get started…

Learn How To Create A Photoshop Style Pen Tool Icon

23. Create a Mobile App Icon in Photoshop

In this tutorial, we will explain how to design an icon for your mobile device’s home screen. Let’s get started!

Create a Mobile App Icon in Photoshop

24. How to Create a Fan Illustration From Scratching

In this detailed tutorial your will learn how to create a fan illustration.

How to Create a Fan Illustration From Scratching Using Photoshop

25. Create an Elephant Sundae Using Photo Manipulation Techniques

Photoshop is great at seamlessly combing photos to create an entirely new scene. In this tutorial we will create an elephant sundae using several stock photos. Let’s get started!

Create an Elephant Sundae Using Photo Manipulation Techniques

26. Create a Surreal Floating Stone Structure Scene

In this tutorial we will learn how to create a Surreal Floating Stone Structure Scene.

Create a Surreal Floating Stone Structure Scene

27. Draw a Character Concept Using Drapery in Photoshop

In this tutorial we will learn how to draw a character concept using drapery in Photoshop.

Draw a Character Concept Using Drapery in Photoshop

28. Create a Dark, Conceptual Photo Manipulation

In this tutorial we will be teaching how to integrate elements from different sources to create a realistic photo manipulation with dark and conceptual elements. You will learn some lighting and blending techniques as well as some interesting post-production tips. Let’s get started!

Create a Dark, Conceptual Photo Manipulation With Stock Photography

29. Learn How To Create An Open Book In Photoshop

In this tutorial we will be showing you how to create a sleek book with a nice leather textured background. Lets get started.

Learn How To Create An Open Book In Photoshop

30. Create a Dynamic Portrait with Flashy Light Effects

Learn how to create your own futuristic portraits with swirling ribbons of light. This Photoshop tutorial will show you how to create light streaks and other high-tech elements that you can incorporate into your own photos!

Create a Dynamic Portrait with Flashy Light Effects

31. Design a Detailed Audio Receiver Icon in Photoshop

In this tutorial we will show you how to create a detailed audio receiver icon using Photoshop’s vector editing capabilities. Let’s get started!

Design a Detailed Audio Receiver Icon in Photoshop

32. Design an Interesting Human Face Manipulation with Tree Roots Texture

In this tutorial, artist will show you the steps he took to Design an Interesting Facial Manipulation with Tree Roots Texture in Photoshop. This is an intermediate tutorial so some steps can be tricky, but why not have a try :)

Design an Interesting Human Face Manipulation with Tree Roots Texture in Photoshop

33. Easy Hulk Logo on Illustrator and Photoshop

In this tutorial you will learn how to create Hulk Logo on Illustrator and Photoshop, this is a intermediary tutorial, so it’s not as long and it’s not as hard.

Easy Hulk Logo on Illustrator and Photoshop

34. Make a Colorful Gooey Typographic Design

In this design tutorial, we’re going to create a colorful and liquid-like typographic piece in Photoshop. We will be using the Pen Tool (P) quite a bit, as well as covering some useful digital airbrushing techniques to achieve the final result. Let’s fire up Photoshop and get started!

Make a Colorful Gooey Typographic Design in Photoshop

35. Create a Glamorous Vintage-Style Poster in Photoshop

In this Photoshop tutorial, designer will walk you through a process of creating digital work inspired by older magazine fashion ads. You will learn how to use basic shapes and brushes to create an abstract background, see how layers react to one another with Blend Modes, how to create trendy abstract shapes, how Gradient Maps can be used to influence the overall design and more.

Create a Glamorous Vintage-Style Poster in Photoshop

36. How To Create a Dirty Typographic Blackletter Design

In this tutorial we’re going to create a typographic blackletter layout full of character with dirty textures. We’ll begin by creating the layout in Illustrator before importing everything into Photoshop to bring the design to life with colour, tone and weathered textures.

How To Create a Dirty Typographic Blackletter Design

37. Create a Mythical Fantasy Female Photo Manipulation

In this photo manipulation tutorial, we will use many effects and blending and toning techniques, We are sure you’ll learn something out of it even if you already are a professional.

Create a Mythical Fantasy Female Photo Manipulation

38. Create a Realistic Vault Icon in Photoshop

Learn how to create a realistic Vault/Safe using Adobe Photoshop. We’ll be creating this vault using shapes, blending options and various techniques.

Create a Realistic Vault Icon in Photoshop

39. Realistic smoke effects in your digital print design through Photoshop

In this tutorial we will learn how to create a realistic smoke effects in your digital print design through Photoshop.

Realistic smoke effects in your digital print design through photoshop

Tutorials for Creating Website Layouts

40. Design a Professional Blog Layout in Photoshop

In this tutorial we’re going to walk through designing a professional blog magazine theme in Photoshop. This is an exercise in aesthetics and you’ll learn a bunch of techniques which will improve your skills in Photoshop. Grab a coffee, sit tight and let’s get started!

Design a Professional Blog Layout in Photoshop

41. Create a Classic-Styled Portfolio Design in Adobe Photoshop

In this tutorial we will be creating a nice design for your online portfolio. What we will learn here is how you can use a combination of textures and patterns to create a nice old-school look and how to use guides in a smart way.

Create a Classic-Styled Portfolio Design in Adobe Photoshop

42. Create A Dark, Clean Website Design In Adobe Photoshop

In this tutorial we’re about to learn how to design a dark, clean website in Adobe Photoshop. As we go through this tutorial, we’ll work with: simple shapes (rectangles, lines, arrows, etc), layer styles, patterns, importation, and paragraph styles, and many other Photoshop design techniques that you can adapt to your Website interface design workflow.

Create A Dark, Clean Website Design In Adobe Photoshop

43. Design a Drupal Business Theme in Photoshop

We are going to walk you through designing a simple website which can be converted into a functional Drupal theme. In this, the first part, we’ll cover basic photoshop techniques, such as styles, slicing, guides, layer structure and much more.

Design a Drupal Business Theme in Photoshop

44. Design a Clean e-Commerce Website Interface in Photoshop

Here we will show you how to create this clean e-commerce website interface in Adobe Photoshop. This tutorial isn’t only filled with many Photoshop techniques but also design concepts that go beyond the how-to part, which I’m sure you don’t want to miss. So let’s get started!

Design a Clean e-Commerce Website Interface in Photoshop

45. Design a Food/Cafe Website Template in Photoshop

Learn how to design a professional and fun website template for a Cafe, Restaurant or Food related website. We’ll be using simple yet effective methods and various photoshop tools to create this beautiful layout from scratch!

Design a Food/Cafe Website Template in Photoshop (+Free PSD)

46. How to create a Business Web Layout in Photoshop

In this tutorial we will learn how to create a Business Web Layout in Photoshop.

How to create a Business Web Layout in Photoshop

47. Designing a Jeweler’s Website in Photoshop

In this tutorial we will be designing a Jeweler’s Website in Photoshop.

Designing a Jeweler’s Website in Photoshop

48. How to Design an Elegant Hotel Website in Photoshop

Here we are sharing a tutorial to design a Hotel/Motel business web layout in Photoshop. This is an easy tutorial and even beginners should be able to follow it.

How to Design an Elegant Hotel Website in Photoshop

49. Design a Textured Email Template in Photoshop

In this tutorial we’ll be learning how to make a Textured Email Template using Adobe Photoshop. To make this template, we’ll be creating a textured pattern from scratch, using various shapes, a wooden texture, blending options and helpful tips and techniques.

Design a Textured Email Template in Photoshop

50. Create a Clean Twitter App Interface in Photoshop

In this tutorial we will create a clean Twitter app interface in Photoshop using layer styles and basic vector shapes. Let’s get started!

Create a Clean Twitter App Interface in Photoshop

January 27 2012

21:00

Create a Classic-Styled Portfolio Design in Adobe Photoshop

Howdy, today we will be creating a nice design for your online portfolio. What we will learn here is how you can use a combination of textures and patterns to create a nice old-school look and how to use guides in a smart way.  Here is what we will be making:

Resources for this tutorial


  • Icons from Iconsweets
  • Sample images for the center image
  • PSD Download – but really, you should follow the tutorial first!

Step 1: Setting up the Document


  • Start by creating a 1600px x 1600px document in Photoshop.
  • Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.
  • Rulers: Ctrl + R
  • Guides: Ctrl + ; or Ctrl + H
  • The total width of our content will be 960px. Our canvas is 1600px width. So what you have to do is go to View – New Guide. Set the value to 320 px. Repeat the step but now change the value to 1280 px, this will make a total of 960 px to the center of our canvas.
  • Because this design will have a 3 column set up, you will need 2 more guides. 960 / 3 = 320 px.
  • So repeat the step again twice, but now with the value of: 640px and 960px.
  • So what you now should have, is an empty canvas with 4 lines. Which represent the alignment we will be using. You can hide these guides by Ctrl + H
  • Fill the background with: #272e2e.

Step 2: Working on Base Background for Header and Slider


We are going to give this header background a nice old-school look. We will use a texture and a pattern for this. Combining these with the right colour should give the style we are aiming for. Start by selecting the rectangular marquee tool (M), create a 100% by 390px shape, color #2daaa5. Go to Blending Options on this layer and select Gradient Overlay. Below are my settings: Next, we have to add the texture. You can use the one below or download your own.

  • I used the one above at 20% opacity.
  • Now, for the Pattern. What I did was make a new document, 5 x 5 px and background Transparent In here we will make the pattern.
  • Zoom in all the way (1600%), select the Rectangular tool (M) and make a cross in the document.

Like this:

  • Go to Edit -> Define Pattern. Here you’ll save the pattern which you can use in every other .psd file.
  • Back to our work file, Ctrl + left mouse click the blue layer. This will load the selection of the layer. Now, at the bottom of the layer panel select the black/white icon and choose Pattern Fill. It should automatically show your pattern but if not, select the arrow next to the thumbnail of the selected pattern. You’ll see a selection of patterns which should include your defined pattern.
  • Hit OK and there is your pattern.
  • Opacity = 3%.
  • Now we will make a nice line at the bottom of the header background. There’s actually 2, 1px lines. the upper one is #26938e, and the one below is #44c6c1.
  • To make these lines it’s easy to use the (horizontal) Single Row Marquee Tool.

Should look close like this: So far for the header background. Of course you can experiment with colours and different textures/patterns.

Step 3: Filling The Header With Logo/Nav & Slider


So, we made the document and we have a nice background for the header. Now it’s time to fill it up with content. First step, making a logo. What I did was quite easy. The font I used is Century Gothic. The settings can be found here: Kroal   Portfolio Kroal: Color overlay is white. Portfolio: The last part of the logo is a vertical line which should be on your guide. Like this: I made that line with the Rectangular Marque tool. color: #289a96. Second step, the navigation. The navigation is just some simple text fields with 13px Open Sans font. The slashes in between are the same font but 10px and 37% opacity. The Blending Options for the nav text are: The lines beneath the text are 2 layers, made with Rectangular Marquee Tool. Colours are: #289a96 and just white for the active line. Third is the slide show, mine is 960px by 410px. Of course you can choose any size. Use the Rectangular Marquee Tool to create the shape. I recommend to switch to Fixed Size style-mode. I used Drop Shadow and Stroke, settings below. Use the Rectangular Marquee Tool again to make the little zoom icon caption. Hold shift while making this square. This will keep the dimensions right. The icon can be found in the Iconsweets pack. Also the caption to the right of the slider is made with the rectangular marquee tool.  The text settings are below: /WEBDESIGN: AVICII BLOG The next part we will make are the small dots beneath the slider which show on what slide you are right now. I recommend making them with the Ellipse Tool (U). What you have to do is make 3 circles of about 15×15 pixels. The layer styles for these layers can be found here: Drop Shadow   Inner shadow Color Overlay One of the dots needs to be the active one. Make this circle again with the Ellipse Tool (U). Blending options: Inner Shadow Gradient Overlay You may have noticed there’s a shadow beneath the slider. Let’s make that! The shadow was made with the Pen tool (P). Try to make a shape like this:

  • Next, fill the shape with black, and go to filter > Blur > Gaussian blur. Choose a radius which fits you best. Mine was about 4 px.
  • For the content background. It’s kind of the same as the header. But now you’ll just use the pattern and not the texture. Fill the background with #272e2e.
  • Add another pattern overlay with the same pattern.
  • Opacity is about 15%.

Then the arrows beneath the slide show. You can make them with the pen tool or just use a standard icon. Blending options left arrow: Drop Shadow   Inner Shadow Color Overlay

  • Just a solid black #000000
  • Blending options right arrow.

Drop Shadow Inner Shadow Color Overlay Color: #607474 You may have noticed there is a line to separate the slider from the content below. These are 2 1px lines 100% width. Upper one is #1f2626, lower one is #2b3232. made with Single Row Marquee tool.

Step 4: Filling In The Content


  • The content starts with a 3 column showcase of text about your website.
  • If you don’t see your guides you made at the start hit Ctrl-H. This should make them pop-up ;).
  • I like to have some icons to give some information about what the content includes. So search for icons which fit what you would like the visitors to see. It should fit the reading content. Mine are from the Iconsweets pack.
  • Next to the icons is a single header title. Font is Open Sans, it’s all capital 15px and the colour is just plain white.
  • The lorem text also is open sans, but now it´s 12px.
  • Next, the read more button. Select the Rounded Rectangle Tool (U). Make it 3px radius and make yourself a nice sized button.

Blending options below: Drop Shadow: Inner Shadow Gradient Overlay There’s another line beneath these 3 columns. You can just duplicate the ones you made before.

  • Next is another 3 columns, but now it’s a showcase of the last 3 portfolio items.
  • Another icon + title as a header. And all the way too the left is a button to the portfolio. It has same dimensions as the buttons before but different styling.

Drop Shadow Inner Shadow    Gradient Overlay Stroke Then, the images. The thumbnails are 306px by 135px. Make an inner stroke that is 3 px plain white. and put an image on clipping mask. The shadow beneath the thumbs are made the same way as for the slideshow.

Step 4: Let’s Make A Footer


First we have to make some sort of separation between our content and the footer we’re about to make. You can see in the image above that there are 4 1px lines. Make them again with the Single Row Marquee Tool. Play around with color and opacity until it feels natural. The background colour of the footer is #161a1a. I made the field with the Rectangular Marquee Tool. The footer again contains the 3 column build-up. Recent Tweets, Recent News & Contact form. I think the text is pretty easy to create with what I explained earlier. The buttons have the same blending options as the View Portfolio button. The only new thing is the contact form. I pulled out the Rounded Rectangle Tool (U) and created 3 shapes with 3px radius. The blending options are the same for all the 3 fields. Drop Shadow Inner Glow Gradient Overlay So, we’re almost there. Only one thing left to do. Make the copyright bar at the bottom. It has the same background as the content so that’s easy. The lines can be copied from the top of the footer and the text is just open sans again. This time the color is #c4c4c4.  That’s it for this tutorial, I hoped you guys learned some new techniques. Still got some questions? Just leave a comment below. Have a great and creative 2012!

December 21 2011

21:00

4 Simple Steps To Make Silhouettes Using Photoshop

Silhouettes as an art form originates back to as early as 18th century drawing its name from a French minister Étienne de Silhouette who imposed heavy economic cuts on French people. Quite symbolically austere outline portraits which became popular in the same time period started to be referred as Silhouettes.

Silhouettes art had tremendous popularity which has grown over years and is now associated more with images depicting fashion and fitness. Traditional ways of making Silhouettes are somewhat complex which involve cardboard and paints, but thanks to two wonderful inventions of mankind – Photoshop and Wacom things are much simpler now.

In this tutorial I will take you through some beautiful examples for inspiration and then we will proceed to make a silhouette from scratch.

Step 1: Inspiration


Silhouettes in movies
silhouettes in movies

The famous silhouetted image of Elliot and E.T. encircled by the moon depicted in Steven Spielberg’s E.T. It is now a part of the logo of his film and television company Amblin Entertainment.

The second one is of Alfred Hitchcock in American television series Alfred Hitchcock Presents in which he himself appears in a silhouette form in the opening screen and in a number of scenes as well.

Silhouettes as traffic symbols
silhouettes as traffic symbols

The first one is a Japanese railroad crossing signal which uses a silhouette of a steam engine. The second one is from Canada which warns drivers for speeding cameras. The third one is a Swedish moose warning signal, portraying silhouette of a moose, a typical encounter you might experience while driving in Sweden!

Silhouettes of public figures

Silhouettes of public figures
The first one is of English novelist Jane Austen, author of famous titles like Pride and Prejudice (1813) and Sense and Sensibility (1811) . Her silhouette is attributed to 19th century artist Mrs. Collins and is displayed at the National Portrait Gallery, London. The second one is of silhouette depiction of Queen Victoria used as decoration in the London Underground. The third one is artwork of designer Jonathan Mak depicting Steve Jobs on the apple logo, which went viral on the internet few days ago.

Step 2: Sketch


Grab a pencil and a sheet of paper and start sketching your ideas. No need to sketch in detail as we are going to use only the outline for making the silhouette, but make sure that the dimensions and/or anatomy is correct. In my case my client wanted something like a person using a phone. I made a few sketches, and drew a dark outline around them.
Silhouette sketch outline

The first idea depicts a lady walking a dog, looking at her phone. I imagined a background with neighborhood depiction like houses etc. which I can add to the silhouette later on. The second idea is of a guy standing and looking at his phone. In this case I imagined a park or similar setting with street lights etc. as background.

Step 3: Scan


Draw a thicker outline on your sketch and scan it. After scanning I found that the silhouette of the lady with dog appeared better on-screen, so I went ahead with it.

Scan

Step 4: Digitally Enhance


Open up the scanned image in Photoshop (or similar editor) and plug-in your Wacom (or similar device).

a. Outline

Create a new layer, select brush tool 2-3px, and set a contrasting foreground color (like red, so that it visible) and using the Wacom pen outline the image.

Scan

b. Fill the outline with the same color.

Fill silhouette

c. Duplicate the silhouette in a new layer, use the select tool to select the entire silhouette and fill it with #00000. In this step you can zoom into the image and edit minor flaws and smooth the outline with careful movements of the brush.

Select silhouette

Fill and save

If your silhouette consists of two or more elements, it’s easier if you handle them one by one. In my case I divided the task into three – the lady, the leash and the dog. So I repeated step a to c two more times and here is what the silhouette looks now.

So now the silhouette is done, you can save it as a vector and then proceed to using it in a banner or an image as required.

d. As I said before, I imagined the entire picture to be some sort of neighborhood, so created an apartment block and duplicated to make a couple of them for the background.

e. Now add the silhouette to the background

silhouette and background

f. Once the silhouettes and the background is ready, its time to work on the layout of the banner or the final image as required. Since this project was a banner for website I kept width as 900px and height as 357px. The elements that I added in this stage are speech bubbles which contains a specially designed Facebook button for the app and text.

silhouette on banner

The final banner looks like this. The banner depicts a Facebook enabled e-commerce app (www.dragdropshop.com), and will be a part of a sliding js carousel on client’s new homepage.

final banner with silhouette

10:00

Creative Christmas Gift For Geek Lovers – Web & Mobile App

Oh, Christmas. The magic time when you spend all the money you’ve been saving the whole year. Oh, and we have all that Christmas Spirit, of course.

Now, you probably want to spend a lot on your soul mate’s gift, to show her how deep is your love.

Yeah, money can buy cool things, but guess what: almost every year I make my own gifts for my girlfriend (but I always have to buy something else anyway). And I feel that she just loves when I do something by myself instead of just buying it (unless shoes, she wouldn’t like if I made her a shoe). So I’ll show you, dear Padawan, how to make a cool one-page-gift for anybody that you like.

Our goal here is to do a simple “slider”, where a lot of messages and pictures that you like are shown. In the meantime you’ll learn a little bit about design, jQuery and CSS3.

So, let’s rock!

Demo & Download


This is our final effect. You can check out our live demo and download our source files and start playing with it.

Design stuff


First of all we’ll need a cool background. Snow is not an option for me, since in Brazil we barely know what it’s like. So I’d rather pick a cool christmas tree and change it a little. I’ve found a couple of cool images to use in
Salman’s article full of Christmas resources. I’ve chosen one of them, adjusted its colors, sliced its background and cut the Christmas tree itself.

As our effect’s start point (slider and this stuff) we’ll use a rocking tutorial on how to do an Amazing Slideshow (John Lennnon Tribute). We’ll change it a little bit, but the main effect is just amazing :)

Now we need a good looking font for our design. I suggest you to go with Cartoon. Then just generate its webfont and we can include it in our basic HTML (that one downloaded from Rocking Code).

Our basic HTML will be like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<title>Happy Christmas!</title>
<meta name="description" content="Cool DIY Christmas Gift for geek lovers." />
<meta name="author" content="Rochester Oliveira - 1stWebDesigner.com" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

<link rel="stylesheet" href="css/style.css?v=2" />
</head>
<body>
<div id="tree">
<div id="container">
<h1>Happy Christmas!</h1>
<div id="masonry">
<div>
<img src="http://placekitten.com/200/300" alt="Cute kitten - http://placekitten.com/200/300" />
<div>Caption text.</div>
</div>
[... more .item divs]
</div>
</div>
<!--! end of #container -->
</div>
<!-- JavaScript at the bottom for fast page loading -->

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>window.jQuery || document.write("<script src='js/libs/jquery-1.7.1.min.js'>\x3C/script>")</script>

<!-- scripts-->
<script src="js/jquery.images.loaded.js"></script>
<script src="js/jquery.masonry.min.js"></script>
<script type="text/javascript">
//[slideshow action scripts]
</script>
<!-- end scripts-->

</body>
</html>

And basic CSS:

body {
	background: #feffef url("../img/bg.jpg") repeat-x center bottom;
 }
 #tree {
	position: relative;
	width: 100%;
	height: 100%;
	background: #feffef url("../img/bg-tree.jpg") repeat-x center bottom;
 }
#container {
	position: relative;
	width: 880px;
	margin: 15px auto;
	padding: 20px 20px 20px 30px;
	background-color: transparent;
	background-color: rgba(255,255,255,0.5);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#32ffffff,endColorstr=#32ffffff);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#32ffffff,endColorstr=#32ffffff)";
	-moz-box-shadow: 0 0 5px #B8B8B8; /* Firefox */
	-webkit-box-shadow: 0 0 5px #B8B8B8; /* Safari, Chrome */
	box-shadow: 0 0 5px #B8B8B8; /* CSS3 */
}
	#container h1 {
		font-family: 'CartonSlab';
		font-size: 20px;
	}
	.item {
		position: relative;
		padding: 0;
		width: 200px;
		margin-bottom: 20px;
		float: left;
		background: #000;
		overflow: hidden;
	}
		.item img {
			width: 100%;
			cursor: pointer;
		}
	.selected {
		border: 2px solid #fff;
		-moz-box-shadow: 0 0 3px #000; /* Firefox */
		-webkit-box-shadow: 0 0 3px #000; /* Safari, Chrome */
		box-shadow: 0 0 3px #000; /* CSS3 */
	}

As you may have noticed, our tree is done with a different HTML element, so it won’t affect our slideshow effect at all.

Oh, and don’t forget to generate favicons. They are really cool.

Setting up pictures and captions


One thing that will really impress your date is to choose romantic messages and cute stuff. So be ready to search for:

  • Cat pictures (demo with a lot of them)
  • Hearts
  • Landscapes
  • Your own pictures

I’ve found a couple of good quotes on QuotationsPage & RomanticloveMessages and have written my own ones (this is really important).

Then, let’s put them inside our HTML with proper markup. We’ll have captions positioned on top, middle and bottom, this way:

<div>
<img src="http://placekitten.com/200/300" alt="Cute kitten - http://placekitten.com/200/300" />
<div>You may not care for me like I care for you But if you ever need me, I will always be around for you.</div>
</div>
<div>
<img src="img/kitten.jpg" alt="Cute kitten - http://www.sxc.hu/photo/1369754" />
<div>It's hard to tell your mind to stop loving someone when your heart still does. </div>
</div>
<div>
<img src="img/kitten1.jpg" alt="Cute kitten - http://www.sxc.hu/photo/555320" />
<div>Meeting you was fate, but falling in love with you was beyond my control. </div>
</div>

And CSS will be:

.item .caption {
	position: absolute;
	top: 0;
	padding: 10px 20px;
	font-family: 'CartonSlab';
	font-size: 15px;
	color: #ffffff;
	background-color: transparent;
	background-color: rgba(0,0,0,0.5);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#32000000,endColorstr=#32000000);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#32000000,endColorstr=#32000000)";
}
.item .bottom {
	top: auto;
	bottom: 0;
}
.item .middle {
	top: 50%;
}

Coding Slideshow JS


Our basic logic will be:

  • It’ll hide all captions and reduce opacity for images on start;
  • It’ll automatically expand box and show caption, one at a time;
  • When hovering images, it’ll increase its opacity and automatically stop our timer;
  • When the person clicks on an image, it’ll expand its box;

First, we’ll make sure that no function will run before all images are loaded (it wouldn’t look good, trust me). This code will do the trick (since we’ve uploaded jquery.images.loaded.js):

//defaults
var $container = $('#masonry'), $items = $container.find(".item"), count = $items.length, current = 0, lowOpacity = 0.3, highOpacity = 1, timer = "";

$container.imagesLoaded(function(){
	$container.masonry({
		itemSelector : '.item',
		columnWidth : 220,
		isAnimated: true
	});

	init();
});

This init() will do our first, third and fourth bullet points. Let’s go through it:

function init() {
	//let's set all images to dark and bind their hover
	$items.find("img").each(function(index){
		//hide captions
		$($items[index]).find(".caption").fadeOut();
		//images setup
		$(this)
			.animate( { opacity: lowOpacity } )
			.hover(
				function(){
					$(this).stop().animate( { opacity: highOpacity } );
					stopTimer();
				}, function() {
					startTimer();
					if(index != current) {
						$(this).stop().animate( { opacity: lowOpacity } );
					}
				}
			)
			.click(
				function() {
					expand(index);
				}
			);
	});
	expand(0);
	startTimer();
}

The coolest thing here is all those chained functions. They improve performance a lot and if you break lines between them (always before “.”) it’ll be much better to understand.

Now we have two important functions, startTimer() and stopTimer(). I’m pretty sure you know what do they do. We’ll use setInterval and clearInterval to control our timer:

function startTimer() {
	timer = window.setInterval( "next()", 6000); // it'll call next function every 6 seconds and will identify this interval as "timer"
}
function stopTimer() {
	clearInterval(timer); //we'll kill timer :(
}

Now we called “next” function every 6 seconds let’s see what it does:

function next() {
	//if we add one item to current we'll still below our total count of numbers?
	if ( (current ++) < count) {
		expand(current++);
	} else {
		expand(0);
	}
}

Now what you’ve been waiting for: expand()

//this is what makes our current box bigger and the ones before it smaller
function expand(item) {
	var curItem = $(".selected"), $img = "";
	if(curItem) {
		curItem.animate({"width": "200px"}, function(){
			$img = $(this).find("img");
			imgOff($img);
			curItem.find(".caption").fadeOut();
		}).removeClass("selected");
	}
	$( $items[item] ).animate( {"width": "420px"}, function(){
		$img = $(this).find("img");
		imgOn($img);
		$(this).addClass("selected");
		$container.masonry( 'reload' );
		$($items[item]).find(".caption").fadeIn();
	} );
	current = item;
}
/*** functions used above **/
//let's make our current imag look better
function imgOn(img) {
	img.each(function(){
		$(this).animate( { opacity: highOpacity } );
	});
}
//let's turn off these images
function imgOff(img) {
	img.each(function(){
		$(this).animate( { opacity: lowOpacity } );
	});
}

Ok, then, let’s group all this stuff inside one script call, and we’re done!

var $container = $('#masonry'), $items = $container.find(".item"), count = $items.length, current = 0, lowOpacity = 0.3, highOpacity = 1, timer = "";
$container.imagesLoaded(function(){
	$container.masonry({
		itemSelector : '.item',
		columnWidth : 220,
		isAnimated: true
	});

	init();
});
//runs qwiki function for fisrt item so we'll start loop
function init() {
	//let's set all images to dark and bind their hover
	$items.find("img").each(function(index){
		//hide captions
		$($items[index]).find(".caption").fadeOut();
		//images setup
		$(this)
			.animate( { opacity: lowOpacity } )
			.hover(
				function(){
					$(this).stop().animate( { opacity: highOpacity } );
					stopTimer();
				}, function() {
					startTimer();
					if(index != current) {
						$(this).stop().animate( { opacity: lowOpacity } );
					}
				}
			)
			.click(
				function() {
					expand(index);
				}
			);
	});
	expand(0);
	startTimer();
}
function startTimer() {
	timer = window.setInterval( "next()", 6000);
}
function stopTimer() {
	clearInterval(timer);
}
// let's go on with next item if we didn't reach end of our set of items
function next() {
	if ( (current ++) < count) {
		expand(current++);
	} else {
		expand(0);
	}
}
//let's make our current imag look better
function imgOn(img) {
	img.each(function(){
		$(this).animate( { opacity: highOpacity } );
	});
}
//let's turn off these images
function imgOff(img) {
	img.each(function(){
		$(this).animate( { opacity: lowOpacity } );
	});
}
//this is what makes our current box bigger and the ones before it smaller
function expand(item) {
	var curItem = $(".selected"), $img = "";
	if(curItem) {
		curItem.animate({"width": "200px"}, function(){
			$img = $(this).find("img");
			imgOff($img);
			curItem.find(".caption").fadeOut();
		}).removeClass("selected");
	}
	$( $items[item] ).animate( {"width": "420px"}, function(){
		$img = $(this).find("img");
		imgOn($img);
		$(this).addClass("selected");
		$container.masonry( 'reload' );
		$($items[item]).find(".caption").fadeIn();
	} );
	current = item;
}

Personal touch: My horrible voice as background music


I’ve been learning guitar for 1 month. I know how to play two songs (“In spite of all the danger” and “Stand by me”) and I sing really, really bad. But when I showed my girlfriend my first “demo” record, well, I understood why so many guys want to learn guitar.

This is my final personal touch, and you could do so with a cool picture, a recorded mesage (video, maybe), or whatever you can imagine.

What do you think?


So, have you liked it? Are you planning to do something really special to the ones you love most? Let me hear your thoughts!

December 06 2011

10:00

Using Retro Style Images And Banners For Advertising

Retro style images and pop art graphics like those of Roy Lichtenstein and Andy Warhol is a popular style adopted by graphic designers for web and print design. They are chic, fashionable, eye-catching and add to the ‘cool’ factor of the company and its products. Lots of stock images are available for download which can be used for web designing, however if you want something unique or customized it’s better to grab a pencil and paper and do it yourself.

Step 1: Visualize the layout


If you are designing a website, it is important that you choose the image while constructing the wireframe as it should fit your overall layout accordingly. Have a look at some examples to get an idea. It is popular to use them like banners or as full body depiction which encompasses the entire page. Some examples are below
Mailchimp retro

istockphoto

Tagetscope retro layout

Step 2: Sketch


Once you have decided on the layout, its time to work on the image. Start with a few pencil sketches and try to capture the essence of the product. In this case my client was a mobile app company, so I decided to create an image of a lady displaying a standard touch screen mobile phone. To make sure that the original product gets the deserved attention I decided to sketch the lady and use a real phone image so that it remains highlighted and looks like a fun combination as well.

Retro image sketch

Step 3: Scan


Photocopy the pencil sketch so that the original sketch is preserved and can be re-used later. In this step you can either scan the sketch and add the details digitally (like details of hairstyle, dress etc) using Photoshop and a Wacom device, or if you feel more comfortable on paper, try to sketch the details on the photocopy and then scan it.

scan retro image

Step 4: Digitally enhance


Once you are satisfied with the scan, open it with Photoshop (or a similar editor) and plug-in your Wacom (or similar device). First use the magic wand tool in Photoshop to select as much area as possible from the image and save the structure in a new layer. Now use the pen tool to select around a shape and copy on a new layer. Finally use the brush tool and with careful movements of the Wacom pen add finishing touches to the image.

a. Using the magic wand tool to select and copy areas from the scanned image, and reconstruct them on a different layer (say layer2)

magic wand on retro image

b. Zoom and use the pen tool to copy the finer details on layer 2

pen tool on retro image

c. Use the brush to reconstruct the details on layer 2.

brush tool on retro image

Step 5: Integrate


Add the mobile phone (or any other product) to the image and adjust the size and contrast of the image for smooth integration. Add the entire image to the banner or the web layout. Try a few different backgrounds to see what works best.
retro and pop art inspired banner
retro and pop art inspired banner

September 09 2011

10:00

How to Achieve Lomography Effects Through Photoshop

Lomography is an interesting form of photography that’s on the rise today. It’s kind of like ‘backwards photography’–it’s a plastic toy camera that makes use of film. Because everything is made of plastic (yes, including the lens), the lomo camera does everything it’s not supposed to do: saturated colors, high contrast, off hues, vignettes, blurs, and more. It has developed into an art form because of these unique, ‘bad’ features.

However, lomography is expensive and time-consuming. A toy camera can be as cheap as $25 and more than $100. Plus you can’t see your pictures until the whole roll is over, and then you have to have it processed and scanned afterwards. Not to mention how disappointing it is when you found out that nothing from your roll came out. Even as a big fan of lomography myself, I also find it a bit too overpriced for a piece of plastic.

So whether you’re a cheapskate, you’re too impatient, or you simply find lomography too hard, there is a faster way to get those yummy lomo photos; thanks to the technology otherwise known as Adobe Photoshop.

Vignettes

Vignettes are a common feature in lomo photographs. Vignettes are characterized by a loss of clarity in the sides/corners of the image. It is often darker and blurry in the sides, but sharp and bright at the middle.

Do you know that creating a vignette in Photoshop is extremely easy? It can be done in less than five steps. The first thing to do is to open the image you want to add a vignette to. Copy the image and paste it in a new layer. Thus you have the same images in both layers.

On the top layer, select the elliptical marquee tool. Select and drag, making sure to include the whole image apart from the sides and corners. After you’ve made your final selection, right-click inside the selection and click on ‘Select Inverse’. This will swap the selected area, thus selection is now on the outer areas.

Now adjust the Brightness of the outer edges by selecting Image – Adjustments – Levels.  On Output Levels, drag the light arrow to the left to make it darker. Afterwards, go to Filter – Blur – Gaussian Blur to create soft edges. I adjusted my Gaussian Blur to 35, but you can adjust settings to where you are satisfied.

Of course, we are not yet done. Be sure though that only the topmost layer has been edited, leave the bottom layer of the same image untouched. To smoothly blend the vignette to the image, select the erase tool, set the brush tool to a big brush at 0% Hardness.

The final output should look more or less like the image below. You can also adjust the Brightness/Contrast of the image so that it can simulate the image more.

Cross-processed Photos

Lomography photographers often cross process their film, giving their photos weird colors and saturation. Cross processing is an old darkroom technique, the process involves deliberately processing film  with a chemical solution intended for another kind of film. This method was maybe discovered by photographers who accidentally used the wrong chemicals by mistake; and found the results interesting.

Here’s how you can do cross-processing through Photoshop. Let’s start with this image:

Pretty photo, but not retro funky enough.

Adjust the contrast level of the image until you are satisfied. Next is to open Image – Adjustment – Curves. Basically you just increase the Red and Green Channels  in the Highlights, and drop the shadows. In the Blue Channel on the other hand, raise the Shadows and reduce Highlights.

You can experiment with the effects yourself to get the desired cross-process effect you have in mind–go crazy or be subtle, whatever you want.

Multiple Shots

Many lomo cameras feature multiple shots in one single image: the Action Sampler, the Super Sampler, the Oktomat, etc. These cameras are great toys, but one has to admit that the novelty tends to wear off quickly.

Super Sampler Shot

There’s no doubt it’s easy to create this effect with Photoshop. All you need is to take continuous shots of the same place and subject, juxtapose it together in the Action Sampler / Super Sampler / Oktomat layout and it will look just the same. You can even add the vignette, noise and contrasted effect to make it more lomo-ish.

Photo by Rachel Arandilla

Photo above is an Action Sampler effect I created through Photoshop, done in less than ten minutes.

Fisheye Effect

The Fisheye is a cool effect, which takes a 170 degree photo of your surroundings. SLR cameras also have fisheye lens to achieve this effect. If you don’t have a fisheye lens or a Fisheye camera, here’s a quick way to get it in your photos.

Choose the image you want to create the fisheye effect. Crop it into a square by holding down ‘Ctrl’ while dragging to the desired area.

Select the Elliptical Marquee Tool and hold down ‘Ctrl’. Hold down until you select the whole image. Right click and select inverse, and fill the inverse area with black or white.

To create the fisheye effect, Simply open Filters – Distort – Spherize. Choose 100% and click OK.

Fisheye Effect

How About a Lomo Action Set

If you’re too lazy to do the editing yourself, there are downloadable action sets where you can simply click on ‘Play’. The computer does the rest for you, lomo-izing your photos in one second.

There are plenty of action sets online, such as the Lomo PS Actions by photoshop-stock. It’s free to use and download, with 6 available lomo actions that you can try. Here is the original image I selected:

Original photo, untouched

And here are the 6 lomo actions I tried, with their different colors and effects:

Lomo Mobile Application?

Lomo shots are now really popular, and because of this, mobile application developers are now taking a piece of the pie. Applications are now available to simulate lomo effects of your digital photos for both the Android and iPhone.

One of the more popular lomo applications is Instagram, which gives lomo filters to your otherwise dull iPhone shots. Moreover, you can instantly share your images on Twitter, Facebook, Tumblr and more.

The rise of these popular iPhone applications gave rise to a new term: iPhoneography. Essentially, this means the art of taking photos with your iPhone. You can post-edit the photos or not, if you are one of those purist photographers.

Is Photoshop the Answer?

Thing is, it’s not the effects that make lomography so great: it’s the experience. It’s about not knowing what you get, it’s about the surprise and the suspense, being thrilled and sometimes being disappointed. It’s about clicking the shutter with the picture in your mind and finding out it looks very different in print. Finally, lomography is about practice and experimentation, knowing more about your camera and yourself.

September 07 2011

10:00

July 02 2011

10:00

Template Show: How to Design a Gallery Layout in Photoshop

In this week’s tutorial we will create a gallery layout. I will not be using the 960 grid in this tutorial, the purpose is to show beginners out there how important the Ruler Tool is when you are designing in Photoshop. We will also tackle how to create and use patterns and using mask and filters.

Here is what we will be making, click on the image for full preview:

Resources for this tutorial

Step 1: Setting up the Document

Start by creating a 1200px x 1850px document in Photoshop.

As I mentioned earlier we will be using the Ruler Tool. Make sure that rulers and guides is turned on.

  • Rulers: Ctrl + R
  • Guides: Ctrl + ;

Also one thing important in using Ruler Tool is the Info(Information) Panel. The use of this is when you are measuring using the ruler the information will be shown in the information panel. Make sure that this is shown in your panels at the right. If it is not shown you can access this by going to Windows – Info.

The total width of your site will be 960px. So, let’s create our first guide by going to View – New Guide, set the value to 120px. Repeat the step of create a guide but now change the value to 1080px, this will make a total of 960px in the center of our canvas.

Step 2: Creating the Header

The Header section is composed of Logo, Navigation, and Search. First thing you need to do is to create a folder name it Header and inside of it create sub folders and name them Logo, Navigation, and Search. It is important that you group all the things you do properly in order to be organized and easily locate things in the future for coding purposes.

Inside Header folder create a new layer and name it bg. Using Rectangle Tool create a 100% x 100px. By looking at the Info Panel you can view the dimension of the shape that you’re making. Or you can do this by creating a new guide by going to View – New Guide – 100px Horizontal. It’s up to you what way you choose.

Add this Blending Option

  • Gradient Overlay: #dcdcdc, #ffffff

Next thing you do is create two lines using Line Tool 55px distance from the top. But I suggest to use Rectangular Marquee Tool to make the line pixel perfect.

  • Line 1: #cfcfcf
  • Line 2: #ffffff

As you can see in the preview of our header there is a pattern above the lines. Create a new document 9px x 7px, background content Transparent. Using Pencil Tool with a fill color of #cfcfcf create a pattern as shown in the screenshot below. When you are done go to Edit – Define Pattern and name it whatever you wish to call it.

Using Paint Bucket Tool instead of foreground change it to pattern and select the pattern we made. Apply this pattern by making a selection and fill with pattern using Paint Bucket Tool.

Step 3: Creating Logo

This is just a simple site name logo. Start by using Text Tool and type your desired site name.

Add this Blending Option

  • Inner Shadow: #000000

Step 4: Creating Navigation

Again using Text Tool lets place our navigation links.

Add this Blending Option

  • Drop Shadow: #ffffff

Step 5: Creating Search

To create our search bar use Rounded Rectangle Tool and set the radius to 10px, then create a shape as shown in the screenshot below.

As you can see in the preview above, the left side of our search bar is slanting. So, we need to transform our shape by selecting the layer and press Ctrl + T then Right Click to the work area and select Distort.

Next we need to mask the bottom part of our shape to be equal in our header. First set the foreground to #000000, then select the layer bg in our header and make a selection of it. While it is selected select the shape of our search the press the Mask Icon in the layers panel area beside the fx icon. Just refer to the screenshot below.

Add this Blending Option

  • Inner Shadow: #000000

  • Inner Glow: #fff

  • Gradient Overlay: #e6e6e6, #dcdcdc

Now let’s create the search button. Make a selection of the search bar, contract it by 2px, and fill it with any color. To contract go to Select – Modify – Contract.

Select Rectangular Marquee Tool, by pressing Alt key you will notice that there is a - sign beside the selection pointer, this sign means to deselect selection. Now you can deselect the section you want to deselect.

Add this Blending Option

  • Inner Glow: #ffffff

  • Gradient Overlay: #dcdcdc, #f9f9f9

  • Stroke: #c2c2c2

Open up the search icon, align it and add a 1px drop shadow #ffffff.

Step 6: Creating Slider

Create a folder above Header folder and name it Slider. Using Rectangle Tool with a fill color of #413f6b create a 100% by 250px.

Add this Blending Option

  • Inner Shadow: #ffffff


Convert the shape layer to Smart Filters by going to Filter – Convert for Smart Filters. Now, go to filter again and add noise

Controls

Create a folder inside Slider and name it Controls. Controls should have sub folders named: NextPrev and Slider Control. Inside NextPrev let’s create our Next and Previous buttons start by selecting Ellipse Tool with a fill color of #676589 and create a shape 40px x 40px.

Download the arrow icon provided in the resources and place it on our canvas. Resize and position it as shown in the screenshot below.

We are going to mask the shape, first set the foreground color to #000000, next make a selection of the arrow icon by Ctrl + Click to the layer and Inverse the selection by pressing Ctrl + Shift + I. While it is selected select the Ellipse shape and press the Mask Icon beside the fx icon in the layers panel.

Duplicate the shape and place it on the other side. Grab some sample images to put in our slide. Also, using Text Tool add some text: a sample title and a little content just follow the formatting of the text as shown in the screenshot below.


Now we are going to work on our Slider Controls. Using Rounded Rectangle Tool with a 10px radius create a shape as shown in the screenshot below. Transform the shape the same as we did in our Search bar.

Also mask the layer as we did previously, refer to Step: 5 Creating Search.

Add this Blending Option

  • Gradient Overlay: #dcdcdc, #ffffff

Using Ellipse Tool create a shape as shown in the screenshot below.

Add this Blending Option

  • Drop Shadow: #ffffff

  • Inner Shadow: #000000

This will be the result.

Using Rectangle Tool with a fill color of #000000 create a 100% by 5px shape, then set the layer mode to multiply and opacity to 30% in the layers panel.

Make a selection of the slider control shape and expand it by 5px by going to Select – Modify – Expand.

Final step to create our slider is to add highlights. First make a selection of our slider base, then select Brush Tool set the hardness to 0% and size about 400px. Fill the selection in a separate layer with #ffffff color and set the blend mode to Soft Light in the layers panel.

Step 7: Featured Gallery

Create a new folder and name it Featured Gallery. Using Rectangle Tool with a fill color of #ededed create a shape 100% by 200px. Also, create two 1px lines, first line color #ffffff will be placed on the top of our shape and the second line color #c2c2c2 will be on the bottom.

Create a new layer above the shape and name it highlight. Then, make a selection of the shape. Using Brush Tool with a fill color of #ffffff brush in the center of the selection then, set the layer mode to Soft Light.

Now let’s work on our sample post for our featured gallery. First, create a folder named post then put a 100px x 100px sample thumbnail on our canvas. Also, Using Text Tool add a Title and Content.

Create a new layer below the thumbnail and name it shadow, using Pen Tool create a shape as shown in the screenshot below. Then, go to Filter – Blur – Gaussian Blur 1px, and set the Opacity to 50% in the layers panel.


Create a new folder and name it rate. Now, open up the star icon and place it to our canvas and place it as shown in the screenshot below.

Add this Blending Option

  • Drop Shadow: #000000

  • Gradient Overlay: #e7e918, #fffd76

  • Stroke: #eaec25

Make a selection of the star and deselect starting from the middle to bottom and in a separate layer fill it with Linear Gradient #ffffff to Transparent then, set the Opacity to 70% in the layers panel.

This will be the result.

Duplicate the star four times.

Duplicate the post folder two times a position it as shown in the screenshot below.

Step 8: Posts

Fill the Background layer with #ededed. Create a new folder and name it Body Posts, create a sub folder and name it post. Now, create a sample 300px by 200px image thumbnail for our post and place it in our canvas. Using Rectangle Tool create a 300px by 45px shape just fill it with any color. Just refer to the screenshot below.

Add this Blending Option

  • Drop Shadow: #000000

  • Gradient Overlay: #f7f7f7, #ffffff

Duplicate rate folder from our featured gallery and place it in the post folder. Also, using Text Tool create a sample title, just follow the settings in the screenshot below.

For unrated star style just remove the Gradient Overlay and replace it with Inner Shadow.

Duplicate post folder five times and align it as shown in the screenshot below.

Step 9: Pagination

Select Rounded Rectangle Tool and set the radius to 5px then, create a 620px by 45px shape below those posts.

Add this Blending Option

  • Inner Shadow: #000000

Using Text Tool place the number of pages as shown in the screenshot below.

Step 10: Sidebar

Create a #c2c2c2 1px line 40px distance from our post, Mask the line and make the tip faded using Brush Tool with a fill color of #000000. You may have something that looks like the screenshot below.

Duplicate the line and move it to the left and change the color to #ffffff. Create a Horizontal line with the same color place it as shown in the screenshot below.

Next, create a new layer below those lines we have just created and name it shadow. Using Selection, Gradient Tool, and Eraser Tool perform what you have seen in the screenshot below. The set the shadow layer to Multiply, Opacity to 50%.

Duplicate the layer and place it on the top as shown in the screenshot below. It’s up to you to make adjustments, just erase the portion that you don’t like.

Select Rounded Rectangle Tool then set the radius to 10px. Create a shape as shown in the screenshot below. The width of the shape is the remaining width of our canvas and the height will be 40px.

Add this Blending Option

  • Gradient Overlay: #494367, #6b6393, #494367

Using Text Tool add a header title.

Next open up the social icons and place them on our canvas, align them as shown in the screenshot below, and also add their corresponding social icon names using Text Tool.

Create two new folders and name them: Categories and Our Partners. Using Text Tool and Line Tool perform what you can see on the screenshot below.

Step 11: Footer

Create a new folder and name it Footer. Inside footer there are sub folders named: About, Most Love, and Site Links. Using Rectangle Tool with a fill color of #413f6b create a footer that is the right size to you.

Add this Blending Option

  • Inner Shadow: #ffffff

Convert the shape layer to Smart Filters by going to Filter – Convert for Smart Filters, go to filter again and add noise.

We were going to add info text in our about folder. Using Text Tool put in some dummy text and for the formatting of the text just refer to the screenshot below.

Using Text Tool add links on Site Links folder.

Using Text Tool add a Post Title, Love this, and comments. Create also a 50px x 50px thumbnail and place it as shown in the screenshot below.

Final steps are adding copyright and back to top button. Open up the arrow icon and rotate it facing top.

Add this Blending Option

  • Drop Shadow: #000000

  • Gradient Overlay: #dcdcdc, #ffffff


Finally we’re done!

Glad that we finished it all together. I hope you learn something from this tutorial. I would love it if you would post your outcome below. Cheers all :)

June 19 2011

10:00

Quick Tutorial – Creating a Letterpress and Embossed Text Effects in Photoshop

In the past few years the letterpress text effect has become a huge trend in web design. It’s being used in headers, headlines and even interfaces. The love for the letterpress effect has been transferred from printing machines to our computer screens. If done right letterpress can be a splendid and neat accent in your design. Another superb, yet often underrated, text effect is embossing. You may have seen it in some menus though. Text embossing is another effect which digital art has borrowed from traditional design. This tutorial will guide you through creating the letterpress and embossed text effect in Photoshop. The tutorial will be using some basic layer styles together with some more advanced techniques. If you’re a beginner in Photoshop text effects, continue to read to find out how to achieve fantastic looking letterpress and embossed text effects in Photoshop.

Final Image

(click on the image to view full-size version)

Letterpress-13-letterpress-embossed-text-effect-tutorial-photoshop

Embossed-26-letterpress-embossed-text-effect-tutorial-photoshop

Background

Having the perfect background when using a letterpress or embossed text effect is very important. The right background can seriously enhance the overall look and make it more realistic. For letterpress and embossed text we want the background to be lighter than the text itself. So lets begin.

1. Create a new document

Start by creating a new document. Dimensions I used are 700×400 with dpi set to 72 pixels/inch.

Background-1-letterpress-embossed-text-effect-tutorial-photoshop

2. Solid color

Grab the Paint Bucket Tool (G) and fill the layer with #30485a.

Background-2-letterpress-embossed-text-effect-tutorial-photoshop

3. Adding texture

Download this Black Leather Pattern and open it up in Photoshop. There’s no need to download the original size image since we are going to define a pattern from this. I downloaded the 240×240 version. Once you’ve opened the pattern in Photoshop, go to Edit – Define Pattern and click ok.

Background-3-letterpress-embossed-text-effect-tutorial-photoshop

Head back to your document and create a new layer. Go to Edit – Fill – Pattern and choose the pattern you just created.

Background-4-letterpress-embossed-text-effect-tutorial-photoshop

Background-5-letterpress-embossed-text-effect-tutorial-photoshop

Set layer’s Blending Mode to Overlay and Opacity to 55%.

Background-6-letterpress-embossed-text-effect-tutorial-photoshop

Download this Subtle Grunge texture and paste it into your document. Hit Ctrl+T and adjust it so it fits your document.

Background-7-letterpress-embossed-text-effect-tutorial-photoshop

Go to Layer – New Adjustment Layer – Hue/Saturation (Ctrl+U) and drag the Saturation slider to the very left.

Background-8-letterpress-embossed-text-effect-tutorial-photoshop

Then again go to Layer – New Adjustment Layer – Curves (Ctrl+M) and drag the lower part of the curve down a bit.

Background-9-letterpress-embossed-text-effect-tutorial-photoshop

Set layer’s Blending Mode to Soft Light and Opacity to 15%.

Background-10-letterpress-embossed-text-effect-tutorial-photoshop

4. Darkening Corners

Now select the Brush Tool (B) and choose a large soft brush with around 150px size and hardness set to 0%. Hit D on your keyboard to set the foreground color to black and background color to white. Holding Shift brush around the edges.

Background-11-letterpress-embossed-text-effect-tutorial-photoshop

Now increase the brush size and brush the corners carefully to make a nice rounded frame.

Background-12-letterpress-embossed-text-effect-tutorial-photoshop

Got to Filter – Blur – Gaussian Blur and set its radius to around 55 pixels depending on your document size. If necessary adjust your layer’s Opacity. I set my to 75%.

Background-13-letterpress-embossed-text-effect-tutorial-photoshop

And you’re done with the background. To unite the layers click on the top one, hold Shift + Ctrl and click on the bottom layer. Then click Ctrl + G to group them.

Letterpress effect

Select the Type Tool (T) and type in your text. I used a font called Myriad Pro, set to Bold, 95pt size, Spacing -10 pt. After you’ve typed your text do a right click on the layer and click Rasterize Type.

Letterpress-1-letterpress-embossed-text-effect-tutorial-photoshop

There are various ways to create the letterpress effect. I’m going to teach you the easiest and quickest way, in my opinion. Do a right click on your text layer and select Blending Options. Then apply the following Layer Styles.

Letterpress-2-letterpress-embossed-text-effect-tutorial-photoshop

Letterpress-3-letterpress-embossed-text-effect-tutorial-photoshop

Letterpress-4-letterpress-embossed-text-effect-tutorial-photoshop

These are the Styles which worked fine for me. You may want to twiddle with the settings that so that it looks right. Your text layer should look similar to this one.

Letterpress-5-letterpress-embossed-text-effect-tutorial-photoshop

Not looking quite like a letterpress effect, right? But we’re going to fix that. Do a Ctrl + click on your text layer. A selection should appear.

Letterpress-6-letterpress-embossed-text-effect-tutorial-photoshop

Still with the active selection head to your Background group and find the black leather pattern layer.

Letterpress-7-letterpress-embossed-text-effect-tutorial-photoshop

Select it and hit Ctrl + J. A new layer should spring up.

Letterpress-8-letterpress-embossed-text-effect-tutorial-photoshop

Bring that layer’s opacity up to 85%. Then go to Image – Adjustments – Curves (Ctrl+M) and drag the lower part of the curve down a bit.

Letterpress-9-letterpress-embossed-text-effect-tutorial-photoshop

With that done, your letterpress effect now should look much more realistic.

Letterpress-11-letterpress-embossed-text-effect-tutorial-photoshop

For the final step lets add subtle lighting to our image. Grab the Gradient Tool (G), hit D and X on the keyboard to set white as a foreground color and black as a background color. Choose Radial Gradient and draw something like this.

Letterpress-12-letterpress-embossed-text-effect-tutorial-photoshop

Set the layer’s Blending Mode to Soft Light and Opacity to 45%. Congratulations, you’re done with the letterpress effect. Click on the image to view the full-size version.

Letterpress-13-letterpress-embossed-text-effect-tutorial-photoshop

Embossed effect

We’re going to create the embossed text effect on the same background. So delete your letterpress text layer and the one you substracted from black leather pattern and do a Save As. You should have a fresh background with smooth lighting on it.

Embossed-1-letterpress-embossed-text-effect-tutorial-photoshop

Again start by typing your text. I used the same bold Myriad Pro with 95pt size and -10 Spacing. After you’ve typed your text rasterize the layer.

Embossed-2-letterpress-embossed-text-effect-tutorial-photoshop

Now apply the following Layer Styles to your text layer.

Embossed-3-letterpress-embossed-text-effect-tutorial-photoshop

Embossed-4-letterpress-embossed-text-effect-tutorial-photoshop

Embossed-5-letterpress-embossed-text-effect-tutorial-photoshop

Embossed-6-letterpress-embossed-text-effect-tutorial-photoshop

Your text layer should look similar to this one.

Embossed-7-letterpress-embossed-text-effect-tutorial-photoshop

Now just like with the letterpress effect do a Ctrl + click on your text layer, select the black leather pattern and hit Ctrl + J. Name the new embossed2. Bring layer’s Opacity up to 100%. Go to Image – Adjustments – Curves (Ctrl + M) and drag the lower part of the curve down.

Embossed-8-letterpress-embossed-text-effect-tutorial-photoshop

Embossed-9-letterpress-embossed-text-effect-tutorial-photoshop

Now apply these Layer Styles to the embossed2 layer.

Embossed-10-letterpress-embossed-text-effect-tutorial-photoshop

Embossed-11-letterpress-embossed-text-effect-tutorial-photoshop

Embossed-12-letterpress-embossed-text-effect-tutorial-photoshop

Embossed-13-letterpress-embossed-text-effect-tutorial-photoshop

Now do a Ctrl + Click on your original text layer. Then go to Select – Modify – Expand, enter 1 pixel and click ok.

Embossed-14-letterpress-embossed-text-effect-tutorial-photoshop

Embossed-15-letterpress-embossed-text-effect-tutorial-photoshop

When that’s done create a new layer and grab Paint Bucket Tool (G). Set the foreground color to black and fill the new selection. Name the layer stroke.

Embossed-16-letterpress-embossed-text-effect-tutorial-photoshop

Do a Ctrl + click on your original text layer to select it. Then select the stroke layer and hit delete on your keyboard.

Embossed-17-letterpress-embossed-text-effect-tutorial-photoshop

Embossed-18-letterpress-embossed-text-effect-tutorial-photoshop

Select the stroke layer and hit your left arrow key once. Then set the layer’s opacity to 45%. That should give you a neat emphasizing stroke around your text.

Embossed-19-letterpress-embossed-text-effect-tutorial-photoshop

For the final touches select your original text layer again and do a Ctrl + click to load a selection from. Locate your black leather pattern and click Ctrl + J. Name the layer embossed 3 and drag it above the stroke layer.

Embossed-20-letterpress-embossed-text-effect-tutorial-photoshop

Firstly, set the layer to Normal and lower the Opacity to 20%.

Embossed-21-letterpress-embossed-text-effect-tutorial-photoshop

Then go to Image – Adjustments – Curves (Ctrl + M) and drag the lower part of the curve down a bit.

Embossed-22-letterpress-embossed-text-effect-tutorial-photoshop

After that go to Image – Adjustments – Color Balance (Ctrl + B) and in Midtones set the balance to +20 for Blue tones.

Embossed-23-letterpress-embossed-text-effect-tutorial-photoshop

To finish up lets add a bit more lighting to our image. To do that go to Edit – Fill and choose 50% grey. Set layer’s Blending Mode to Overlay. Then grab Burn Tool (O) with large soft brush set to Midtones and Exposure set to around 30%. Then just brush around the center. If you’d switch layer’s Blending Mode to Normal you should see something like this.

Embossed-24-letterpress-embossed-text-effect-tutorial-photoshop

Set layer back to Overlay and go to Filter – Blur – Gaussian Blur and set it’s radius to around 30 pixels.

Embossed-25-letterpress-embossed-text-effect-tutorial-photoshop

And that’s about it with the embossed text effect. Click on the image to view a full-size version.

Embossed-26-letterpress-embossed-text-effect-tutorial-photoshop

I hope you enjoyed this tutorial on creating letterpress and embossed text effects in Photoshop. Of course this is not the only way to create the effect, Photoshop is full of possibilities you just have to experiment. You just have to imagine how would the effect look in real life and then it’s up to you how you achieve it. Feel free to make suggestions and ask questions if something wasn’t clear to you.

Here is the PSD file for you, if you want to compare your outcome with ours!

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...