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

February 06 2014

11:00

Time Lapse Videos: How to Quicken the Pace of Your Movies


  

You can choose between two equally great methods to let videos run faster than in real-time. One is doing it directly from your camera, the other is postprocessing them in a suitable software such as Adobe Premiere. Both methods reduce long hours to a mere few minutes or seconds, even, while needing a speedy eye. Yet, nothing falls through the grid that way…

December 12 2013

13:00

Easy Display Switch with CSS and jQuery

Advertise here with BSA


This tutorial was originally put together by Soh Tanaka during the Spring of 2009. Unfortunately the original demo went offline along with his source codes. I checked out an older archive copy on the WayBack Machine and decided to re-built this tutorial from scratch.

I am going to demonstrate how we can make a simple list-style interface that switches over to thumbnails using jQuery. The user may find this helpful when browsing website articles, e-commerce products, and other similar galleries. The design itself is quite simple to create and there isn’t much required jQuery at all. Check out my live sample demo below.

content list thumbnail display switcher tutorial preview screenshot

Live DemoDownload Source Code

Getting Started

All the functionality we need can be written in plain jQuery without any external plugins. Download a copy of the jQuery library and include this into the document header. I’ve also created my own stylesheet for organizing the lists and the page layout.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Switch Display Options - DesignMag Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designm.ag/favicon.ico">
  <link rel="icon" href="http://designm.ag/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>

The internal body structure contains an outer wrapper div with the ID #w to center everything. But the page itself doesn’t really “begin” until we get to the #content div. This specifically holds the main page content including our list view. All the content is built into an unordered list using the ID #listdisplay. The internal list items have a clearfix to keep the position of floated elements.

  <div id="w">
    <span class="options">Switch Options: 
      <a href="#" id="details-list" class="sorticon active" title="List View"><img src="images/details-list.png" alt="list"></a> 
      <a href="#" id="thumbnails-list" class="sorticon" title="Thumbnail View"><img src="images/thumbnails-list.png" alt="thumbnails"></a>
    </span>
    <!-- icons: http://findicons.com/pack/1689/splashy/ -->
    <div id="content">
      <ul id="listdisplay" class="clearfix">
        <li class="clearfix">
          <span class="listimg"><a href="http://dribbble.com/shots/1314496-80-s-Wrestlers-Hulk-Hogan" target="_blank"><img src="images/01-hulk-hogan.jpg"></a></span>
          <span class="innercontent">
            <h2>Hulk Hogan</h2>
            <p>In non gravida nulla, quis vehicula velit. Praesent ac felis vel tortor auctor tincidunt. In non luctus neque. In congue molestie pretium. Sed vitae cursus risus. Pellentesque feugiat tortor massa, ut aliquet justo fermentum vitae.</p>
          </span>
        </li><!-- row #1 -->

I’ve only copied over the beginning section of the page along with a single list item structure. There are 8 total items and they all include a single thumbnail, a title, and some brief content. The other unordered list includes two anchor links for sorting the content.

The first ID is #details-list which also has an active class attached to the anchor. This means we already have the details view open so the image will appear brighter using more opacity. #thumbnails-list is the alternative which users can switch over and change the view. These images are found in the Splashy pack along with many other fantastic icons.

Page Design with CSS

All the typical page resets can be found in my stylesheet along with an external webfont hosted through Google. The HTML page background uses a repeating image Cartographer from Subtle Patterns.

.options {
  display: block;
  text-align: right;
  font-size: 1.2em;
  line-height: 16px;
  font-weight: bold;
  color: #eee;
  margin-bottom: 8px;
}
.options .sorticon {
  position: relative;
  top: 3px;
}

.options .sorticon img {
  opacity: 0.6;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.options .sorticon img:hover {
  opacity: 1.0;
}
.options .sorticon.active img {
  opacity: 1.0;
}

Each of the image icons uses a CSS3 transition effect. When you hover or click onto a new icon, the opacity won’t change instantly. Instead it smoothly changes over in all CSS3-compliant browsers(which also support the opacity property). Each icon is positioned relative to the container so they can be aligned more evenly.

/* list styles */
#listdisplay { 
  display: block;
}

#listdisplay li {
  display: block;
  width: 100%;
  padding: 12px 8px;
  margin-bottom: 1px;
  border-bottom: 1px solid #aaa;
}
#listdisplay li a img {
  display: block;
  float: left;
  padding: 5px;
  border: 2px solid #bbb;
  background: #fff;
  margin-right: 20px;
}

#listdisplay li .innercontent h2 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 3.0em;
  line-height: 1.35em;
  margin-bottom: 4px;
  color: #73ed95;
  font-weight: bold;
}

#listdisplay.thumbview li {
  display: block;
  width: 360px;
  float: left;
  margin-right: 10px;
  margin-bottom: 7px;
  border: 0;
}
#listdisplay.thumbview li a img {
  display: block;
  float: none;
  margin: 0 auto;
  margin-bottom: 4px;
}
#listdisplay.thumbview li .innercontent {
  display: block;
  text-align: center;
}
#listdisplay.thumbview li .innercontent h2 {
  font-size: 2.2em;
}
#listdisplay.thumbview li .innercontent p {
  display: none;
}

Getting into the list properties you will notice there isn’t much to be confused about. #listdisplay is always being used to contain the list, regardless of the view style. Without any extra classes we see the typical detail view. Using jQuery I can setup a new class .thumbview which will then reformat the items to show the thumbnail + image centered, no descriptive text.

You should feel free to mess around with the formatting and design grid to suit your own layout. Once we append the thumbnail view each list item becomes fixed at a width of 360px. Coupled with the margins & padding it leaves room for 2 items per line. Depending on your thumbnail size this value might change or adapt better for your audience.

Transitioning jQuery Effects

Finally at the bottom of the document before any closing </body> tag we need to setup a block of JavaScript. Keep in mind this could be written into an external file and then included into the page header. It’s all about preference and how you need to setup your website.

$(function(){
  $('.options a').on('click', function(e){
    e.preventDefault();
    
    if($(this).hasClass('active')) {
      // do nothing if the clicked link is already active
      return;
    }
    
    $('.options a').removeClass('active');
    $(this).addClass('active');
    
    var clickid = $(this).attr('id');
    

    $('#listdisplay').fadeOut(240, function(){
      if(clickid == 'thumbnails-list') {
        $(this).addClass('thumbview');
      } else {
        $(this).removeClass('thumbview');
      }

      $('#listdisplay').fadeIn(200);  
    });
  });
});

This script requires a single event handler checking against each of the anchor links within the options list. First we call e.preventDefault() to stop the default click action, followed by a class check. If the icon link currently has a class of .active then we don’t want to do anything. Otherwise the script needs to switch between display views – first by removing the .active class from both links and then adding it onto the newly-clicked link.

Next I’m grabbing the current link ID so we know which content view should be displayed. I am hiding the entire list using fadeOut() and we run some logic within a callback method. If the ID is #thumbnails-list then we need to append that CSS class onto the UL element. Otherwise we need to remove that class.

Finally once the logic has completed we can re-display the list view onto the page using fadeIn(). There are probably ways to do this using other jQuery animated effects. But when just getting started this method simply works – it’s easy to follow, and it’s easy to customize.

content list thumbnail display switcher tutorial preview screenshot

Live DemoDownload Source Code

Closing

I do hope this more updated tutorial can provide a template for building your own transitional layouts. jQuery is a powerful tool with tons of options for manipulating a website’s frontend design. Please feel free to download a copy of my tutorial codes and see what else you can build following this UI format.


Advertise here with BSA

November 24 2013

14:00

10 Easy-to-Follow PSD to HTML/CSS Tutorials

Converting PSD to HTML/CSS might intimidate you at first, since it’s a brand new world, especially for long-time Photoshop users. A basic knowledge of HTML and CSS won’t hurt, but if you’re just starting to learn, then you might find the following tutorial a bit dizzying. And believe me when I say to you, finding a good teacher who will teach you for free (or for a small amount) is just another difficulty waiting next door.

These are ten easy to follow PSD (Photoshop file) to HTML (Hypertext Markup Language) and CSS (Cascading Style Sheet) tutorials. Learn the principles from these tutorials rather than the finished output themselves and I swear, you’ll learn web design in no time!

Here are they:

PSD to HTML Tutorial: Code a Photoshop File to a Working Website

psd-to-html-and-css-07

View Demo

How to Code a Stylish Portfolio Design in HTML/CSS

psd-to-html-and-css-06

View Demo

Designing a Highly-Professional Website, From the Sketch to the Code

psd-to-html-conversion-

Code an Awesome Minimal Design from PSD to XHTML & CSS

psd-to-html-and-css-04

Sleek Coming Soon Page Design

psd-to-html-and-css-03

View Demo

PSD/HTML Conversion: Code a Clean Business Website Design

psd-to-html-and-css-02

View Demo

Convert a Warm, Cheerful Web Design to HTML and CSS

psd-to-html-and-css-08

Converting a clean magazine-style PSD template to HTML/CSS

psd-to-html-and-css-09

View Demo

Simple & Cloudy Portfolio Layout

psd-to-html-and-css-10

View Demo

Convert Your Product Landing Page From PSD to HTML [Very Detailed]

psd-to-html-and-css-11

View Demo

Learning how to design a web page could be fun. It could also start as a hobby (to kill spare time) and eventually turn into a cool knowledge and in the end, a source of extra income. But it’s not that easy, it never is. You need to have persistence, a non-stop flare to know and learn, to tinker and make mistakes. For in the end, web design isn’t learned overnight. It requires sweat and a great amount of patience.

Good luck!

October 08 2013

06:30

Best of GIMP: 40 Professional Tutorials to Level Up your Skills


  

The Gimp is where you go, if you don’t go for Photoshop. There is no other free alternative with such a grand feature-set. There is only little that can’t be done using Gimp. The large community behind the project works on getting this little even smaller. Did you know that there are really great tutorials out there, not only to help you get started? In fact, the tutorial scene behind Gimp does not need to hide in any way. We’ve curated the best of the best tutorials in the following article..

September 25 2013

13:46

Building Vertical-Tabbed Content Sections with jQuery

Advertise here with BSA


Ajax-style loading boxes are useful when displaying large sets of related data. Think about something like an FAQ page, knowledgebase, or support system. Any type of navigation is often suitable as long as the user can determine how to navigate between content areas.

In this tutorial I want to demonstrate how we can build a custom vertical content section using jQuery. All of the internal content is held inside div containers which can be navigated with an icon-based menu. This content isn’t loaded externally via Ajax, but is instead hidden & displayed using content sections already on the page. Check out my live sample demo to get an idea of what we are building.

jquery vertical content tabs sections tutorial preview screenshot

Live DemoDownload Source Code

Getting Started

There are only two required files we need for this dynamic content section to work. The first is jQuery which you can download in a compressed local format. The other is Font Awesome which is a free open source CSS3 icon webfont. This means we can include certain fonts using @import and render icon graphics as font elements in the page.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>jQuery Vertical Tabbed Content Sections</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designm.ag/favicon.ico">
  <link rel="icon" href="http://designm.ag/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/font-awesome.min.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>

This is what my document header looks like. I have included these two required items along with my core styles.css stylesheet. Also be sure that when you include the Font Awesome CSS file that you also copy over the entire /font/ directory. This includes all the important file types such as TTF and OTF, which are necessary to recognize any of the icon characters.

Creating Inner Body Content

The two main sections of the page are held within a single inner wrapping div. Obviously the navigation is much smaller than the content, so I have the navbar floating left without a connecting background. #sidemenu is actually an unordered list of items which display as block elements inside a fixed-width container.

<ul id="sidemenu">
  <li>
    <a href="#home-content" class="open"><i class="icon-home icon-large"></i><strong>Home</strong></a>
  </li>

  <li>
    <a href="#about-content"><i class="icon-info-sign icon-large"></i><strong>About</strong></a>
  </li>
  
  <li>
    <a href="#ideas-content"><i class="icon-lightbulb icon-large"></i><strong>Ideas</strong></a>
  </li>
  
  <li>
    <a href="#contact-content"><i class="icon-envelope icon-large"></i><strong>Contact</strong></a>
  </li>
</ul>

Now the other page element uses the ID #content which links to a number of internal div elements. These are labeled according to the navigation anchor links with the various IDs of home, about, ideas, and contact.

<div id="content">
    <div id="home-content" class="contentblock">
      <h1>The Main Page!</h1>
      <p>I swear this has some really great stuff. Content is courtesy of <a href="http://bluthipsum.com/">Bluth Ipsum</a>.</p>
      
      <p>Smack of ham. What is she doing at a beauty pageant? Is she running the lights or something? She's always got to wedge herself in the middle of us so that she can control everything. Yeah. Mom's awesome.</p>
      
      <p>Probably out there without a flipper, swimming around in a circle, freaking out his whole family.</p>
      
      <p>Fun and failure both start out the same way.</p>
    </div><!-- @end #home-content -->
    
    
    <div id="about-content" class="contentblock hidden">
      ...
    </div><!-- @end #about-content -->
    
    <div id="ideas-content" class="contentblock hidden">
      ...
    </div><!-- @end #ideas-content -->
    
    <div id="contact-content" class="contentblock hidden">
      ...
    </div><!-- @end #contact-content -->
</div><!-- @end #content -->

Notice that each of the inner div elements uses .contentblock as an additional class for styling. Yet #home-content is the only one without the extra .hidden class because this homepage content should immediately display once everything finishes loading. We can use jQuery to un-hide the other page areas and re-hide the homepage content section when switching in the navigation.

CSS Design Styles

With the Font Awesome CSS already included we can use this font family anytime. I’ve also linked to another font family named Cantora One which is hosted by Google Web Fonts. Other than this my stylesheet uses a few basic resets along with a core container for each inner div section.

@import url('http://fonts.googleapis.com/css?family=Cantora+One');

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { overflow-y: scroll; }
body { 
  font-size: 62.5%; 
  line-height: 1;
  padding: 45px 20px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: #fff url('../images/bg.png'); /* http://subtlepatterns.com/connected/ */
}

br { display: block; line-height: 1.6em; } 
img { border: 0; max-width: 100%; }

h1 {
  font-family: 'Cantora One', Arial, sans-serif;
  font-size: 3.0em;
  line-height: 1.6em;
  margin-bottom: 10px;
  color: #787878;
}

p {
  font-size: 1.4em;
  line-height: 1.25em;
  color: #575757;
  font-weight: normal;
  margin-bottom: 10px;
}

a { color: #8dadd8; }
a:hover { color: #7299cf; }

/* main page */
#w {
  display: block;
  width: 900px;
  margin: 0 auto;
  background: none;
}


#content {
  display: block;
  background: #fff;
  padding: 0px 15px;
  margin-left: 80px;
  -webkit-box-shadow: 1px 2px 1px rgba(0,0,0,0.4);
  -moz-box-shadow: 1px 2px 1px rgba(0,0,0,0.4);
  box-shadow: 1px 2px 1px rgba(0,0,0,0.4);
  min-height: 300px;
}


.contentblock {
  display: block;
  padding: 15px 20px;
}

.contentblock.hidden {
  display: none;
}

You will notice that I’ve only included a white background on the main #content div which keeps the navigation off to the side as a separate element. There are so many different ways you could design this interface, but I like seeing the background on the active link turn white and appear to blend into the page itself. Also I have .contentblock.hidden set to no display which we can manipulate directly in jQuery.

/* side navigation */
#sidemenu {
  margin: 0;
  padding: 0;
  width: 80px;
  float: left;
  background: #e8e8e8;
  border-right: 1px solid #c9c9c9;
}


#sidemenu li { display: block; text-align: center; border-top: 1px solid #fff; font-size: 1.1em; }

#sidemenu li a { 
  display: block;
  padding: 6px 2px;
  color: #555;
  text-decoration: none;
  border-bottom: 1px solid #d1d1d1;

}
#sidemenu li a:hover {
  background: #f2f2f2;
}

#sidemenu li a strong { 
  display: block;
  margin-top: 5px;
}

#sidemenu li a.open {
  width: 101%;
  background: #fff;
}

The outer navigation container is fixed to a width of 80px and floated off to the left side. We can use margins and padding on the other content box to keep these two from overlapping. The #sidemenu element uses a border on the right to encapsulate all the links.

Any anchor link with the additional .open class will be set to 101% width. This means it will be wider than the border and appear to be naturally connected into the page content. Everything else about the nav CSS is related to styling the icons and the text which are held in two separate HTML elements.

jQuery Animations

Finally we get to the bottom of the index.html file which includes a small block of jQuery. The main event handler is triggered whenever a user clicks on the navigation link items. First we want to disable the click event using e.preventDefault(). Since the content is loading dynamically, we don’t want to append the page ID onto the URL unless JavaScript were disabled.

$(function(){
  $('#sidemenu a').on('click', function(e){
    e.preventDefault();

    if($(this).hasClass('open')) {
      // do nothing because the link is already open
    } else {
      var oldcontent = $('#sidemenu a.open').attr('href');
      var newcontent = $(this).attr('href');
      
      $(oldcontent).fadeOut('fast', function(){
        $(newcontent).fadeIn().removeClass('hidden');
        $(oldcontent).addClass('hidden');
      });
      
     
      $('#sidemenu a').removeClass('open');
      $(this).addClass('open');
    }
  });
});

Jumping into the actual logic, we first check if the currently clicked item has a class of .open. If so then the link is already visible so we do nothing. Otherwise we create two new variables named oldcontent and newcontent. Using jQuery .fadeOut() on the old content we can then use a callback function to add the .hidden class while simultaneously showing the new content with .fadeIn().

The final two lines of code adjust the menu item once all the inner content has finished animating. We remove all .open classes from the menu links and then apply it onto the newly selected link item. This all happens within 1-2 seconds of time so it appears very sequential. We could always use a jQuery delay if there was some need to halt the animations. But this generic interface is quite easy to setup and shouldn’t require a whole lot of convoluted scripting.

Final Thoughts

I hope this tutorial may be useful to some web designers or developers who need a similar widget. The codes are easy to transfer into your own script or even into a plugin if needed. Of course, plugin functionality might be more convoluted than we need – but this type of dynamic webpage effect is perfect for section-based content with divisions in the material. Feel free to download a copy of my source codes and see if you can implement this design in your own future projects.


Advertise here with BSA

September 23 2013

06:30

How To Create Flat Style Breadcrumb Links with CSS

With all the progressions of CSS and CSS3 over recent years we’ve reached a point where many of the old coding techniques that involved background images can now be created entirely with CSS. In this tutorial we’ll look at creating a series of breadcrumb navigation links in a flat design style without the need for the previously popular “sliding doors background image” method.

CSS breadcrumb links

The breadcrumb links we’ll be creating are styled with chevron shapes to support the idea of drilled down content. Previously a background PNG image would be used to create this chevron shape, but with the help of clever border techniques the same effect can be created purely with CSS.

View the CSS breadcrumb links demo

<div id="crumbs">
	<ul>
		<li><a href="#">Breadcrumb</a></li>
	</ul>
</div>

We’ll begin by quickly fleshing out the breadcrumb navigation links as an unordered list. Each breadcrumb link will appear as an <li> with a nested anchor element.

#crumbs ul li a {
	display: block;
	float: left;
	height: 50px;
	background: #3498db;
	text-align: center;
	padding: 30px 40px 0 40px;
	position: relative;
	margin: 0 10px 0 0; 
	
	font-size: 20px;
	text-decoration: none;
	color: #fff;
}

The initial CSS code styles up each list item anchor as a neat blue rectangle. The text is positioned centrally within the space and equal padding is added to either side. In order to position elements absolutely later, position: relative; is added so those absolutely positioned objects will display relative to this parent element.

#crumbs ul li a:after {
	content: "";  
	border-top: 40px solid red;
	border-bottom: 40px solid red;
	border-left: 40px solid blue;
	position: absolute; right: -40px; top: 0;
}

We’ll now recreate the chevron effect in CSS that would previously only be achievable with a background image. Use the :after selector to create an extra element that can be styled up individually. The triangle shape is generated through the use of various CSS borders, so as you can see in the initial demo a single blue triangle can be created by applying top and bottom borders to intersect the overlap. These are currently coloured red for demonstration, but making these transparent will produce a single blue triangle. This border effect is then moved into place through absolute positioning.

border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #3498db;

The border effect with the correct colour values will produce the desired triangle which gives the breadcrumb link the popular chevron shape.

#crumbs ul li a:before {
	content: "";  
	border-top: 40px solid transparent;
	border-bottom: 40px solid transparent;
	border-left: 40px solid #d4f2ff;
	position: absolute; left: 0; top: 0;
}

Using the same principle another triangle shape can be applied to the left of the breadcrumb link. This time the border colour is set the same as the page background to disguise parts of the blue link background colour.

padding: 30px 40px 0 80px;

This additional triangle before the link affects the appearance of the text, but a simple padding adjustment will quickly rectify its appearance.

<div id="crumbs">
	<ul>
		<li><a href="#1">One</a></li>
		<li><a href="#2">Two</a></li>
		<li><a href="#3">Three</a></li>
		<li><a href="#4">Four</a></li>
		<li><a href="#5">Five</a></li>
	</ul>
</div>

As more links are added to the HTML the series of breadcrumbs increases, each separated by the cool chevron shape thanks to the CSS border triangle effect and a touch of right margin.

#crumbs ul li:first-child a {
	border-top-left-radius: 10px; border-bottom-left-radius: 10px;
}
#crumbs ul li:first-child a:before {
	display: none; 
}

#crumbs ul li:last-child a {
	padding-right: 80px;
	border-top-right-radius: 10px; border-bottom-right-radius: 10px;
}
#crumbs ul li:last-child a:after {
	display: none; 
}

The full breadcrumb navigation list can be further styled by removing the triangle effect on the first and last items with the help of the :first-child and :last-child selectors, then given subtle rounded corners with border-radius.

CSS breadcrumb links

#crumbs ul li a:hover {
	background: #fa5ba5;
}
	#crumbs ul li a:hover:after {
		border-left-color: #fa5ba5;
	}

All that’s left is to apply a hover effect to the links. Don’t forget to change the border-left-color on the hover state of the triangle effect so the whole breadcrumb link changes colour.

View the CSS breadcrumb links demo

August 05 2013

17:23

Watercolor Photoshop Tutorials

I love all of the creative things that people can do with watercolor, but without the mess. I recently found some fun and easy Photoshop tutorials you can do without creating mess that can help you make incredible watercolor art pieces.

Watercolor Wallpaper Photoshop Tutorial

All you need to complete this Photoshop is a photo or image of a person, and then a set of Photoshop brushes like those featured below. You can also use a fun and bold font if you want to add a quote or saying to your poster.

Create a Grungy Photoshop Tutorial

This tutorial is pretty versatile and easy to construct. You can add whatever elements you want to the piece, and customize it entirely to your preference. To complete this tutorial you'll need a variety of different images that you can blend and mold together. Here are some things that you can use:

 

Watercolor Painting Photoshop Tutorial

You can create this fun watercolor effect in Photoshop in no time at all, just select a picture and the brushes and images below and follow the steps.

Tags: Tutorial
06:30

How To Create a Set of Vector Weather Line Icons

Stroked line icons really complement a flat interface style with their minimal and basic appearance. Let’s take a look at building a set of stylised vector icons of our own. We’ll base them on the weather to allow us to create a set of consistently styled icons that would be a perfect match for a weather app. Follow this step by step Illustrator tutorial to see how the most simple of tools can be used to create a set of trendy glyphs.

Creating a cloud icon

Let’s begin with a basic cloud. Open up Adobe Illustrator and draw three circles on the artboard. Overlap each one but pay attention to its outline along the top edge.

Drag a selection around all three objects and use the Align palette to make sure they all sit along the same baseline.

Draw a rectangle to fill in the gaps on the lower edge. Turn on Smart Guides (CMD+U) to help align the rectangle to the circles then hit the Unite option from the Pathfinder tool to merge everything together.

Clear out the fill colour and increase the stroke weight to around 5pt. Turn on the round cap and round corner options to create a smooth outline.

Creating a sun icon

Elsewhere on the artboard draw a circle using the same stroke configuration options, then add a short line above it.

Copy (CMD+C) and Paste in Place (CMD+Shift+V) a duplicate then move it vertically to sit underneath the circle. Copy/Paste the two lines then rotate the duplicate by 90° (hold Shift to constrain the angle).

Paste in two more duplicates and rotate these shapes by 45° to form a set of evenly spaced ray lines. Group all these individual lines together.

Select both the group of lines and the inner circle and align the objects along the horizontal and vertical axis to centre them up.

Combining the icons

One advantage of working with basic style icons is elements can be reused to aid consistency between the icons. A “sunny spells” icon can be created by combining the cloud with the sun. Rotate the sun slightly to balance the gaps between the ray lines.

Use the Scissors tool to clip the path of the sun’s circle, leaving a small gap between each element. Select and delete the unwanted portion.

Ungroup the set of sun ray lines then delete any unwanted copies.

The combination of the two separate icons creates consistency between the icons.

The same principle can be used to create other icons based on existing elements, such as a “heavy cloud” icon.

A moon icon is often used to represent “clear skies” at night. Use duplicates of the sun circle to create a crescent moon shape with the help of the Minus Front Pathfinder option.

Variations of the weather icons using the moon create nighttime alternatives for the cloudy icons. The rounded edges and the even spacing continues the consistent style of the set.

Draw one short and one long line at 45° underneath a copy of a cloud to represent “heavy rain”. Select and drag out a duplicate of these lines while holding the ALT key, then repeated press CMD+D to repeat the transformation.

A “light rain” variation of this icon can be created by deleting some of the rain symbol lines.

Create a small stylised snowflake by crossing two short lines. Duplicate the flake symbols into a 45° pattern, then select and rotate each flake randomly to reduce the uniform appearance.

“Light Snow”, “Thunder Storms” and “Sleet” variations can also be created by altering and combining existing icons.

The final icon pack

Vector weather line icons

The final icon pack contains a set of consistently styled icons to represent various common weather conditions (plus a special one for “British Summer”). Download the source file to get to grips with how they’re put together in Illustrator or to use the icons in your own projects.

Download the vector weather line icon pack

July 20 2013

13:00

Create Your Own Landing Page: The Ultimate Guide For Beginners

If you already know what is a Landing Page and what it is for, I will call you a “Smarty Pants”, but please give me just 58 seconds to explain it to those who don’t really know what it is.

So a Lead Capture Page, Lander or as most of us know it, a Landing Page, usually serves one, single, yet very important purpose. It is designed to be one large Call to Action.

Usually it’s a single web page and contains very focused and deliberate sales copy with Call to Actions throughout.

Brilliant! I managed to explain it in less than 58 seconds.

Now that you know what a Landing Page is, I’m going to show you how to create, and launch, your own.

What’s more exciting is that you do not need to be a coding guru or an über cool designer.

It’s just that simple – You and this ultimate guide.

Before I start let me show you a quick example of our own 1WD Bootcamp Landing Page.

1wd landing page

There are three things here:

  1. It answers what is the landing page all about: a product named “Freelance Web Designer Treasure Map”.
  2. A catchy graphics that captures the essence of the product.
  3. And a call-to-action button “Click to Join Now!”

If you have an ebook, video course, software, or just about anything that you want people to know of, then you’ll definitely need a landing page.

This Is Where Your Landing Page Will Live – Hosting

Choosing the right type of hosting can make a massive difference to whether your landing page will look like the way you want it to or not.

Why?

Because there are a lot of hosting companies that promise more than they can deliver.

Put simply – Would you still smile if your landing page were offline when your potential customer tried to visit it and who knows, was ready to spend some money on you, your products or your services?

I wouldn’t, and I my guess is neither would you.

“Just like flowers need the right environment to grow, WordPress works best when it’s in a rich hosting environment.” -WordPress.org

So I think it’s safe to say you trust us, otherwise you wouldn’t still be reading would you?
So this is the hosting we have always recommended and still recommend now.

20% Discount when you register on Bluehost via 1stwebdesigner!

How Your Landing Page will Look – Theme

Even though we all have heard the controversial saying “Content is King”, it’s not the content alone that makes a good impression on potential customers.

Content needs good design, just like you need to breathe, but good design does not always have to be colorful, fancy or flashy.

Often, it’s the minimalistic looking design that is much more effective. A minimalistic design will nearly always put more emphasis on content, which in this case is your sales copy.

It really depends on your situation, you have to think about your audience, your potential customer, your message, your brand and the impression you want to leave.

WordPress once again proves itself, because you don’t have to code theme or entire design from scratch. There is no need to reinvent the wheel.

All you have to do is pick one of 10,000 themes WordPress has and then just customize it or build upon it.

“What separates design from art is that design is meant to be… functional.”
― Cameron Moll

And I’m here to help you out once again.
I have a handful of themes for you to choose from.

But just to let you know – I spent a good amount of time going through a lot of them and I hand picked 4 of them for you. So you can be sure of their quality – I pinky swear!

Apley – a Mobile Application Landing Page

Apley is the perfect way to show off your amazing application for any mobile device. Thanks to it’s straightforward and easy to use controls, you’ll be able to modify it within minutes after you purchase it.

Appify

WordPress Customizer

Change anything you’d like from within the WordPress built-in customizer.

Custom Homepage Items

Align your featured media (video, image, google map or flexslider) to the left, right or full width. Choose a background color or image and add a scroll effect to it.Change the text and header color.

Ready for Anything

You can use Apley to showcase almost anything from a mobile app to icon sets. You can also use the shortcodes plugin to create special homepage items within minutes.

Apley Features

  • Fully working blog
  • Responsive
  • Custom homepage items
  • Display or hide a download button
  • Display or hide a subscribe form (powered by mailchimp)
  • Display or hide a down button
  • Align featured media to the left, right or centered
  • Add background color or image
  • Asign a scrolling effect to background items
  • Change accent colors ( the blue accent color on the demo)
  • Upload a favicon
  • Upload a logo image
  • Show social icons in the footer
  • Appley From Different Angles

Different Angles Of Apley

Apley2

Apley3

Apley4

Apley5

Apley6

Apley7

Apley8

Apley9

Apley10

Get This Theme Now!

Appify – iPhone/Android App Landing Page Theme

Appify is an extremely versatile WordPress theme that is great for landing pages, spotlighting your latest product or anything else you can think of.

It was built with customization in mind and offers the ability to transform the theme without ever touching the code.

Appify

Customizable

Easily adjust the background images, colors, logo, and more through WordPress’ native Theme Customizer. This fine grain control means there are virtually endless uses for the theme.

In addition to the great built in features, Appify also includes support for “Features by WooThemes” and “Testimonials by WooThemes”. Quickly and easily add feature overviews and testimonials with style.

Keeping up with the latest trends, Appify is also fully responsive. This means when you view Appify on a desktop computer, tablet, or mobile device, it will always look amazing.

Appify Features

  • Responsive Design: Tablet and Mobile Optimized
  • Unlimited Colors Options
  • Plugin Support: Testimonials, Features, Easy Digital Downloads, Contact Form 7
  • XML Dummy Content Included For Easy Setup
  • Full Localisation Support (contains .po/.mo files)
  • Full Design Customization i.e. Logo, Background, Text Colors See Here
  • WordPress 3.5+ Ready (Menus & Featured Images)
  • Built on the _s-ThemeFramework
  • Extensive Documentation

Appify From Different Angles

Appify2

Appify3

Appify4

Appify5

Appify6

Appify7
Get This Theme Now! 

The last 2 themes are free ones. Yes, exactly – they’re free, but before you jump up and down from excitement, I shall warn you that very often free themes are nowhere near as well designed or as functional as the ones you pay for.

And if you think, most of the paid themes are under $40 it really is hell of an investment.

Placeholder – a Landing Page with a Countdown Counter

This theme features a countdown timer to let your visitors know when your website will be live, social buttons and a simple e-mail opt-in form to allow users to follow your progress.

You can customize basic typography within the theme and there is full support for Google Fonts in the font selector.

PlaceHolder

Alternative Styles

The theme includes 5 alternative color styles which you can preview in the demo, and also has styling options for background color and image in the options panel.

Get This Theme Now! 

Coming Soon WordPress theme

Coming Soon is a WordPress theme that can be used in a lot of different ways. In the design settings, they have provided options to choose colors for every aspect of the theme.

ComingSoon

Easily Customizable

You may change fonts, background color or image, content color, product image and so on. So, your imagination is the limit. Be creative and create a unique design for yourself.

The color picker will help you choose colors without having to know exact color codes. Check some of the quick customization we did with this theme.

Features

Use as a Coming Soon page for your website / application / software
Showcase your product with featured image and description on the right. Lots of iPhone App websites are built this way. You can use this theme to create a website just like that.

Showcase your digital product by creating a very quick website by previewing screenshots.
Use this theme as a list builder by enabling Feedburner Subscription Form from the design settings. Any other way you want.

Get This Theme Now! 

In Case You Are Not Familiar Yet – Installing Themes

Installing a WordPress theme is easy, all you need to do is login to your dashboard and hover your cursor on “Appearance” and a window will slide out, click on “Themes”.

After clicking on “Themes” a new page will appear. By default you will see two themes for the fresh installation. In order to install a new WordPress theme, you need to click on “Install Themes”.

Now you have two options:

  1. Install via upload
  2. Install via search

To install by uploading, of course you will need to download the WordPress theme files. After doing so, simply click on Upload.

Next steps will be pretty straightforward:

  • after clicking upload, a new page will appear
  • click on “choose file” and select your WordPress .zip file
  • click “install now”
  • followed by “Activate”

Your new WordPress theme is now ready!

Get Your Landing Page Functional – Plugins

Landing pages are more different and than your usual everyday blogs, news or corporate websites.

Therefore, most of the times they do not even need separate plugins to be fully functional.

The most common purpose of a landing page is to collect the emails of potential clients.
You want your visitors to give you their email address to get updates about new products you’re launching, upcoming events or for your email marketing strategy.

And the 2 most popular online email marketing solutions are Aweber[aff] and MailChimp[aff]
Here are 2 ways to integrate them in your Landing Page.

  1. MailChimp Integration
  2. Aweber Integration

Great Landing Page Examples

KissMetrics

KissMetrics is a SaaS and Ecommerce Customer Intelligence and it teaches you who your most valuable customers are and how to get more of them.

KissMetrics

Barack Obama

Do you really need any sort of explanation about this website? I think not!

BarackObama

Shopify

You can use Shopify to create an online store.

Shopify

ShimpentApp

ShipmentApp helps you keep your files right where they belong and helps you turn Dropbox files into beautiful projects anyone can participate in.

ShipmentApp

Building the Best Landing Page

More of the infographic at Formstack.

Basically, it all boils down to the following:

1. Best Headline You Can Think Of

Think of it like writing a tweet, only shorter and without the hashtags. Your goal is to make people want to read more, make people understand the gist of things in just a sentence – or phrase. Write several headlines and ask people you know about what they think of them, ask both related and disinterested parties to have a broader view of how your headline sounds and looks like.

More than half of the time this will determine whether a visitor will stay for more information or simply just leave!

2. Secondary Headline to Emphasize a Point

This one is optional, but when used well with a great headline you can go to the stars! Think of it as a supporting message, something that adds value to your main headline. They should work in unison, or you can write a totally different thing, provided that it will still pique the interest of the audience.

It can be a preview of what visitors can expect, a quote, or even a call-to-action.

3. A Brief but Concise Description

This section should answer:

What is this page all about?
Why should I bother reading?
Why should I believe you?
What will I gain if I sign-up?
You don’t want to bore your audience, remember that everyone’s busy! Keep in mind that you need to make your point in under 7 seconds. If you can keep their attention for more than 7 seconds, then you know that you’re headed the right path.

4. One Clear Call-to-Action

You will need to muster all the copywriting skills you have here. Make people click, signup, and feel that irresistible power you’re giving off, that if they act upon what you are offering they will make their lives significantly better!

5. Testimonials and Additional Information

If you are selling a product, promoting an event, or spreading awareness, most likely you already have people who are in the know of what it’s all about. Ask them for their feedback and put their feedback/testimonial on your landing page. Take Amazon as an example. People tend to buy more from sellers with great feedback, from items with great reviews. How should it be different from the one you are promoting?

July 19 2013

06:30

Tablet Web Design Best Practices: Free Ebook Offers Loads of Useful Tips


  

Who would dare to not call the guys and girls of Canadian Mobify experts in mobile web design? They actually are. Though not everyone will find their cloud-based design concepts appealing. A short while ago the people at Mobify decided to publish an ebook on the best practices in tablet-focused web design. They titled the 25-pager "Tablet Web Design Best Practices: 30 Ways to Create Amazing Web Experiences on Tablets". Even more amazing, they give it away for free…

July 10 2013

10:00

Homepage Construction Kit: 40 Ready-made Elements for Web Design with Photoshop (+ how to create your own)


  


  

It is quite common to prototype web designs in Adobe Photoshop. Although the final product will consist of large amounts of CSS driven looks, it usually turns out to be faster to use an image-editor for the first drafts. Photoshop still is designer’s first choice in many cases. Using very few basic shapes and forms you are able to creative high-grade user logins, buttons, sliders, video-players or even whole web sites.

May 06 2013

07:00

How To Create an iOS App Icon for Your Website

Did you know you can give your website its very own app icon for iPhones and iPads? It only takes a few seconds and it makes your site look really smart when it’s saved on a user’s home screen, or when viewed in popular apps such as Reeder.

Why create an app icon?

Specifying an app icon is one of those little finishing touches that isn’t really noticeable but makes all the difference if you take it away. Without an app icon if you bookmark a site on your iPhone or iPad you’re left with an ugly screenshot of the page crammed into the little rounded square, but with one line of code you can choose your own icon design, such as a logo. It’s much like a favicon, but on a larger scale.

Having someone bookmark your site onto their device home screen is probably a rare occurrence, but as I discovered today there’s another major benefit of creating an app icon. Roberto Alanís tweeted me recently asking how I achieved such a nice icon in Reeder app. My first response was “I don’t know!”, but then I realised it was my apple touch icon that was being used.

How to create an Apple touch icon

The specified dimensions of a touch icon directly from Apple is 114x114px, this will compensate for Retina displays and produce a nice crisp home screen icon. However, as you can see from the Reeder screenshot, other sites using 114px touch icons don’t fill all the available space. Reeder is one of the most popular RSS apps, plus the touch icon may be used elsewhere too, so it’s worth creating your icon at much larger dimensions.

I chose the dimensions of 512x512px, which is probably a little overkill, but apparently 241x241px would suffice.

Next you need to decide whether you want Apple to add their glossy highlight effects to your icon. If you do, name it apple-touch-icon.png, if you don’t, name it apple-touch-icon-precomposed.png.

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png" />

You don’t actually need to write any code to get your touch icon working, just pop it in the root directory of your website and it will automatically be used by Apple devices. It might be worth linking it in your <head> though just as a reminder that it’s there. If you ever redesign you might end up forgetting to update it. Once again, make your choice of glossy or precomposed.

May 03 2013

13:00

Create a Coca-Cola Can Using Adobe Photoshop

In this tutorial, I will teach you how to create a Coca-Cola can from scratch in Photoshop using shapes, brushes and layer styles. You are going to learn different techniques which you can apply to solve different problems in iconography, UI or web layouts. Photoshop is one of the most powerful programs out there and once you start learning your way around it, you’ll realize that what you can do with it is only limited by your imagination.
The best way to improve your skills is through discovery and experimentation. Don’t wait for a tutorial or article, grab an image and start trying to mimic its shapes, weight, light and shadows.

If you have any questions, use the comment section and I’ll get back to you. Let’s get started!

Final Result

Final result

Step 1

Open Photoshop and set up a new document with size of at least 800px by 800px.

step1

Step 2

Create one vertical guide and one horizontal guide and align them to the middle of your document. To do this, go to View > New Guide , choose horizontal and apply a position of 50%. Do the same for the vertical guide.

step2

Step 3

The first thing is to make the shape of our can. You can use your own imagination here, however, in this case, I’ve used an image for reference (although I didn’t follow the real form completely).

step3

Step 4

In order to keep the shape of the can equal in both sides, we will draw half of the can and duplicate it. Activate the Pen tool (P), and start drawing just half of the red shape.

step4

Step 5

With the red shape layer selected, press alt+shift on your shape and drag it to the side. Then, press ctrl+T, right click on the shape, select Fip Horizontal and press enter. You can also do this by going to Edit > Transform Path and select Flip Horizontal.

step5

Step 6

Place your second half right next to the first half, select both shape layers and, with the Pen tool activated, right click on one of the shapes and select Unite Shapes. You now have one single shape.

step6

Step 7

Choose a different color and repeat the steps for the top and bottom sections of the can. Make sure the Top and Bottom shape layers are on top of the red shape layer.

step7

Step 8

Duplicate the red shape layer, position your cursor between the two red shape layers, hold down the Alt / Option key and click to create a clipping mask. Name the layers according to the image below.

step8

Step 9

Welcome to the fun part! We now have a shape for our can so we are going to start giving it a realistic look. Select the Main Shape layer, open the Blending options panel (right click on the Layer > Blending options) and apply a Gradient Overlay with the following settings:

step9

Step 10

With the Pen tool (P), create a new black shape and place it like in the image below.

step10

Step 11

Right click on the new shape layer, convert it to smart object and then go to Filter > Blur > Gaussian Blur and enter a value of 14. Finally, make the new shape layer a Clipping Mask like you did in step 8 and change Fill of the new black shape to 70%.

step11

Step 12

Using the Pen tool, create a new shape like in the image below.

step12

Step 13

Convert it to Smart Object, give it a Gaussian Blur of 2 and change Fill to 40%. Set it as Clipping Mask like in previous steps and set the blending mode to Overlay.

step13

Step 14

Create a new shape and place it like in the image below. Name this layer ‘Horizontal div1‘.

step14

Step 15

Convert it to Smart Object and set it as clipping mask like in previous steps. Set the blending mode to Soft Light and apply a Gaussian Blur with a value of 4.

step15

Step 16

Cmd/Ctrl + click on the Main Shape layer to select its form, then create a new layer and with a soft edge brush with size of 24px draw a straight line in the same area.

step16

Step 17

Set the layer you have just created to Soft Light and add a layer mask to it. Select black as your foreground color and a brush size of 60px. With the layer mask selected, paint gently on the top and bottom of the black area leaving just the middle section intact. Name this layer ‘Horizontal div2′.

step17

Step 18

Cmd/Ctrl click on the red shape to make it selected, create a new layer, select #eeb946 as your foreground color, select a soft edge brush with a size of 100px and draw a straight line from the top to almost the bottom of the can.

step18

Step 19

With the newly created layer selected, set blending mode to Soft Light and Opacity to 70%. Then add a layer mask, select black as your foreground color, change brush size to 65px and flow to 30%. Start painting the right side a light yellow in order to make it slightly less visible than the left side, without removing it completely.

step19

Step 20

With the Pen tool activated, make a new shape similar to the one below.

step20

Step 21

Convert it to Smart Object and apply a Gaussian Blur with a value of 15. Set blending mode to Overlay.

step21

Step 22

Create a new shape layer and place it in a position similar to the one below. Name this layer “Middle dark”.

step22

Step 23

As usual, let’s convert our latest shape layer to a Smart Object, set the blending mode to Soft light and apply a Gaussian Blur with a value of 10. Press Ctrl/Cmd+J to duplicate the layer and set the Opacity of the new layer to 40%.

step23

Step 24

Create two new shape layers and place them like in the image below.

step24

Step 25

Convert each shape to Smart Object, set blending mode to Soft light and apply a Gaussian Blur with a value of 10. Do this for both shape layers.

step25

Step 26

Create a new shape like the one below.

step26

Step 27

Convert the shape to Smart Object, set blending mode to Overlay and apply a Gaussian Blur with a value of 7.

step27

Step 28

Now let’s focus on the top section of the red shape. Locate the two layers responsible for the horizontal dark line at the top (we named them ‘Horizontal div1′ and ‘Horizontal div2′). With black as your foreground color, select the layer mask and using a soft round edge brush with size of 45px and flow at 30%, delete the area where the light goes through. Do this for each of the two layers.

step28

Step 29

Create a new layer and select a soft edge round brush with a size of 48px and flow 100%. Click once to make a circle at the top (slightly above the line). Set blending mode to Overlay and duplicate the layer.

step29

Step 30

Edges are still a little bright so let’s take care of that. Locate the Main Shape layer and apply an Inner Shadow with the following settings:

step30

Step 31

Let’s darken the bottom section of our red shape a little bit as well. This time, Cmd/Ctrl + click on the Main Shape to make its form selected and create a new layer. Select a soft round edge brush with size of 48px and flow at 30%. Make a straight line at the bottom and set the blending mode to Soft light.

step31

Step 32

In order to increase the realism of the can, we are going to add a window reflection to the can itself. Using the Rectangle Tool (U), create two shapes like in the image below. Then, using the Pen tool (P), unite both shapes like we did in Step 6.

step32

Step 33

We now have both shapes in one unique layer. Duplicate this layer twice and position the shapes like in the image below.

step33

Step 34

Add a Layer Mask to one of the three layers, set black your foreground color, select the Gradient Tool (G) and choose the black to transparent gradient by either selecting directly at the top (1st image) or clicking inside the gradient bar and selecting the second gradient (2nd image).

step34

Step 35

With the layer mask selected, hold shift and drag the mouse from the left side of the shape until you reach the middle of it making the left side transparent.

step35

Step 36

Hold the Alt/Option key and drag the layer mask to the other shape layers in order to copy and apply the same layer mask. Then set the blending mode of all three layers to Overlay and Opacity to 18%.

step36

Step 37

Select #eeb946 as your foreground color, make a new shape layer and place it like in the image below.

step37

Step 38

Convert the shape layer to Smart Object, set blending mode to Overlay, apply a Gaussian Blur with a value of 4 and set Opacity to 70%.

step38

Step 39

Let’s fix the light in the top section of the red shape. Ctrl/Cmd + Click the Main Shape and, with the Brush tool using a soft round edge with size 30px and flow at 30%, darken the top right and left areas a little bit more, similar to the image below.

step39

Step 40

Lets intensify the dark areas in the middle of the can. Locate the shape you have created in step 22 (named ‘Middle dark‘) and duplicate it. Set Opacity of the new layer to 25%.

step40

Step 41

Let’s proceed to the top of the can. Select the layer with the top shape and apply the following settings in the Blending Options panel:

step41

Step 42

Make white your foreground color and select a soft round brush with 100% Flow and size 30px. Cmd/Ctrl + Click the top shape layer to make its form selected, create a new layer, start drawing very gently 3 straight lines with a gap between them and place horizontally centered. Set blending mode to Overlay. Try to mimic the image below.

step42

Step 43

Do the same thing as in the previous step, however, this time make a line with no gaps and covering the top portion of the shape.

step43

Step 44

Time for shadows. Use the same technique but make small spots along the top shape. Intensify the darkness in the right and left edges.

step44

Step 45

Finally, make a thin line to give our top shape a 3D look and feel. Place it vertically and horizontally centered.

step45

Step 46

Let’s now take care of the bottom part of the can. Apply the following settings in the Blending Options panel:

step46

Step 47

The technique will be the same we used on the top part of the can. Cmd/Ctrl + click on the bottom shape layer and create a new layer. With a soft round edge brush with size 21px and flow at 100%, highlight the top part of the shape. Set blending mode to Overlay. Then, create another layer and do the same thing but this time make a vertical line covering the entire height of the shape, following the light of the red shape. Change the blending mode of the latest layer to Soft Light.

step47

Step 48

Apply the same method to darken the left and right edges of the bottom shape. Set blending mode to Overlay and Opacity to 70%.

step48

Step 49

Let’s darken the middle a little bit more. Do the same thing as in previous steps and make something like the image below. Set blending mode to Soft Light and Opacity to 60%.

step49

Step 50

Create a new layer and draw a shape similar to the one in the image below. Give it a color of #311010.

step50

Step 51

Convert the shape to Smart Object, apply a Gaussian Blur with a value of 5. Set the layer’s blending mode to Overlay and set Opacity to 20%.

step51

Step 52

Create a new shape to act like the image below. Add a layer mask and, using the Gradient Tool (G), remove the top and bottom areas of that shape exactly like we did in Steps 34 and 35.

step52

Step 53

Set Opacity to 20% and blending mode to Overlay.

step53

Step 54

Looking good. Grab the Coca-Cola logo that’s below this sentence, press Cmd/Ctrl + T to open the Transform panel and rotate in order to adjust it to the correct position.

coca_cola_logo

step54

Step 55

Let’s add some water drops. Using the Elipse Tool (U), create a circle shape and apply the following settings:

step55

Step 56

Copy the previous layer style, then create several shapes using the Pen tool and Elipse tool and past the same layer style to each shape. Organize the layers into a folder and duplicate your drops across the can.

step56

Hope you have found this tutorial useful for your future projects. Any questions you may have, please use the comment section below.

April 08 2013

13:00

Create a Responsive Website Using HTML5 and CSS3 – Video Tutorial

A few weeks ago we released two different introductory articles about HTML5 and CSS3, and I promised you we’d do some cool stuff together in the upcoming months. Well, I have been working hard on this video tutorial and I really hope you enjoy it.

In this tutorial I will teach you how to create a responsive website using HTML5/CSS3 from scratch. So rather than talking about, let’s get straight to it. I hope you will leave me feedback in as I would like to get hear some of your opinions very, very much!

Create a Responsive Website – Video Tutorial

07:00

March 25 2013

08:30

Mandatory for Web Developers: Free Video Tutorials on Chrome DevTools by Code School


  
codeschool-devtools-01-w550

Are there web developers who have never heard of Chrome DevTools? I don't know of one single example. Chrome DevTools are a developer's friend. Directly implemented into the browser, they deliver tools that are inescapable when it comes to web programming, especially the debugging part of it. Getting started with DevTools is not exactly complicated, but - as always - any help in accomplishing a faster start is greatly appreciated and lowers the inhibition threshold for newcomers. It is exactly such an entrance (and more) that the free video tutorial "Explore and Master Chrome DevTools" offers you.

08:00

How To Create a WordPress Custom Page Template

Creating a WordPress theme to accommodate your website design concept becomes so much easier when you know about things like Custom Page Templates. WordPress operates using posts and pages, but every page doesn’t have to be cookie-cut from the same format. You can create unique layouts and content for specific pages to create visually interesting sites that are still editable via WordPress’ powerful publishing tools.

What is a custom page template?

WordPress custom page templates are theme files that provide an alternative to the default page.php file. These custom templates can contain whatever HTML and template tags you wish to build your desired layout or content, then the file can be attached to a specific page in order for WordPress to use this new template when serving that particular page of the site.

Common uses for custom page templates are to create unique page layouts for about pages, testimonials or services; an eye-catching portfolio with an array of clickable thumbnails; or a clever about or contact page with features embedded directly to the template in code. If you need to configure your page layout beyond what is available in the default page.php file, a custom page template is what you need.

How to create a custom page template

Creating a custom page template couldn’t be easier. Create a blank php document, then add the following code:

< ?php
/*
Template Name: About
*/
?>

Configure the template name to something recognisable, this is what will appear in a drop down menu within the WordPress admin screen. Saving the file with a name corresponding to your chosen template name makes sense, for example about.php.

In the remainder of the document add your HTML and WordPress template tags to construct your desired layout. This might utilise tags such as <?php get_header(); ?> to build the page using the existing header/sidebar/footer elements, or you might be building something completely unique using a complete WordPress loop. Don’t forget, you can also hard code features into your template file that are unique to this page, such as a contact form, YouTube video or a Google Maps iFrame.

Once you’ve created your custom page template and uploaded it to your theme directory, create your page using the WordPress editor. Any content you add using the WYSIWYG will appear wherever the <?php the_content(); ?> tag was placed within the template. This page will use the default page.php template unless your change the Template option under Attributes.

Select the Template menu and choose the template file with the name you supplied. Hit the publish button and see your WordPress content dynamically generated using the structure of your custom page template.

August 30 2012

07:54

Get Your Form On: Modern Web Forms Tutorials


  

This article is designed to show you (through tutorials) how to create and better understand CSS forms. With a proper understanding of each element (radio buttons, checkboxes, textareas ..), CSS know-how, a little patience and some creativity you can create beautiful and appealing forms.

Having a website with beautiful and functional forms is vital for managing a web business. Keeping your visitors and potential customers satisfied and making your website more accessible should be one of the primary focuses to any website owner. As a designer, the contact form is the first step a client takes to communicate with you, but it can also be the final step a user takes on your website. Having a good and functional contact form is vital to convince the client you are the right choice.

Whether you are looking for tips and tricks for creating contact forms, sign-up / sign-in or checkout forms this article will help you find what you are looking for; or at least inspire you.

Below you can find a showcase of beautiful web forms tutorials:

Get Your Form On

Create a simple CSS form

This tutorial explains how to design a good contact form using a clean CSS design with only label and input tags to simulate an HTML table structure.

Create a simple CSS form

Postcard CSS comment form

This tutorial will show you how to create a stunning comment form using an old postcard image.

Postcard-like CSS Contact Form

Stylish Responsive Form With CSS3 And HTML5

This tutorial shows you how to create a stylish contact form in CSS3 and the details of working with gradients, drop shadows and rounded corners.

Stylish Responsive Form With CSS3 And HTML5

Facebook-like Registration Form with jQuery

Probably the most known registration form is the sign up form of Facebook. Learn how to create it.

Facebook-like Registration Form with jQuery

A simple and stylish HTML 5 and CSS 3 contact form

Step by step tutorial on how to create a beautiful contact form using Photoshop, HTML5 and CSS3. The tutorial starts from scratch with the Photoshop mock-up.

A simple and stylish HTML5 and CSS3 contact form

Build a Neat HTML5 Powered Contact Form

This form tutorial is built using HTML5 for the input elements and uses the browser’s built-in form validation. Also for older browsers the tutorial uses jQuery and Modernizr and PHP on the server side to validate the input.

Build a Neat HTML5 Powered Contact Form

Fancy AJAX Contact Form

AJAX contact form that uses PHP, CSS, JQuery, formValidator and JQTransform plugins to style input fields and buttons and make the form functional. In addition it uses the PHPMailer class to send out the contact form emails.

Fancy AJAX Contact Form

Floating Feedback button contact form

This tutorial features the creation of an AJAX contact form. The form is not visible initially and is activated by clicking on a Feedback button floating to the left of the website.

Floating Feedback button contact form

Sign-in dropdown box likes Twitter with jQuery

This tutorial helps you create a JQuery Dropbox sign-in box, just like on Twitter.

Sign-in dropdown box likes Twitter with jQuery

Cross-Browser HTML5 Forms

This tutorial teaches users to create beautiful HTML5 forms for modern browsers and how to use a mix of Webforms2, Modernizr, jQuery UI and assorted jQuery Plugins for compatibility with older browsers.

Cross-Browser HTML5 Forms

JQuery and CSS3 drop-down menu with integrated forms

A jQuery and CSS3 tutorial that creates a drop-down menu where each sub-menu has a different form integrated (login, contact form or sign up).

JQuery and CSS3 drop-down menu with integrated forms

Modern Web Forms with HTML5 and CSS3

A beautiful sign-up form with rounded input boxes and button. Also each textbox includes a small icon relevant to the given field.

Modern Web Forms with HTML5 and CSS3

CSS3 forms with HTML5 validation

This form validates itself in real-time whether the completed data fits the recommended format for name, email or website.

CSS3 forms with HTML5 validation

Simple gradient CSS3 form

A simple CSS3 form tutorial explaining the usage of shadows and gradients in HTML5 contact forms.

 Simple gradient CSS3 form

Conclusion

Contact forms have come a long way in the past years, especially after the release of HTML5 and CSS3. You should always be up-to-date with technology and this is an essential part of your online presence. Hopefully you found these tutorials useful, maybe even convincing enough to change the ones on your own websites. We would love to hear your opinions below.

(rb)

August 28 2012

07:37

Adobe Illustrator Tutorial: Create a Set of Sleek Web Ribbons


  

In the following Adobe Illustrator tutorial you will learn how to create a set of sleek web ribbons. We’ll start with two simple shapes and some basic masking techniques. Next, using a simple rectangle and some simple vector shape building techniques we’ll create the overall ribbon shape. Once we have the starting shapes we’ll continue with the smaller parts. Using some Pathfinder options, several Warp and Gaussian Blur effects plus some basic blending techniques we’ll add the final touches.

As always, this is the final image that we’ll be creating:

Step 1

Open Illustrator and hit Control + N to create a new document. Enter 600 in the width and height box then click on the Advanced button. Select RGB, Screen (72ppi) and make sure that the "Align New Objects to Pixel Grid" box is unchecked before your click OK. Now, turn on the Grid (View > Grid) and the Snap to Grid (View > Snap to Grid). Next, you’ll need a gridline every 5px. Go to Edit > Preferences > Guides & Grid, enter 5 in the Gridline every box and 1 in the Subdivisions box.

You can also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to set the unit of measurement to pixels from Edit > Preferences > Unit > General. All these options will significantly increase your work speed.

Step 2

Pick the Ellipse Tool(L) and create a 250 by 40px shape. Fill it with the linear gradient shown below, lower its opacity to 50% and go to Effect > Blur > Gaussian Blur. Enter a 5px radius and click OK. Bear in mind that the yellow zero from the gradient image stands for opacity percentage. Switch to the Rectangle Tool(M), create a 350 by 50px shape, fill it with black and place it as shown in the second image. Reselect both shapes, open the fly-out menu of the Transparency panel, click on Make Opacity Mask then uncheck the Clip box. In the end your masked ellipse should look like in the third image.

Step 3

Pick the Rectangle Tool(M), create a 180 by 75px shape, fill it with the linear gradient shown below and place it as shown in the following image. The white numbers from the gradient image stand for location percentage.

Step 4

Reselect the rectangle created in the previous step and go to Object > Path > Add Anchor Points. Keep focusing on this shape and grab the Direct Selection Tool(A). Select the middle, bottom anchor point and drag it 15px up. In the end your shape should look like in the second image. Move to the Layers panel, double click on this shape and name it "Ribbon".

Step 5

Focus on the top, right corner of the shape edited in the previous step. Pick the Rectangle Tool(M), create a 10px square, fill it with the linear gradient shown below and place it as shown in the following image. Focus on this new shape, grab the Delete Anchor Point Tool(-) and click on the top, right anchor point. This will remove the anchor point turning your square into a triangle.

Step 6

Disable the Snap to Grid (View > Snap to Grid) then go to Edit > Preferences > General and make sure that the Keyboard Increment is set at 1px. Reselect the triangle shape created in the previous step and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px to the right using the right arrow from your keyboard.

Reselect both copies, open the Pathfinder panel and click on the Minus Front button. Fill the resulting shape with black and lower its opacity to 15%. Focus on this new shape, grab the Delete Anchor Point Tool(-) and get rid of the top, right anchor point. In the end your shape should look like in the fourth image.

Step 7

Reselect the triangle shape created in the fifth step and make two, new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 3px to the right. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black and lower its opacity to 15%. Focus on this new shape, grab the Delete Anchor Point Tool(-) and get rid of the top, right anchor point. In the end your shape should look like in the fourth image.

Step 8

Reselect the triangle shape along with the two shapes created in the previous two steps and group them (Control + G). Make sure that this new group is selected and go to Effect > Warp > Arc Upper. Enter the data shown below and click OK.

Step 9

Enable the Snap to Grid (View > Snap to Grid). Reselect the group created in the previous step and go to Object > Transform > Reflect. Check the Vertical button and click on the Copy button. This will create a horizontally flipped copy of your group. Select it, drag it to the left and place it as shown in the third image. The Snap to Grid will ease your work.

Step 10

Reselect "Ribbon" and focus on the Appearance panel. Select the fill and go to Effect > Warp > Shell Lower. Enter the data shown below and click OK. Make a copy of "Ribbon" (Control + C > Control + F), select it and go to Object > Expand Appearance. Move to the Layers panel, double click on this new shape and name it "RibbonExpanded".

Step 11

Disable the Snap to Grid (View > Snap to Grid). Reselect "RibbonExpanded" and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 5px to the right. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Ungroup the resulting group of shapes (Shift + Control + G). Delete the thin, right shape and fill the other one with white. Also, lower its opacity to 40% and change the blending mode to Soft Light.

Step 12

Reselect "RibbonExpanded" and make two, new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 10px to the right. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Ungroup the resulting group of shapes (Shift + Control + G). Delete the thin, right shape and fill the other one with black. Also, lower its opacity to 20% and change the blending mode to Soft Light.

Step 13

Reselect "RibbonExpanded" and make two, new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 5px to the left. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Ungroup the resulting group of shapes (Shift + Control + G). Delete the thin, left shape and fill the other one with white. Also, lower its opacity to 40% and change the blending mode to Soft Light.

Step 14

Reselect "RibbonExpanded" and make two, new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 10px to the left. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Ungroup the resulting group of shapes (Shift + Control + G). Delete the thin, left shape and fill the one shape with black. Also, lower its opacity to 20% and change the blending mode to Soft Light.

Step 15

Reselect "RibbonExpanded" and make two, new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the following image.

Step 16

Reselect "RibbonExpanded" and make two, new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 2px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the following image and change its blending mode to Soft Light.

Step 17

Enable the Snap to Grid (View > Snap to Grid). Pick the Ellipse Tool(L), create a 240 by 45px shape, fill it with a random color and place it as shown in the first image. Select this new shape along with "RibbonExpanded" and click on the Intersect button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the following image, lower its opacity to 40% and change the blending mode to Overlay.

Step 18

Reselect "Ribbon", focus on the Appearance panel and add a second fill using the Add New Fill button. Select it, drag it in the bottom of the Appearance panel, make it black, lower its opacity to 7% and go to Effect > Warp > Shell Lower. Enter the data shown below, click OK and go to Effect > Warp > Arc Lower. Enter the data shown below, click OK and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image and click OK.

Step 19

Reselect "Ribbon", focus on the Appearance panel and add a third fill. Select it, drag it in the bottom of the Appearance panel, make it black, lower its opacity to 10% and go to Effect > Warp > Arc Lower. Enter the data shown below, click OK and go to Effect > Distort & Transform > Transform. Enter the properties shown in the following image and go to Effect > Blur > Gaussian Blur. Enter a 3px radius and click OK.

Step 20

For the following step you will need a grid every 1px. So, go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box. Pick the Rectangle Tool(M) and create a 280 by 1px shape. Place it as shown in the following image, fill it with the linear gradient shown in the first image then send it to back (Shift + Control + [ ).

Step 21

Let’s add a simple background for our ribbon. Pick the Rectangle Tool(M), create a shape the size of your artboard, fill it with R=190 G=190 B=190 and send it to back (Shift + Control + [ ).

Step 22

Disable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid). Reselect the thin rectangle created in the twentieth step and make a copy in front (Control + C > Control + F). Select it and move it 1px down using the down arrow. Make sure that your copy is still selected, focus on the Appearance panel and replace the existing linear gradient with the one shown in the following image.

Step 23

Pick the Type Tool(T) and add your text. Set its color at R=42 G=92 B=5 then go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK.

Step 24

Reselect the rectangle used for the background, focus on the Appearance panel, add a second fill and use the radial gradient shown below. Keep focusing on the Appearance panel and add a third fill for this shape. You’ll need a built-in pattern for this new fill. Go to the Swatches panel, open the fly-out menu and go to Open Swatch Library > Patterns > Basic Graphics > Basic Graphics_Textures.

A new window with a set of built-in patterns should open. Make sure that your background rectangle is still selected, focus on the Appearance panel and select that third fill. Lower its opacity to 20%, change the blending mode to Multiply and add the "USGS 19 Land Inundation" pattern.

Step 25

Finally, here’s a quick technique that you can use to recolor your ribbon. Select all the shapes that make up your ribbon and go to Edit > Edit Colors > Recolor Artwork. Click on the Edit button, make sure that the "Recolor Art" and the "Link Color Harmony" buttons are checked then play with the color handles.

And We’re Done!

Once again, here’s how your final result should look.

Now that we have made it to the end, we would like to know your thoughts on this new tutorial. Leave us your two cents in the comments.

(rb)

August 23 2012

09:23

How to Prepare a Business Card for Print in Illustrator

Advertise here via BSA

Believe it or not, print isn’t dead! Although much of today’s advertising is going to more electronic means, there are still a vast amount of printing being done every single day. Many freelance graphic designers are still working on print projects for clients, communicating with printers, and sending their designs to print.

It is often much easier to publish something electronically than for print. With sending something to print, you have many things you must do in order to prepare your file for printing, depending on the printer you are working with.

In this article, I am going to walk you through the several steps you can do to prepare a business card for print. Although I focus on a business card here, these same tips can be applied to other printed pieces as well, such as post cards, letterhead, invitations, and the like.

First, make a copy of the document

First and foremost, after your document is finalized and before you start prepping it for print, it is vital that you save a copy of the document and work on the copy. I recommend labeling the document with “print ready” or “for print” in the title, so that you know that the print ready file is not the original, editable file.

Some of the things I discuss below are irreversible (without a ton of work) once you do them, which is why it is best to keep the original file so that in the future if you need to make changes, it is easy to do so.

Get printing specs from printer (if possible)

Since every printer is going to want files differently, it is important to contact the printer you plan to send your file(s) to and ask them if they have any specific requirements. They may often tell you that they need the font files or outline the text, account for a specific amount of bleed, save in a certain format, etc. Make note of these requirements and adjust the below mentioned steps as needed. If you don’t know who the printer is going to be, then the steps below should get your file(s) closer to print ready with only minimal changes required once a printer has been selected.

Outline Fonts

The very first thing I do is outline the type in my document. I do this for a couple of reasons: I don’t want to spend time finding the font file and sending with my document and most font licenses don’t allow you to give the files to other people. Some printers I have worked with try to get the font, but I simply just outline the text and explain that the fonts have been outlined.

Screen Shot 2012-08-22 at 12.38.46 PM

In Illustrator, this is done by selecting all of the text (that is editable), then go to Type > Create Outlines (Shift-Command-O on Mac or Shift-Ctrl-O on Windows). The type now becomes vector shapes. Once you do this and exit out of the document, you can no longer edit the text unless you simply redo it.

Screen Shot 2012-08-22 at 12.45.19 PM

Check and adjust your bleeds

A bleed (in graphic design and printing) is any area on a printed document where the ink must run off the edge of the paper. Thus, in your document, you should actually run any colors off of the edge and then some to accomodate for the printer cutting your piece to the appropriate size. As you can see in my business card above, I indeed have a bleed on all four sides of my business card (please note that my business card size above is 3.5 inches by 1.5 inches).

Sending my card to print right now, with the bleed only going to the edge of the 3.5 by 1.5 size, I could get my cards back having some white borders on some of the edges of the card. Why? Because it actually is not a true bleed. Printers reserve a fraction of an itch of wiggle room for their cutting machines. In essence, you need to prep your file to cover their non-exact cutting. You will need to push your bleed further than the actual size of your document.

If your document has a bleed, there are a couple of ways to indicate this in your file and accomodate it, and the way printers want you to do it often varies from printer to printer. Since mostly every printer is different, and every program they use is equally different, below is the way to prep your business card for any program and for most printers.

In Illustrator, draw a rectangle around your business card to the exact size and in the exact place you want the printer to cut your card (in the image below the rectangle has a red stroke so that you can see the shape I drew–you should make yours have no fill and no stroke color).

Screen Shot 2012-08-22 at 12.57.58 PM

Next, while the shape is still selected, go to Effect > Crop Marks. You should now have printer marks around your business card that indicate exactly where you want the printer to cut your cards. Your business card with the crop marks should look similar to mine below.

Screen Shot 2012-08-22 at 1.00.45 PM

With crop marks in place, we still need to make our document program-independent, meaning if our file is opened in a program other than Illustrator, or in an older version of Illustrator, the printer should still see your file. Since older versions of Illustrator and other vector-based programs do not render art boards properly, it can cause your artwork to potentially be cut off or not seen by the printer, so we need to change the size of our art board if we have it set to be the size of our business card.

Select the Artboard tool from the tool panel (one of the last four in the tools panel). Illustrator will then show you your art boards by graying everything out around the art boards. Now grab the art board and push the edges so that they are past your crop marks (see before and after shots below).

Screen Shot 2012-08-22 at 1.06.55 PM

Screen Shot 2012-08-22 at 1.07.41 PM

We aren’t done yet! We still need to set the bleeds. Since I am a very visual person, I like to see where my safe zone, cut area, and bleed areas are. For the sake of this tutorial, let’s say the safe area is 1/8th inch from the cut area (that means all important things that should not be cut off should be 1/8th inch from the edge) and the bleed is 1/8th inch on the outside of the cut area.

To mark off these areas, I like to use guides. I went ahead and set the safe area, cut area, and bleed area in my business card using guides, which you can see below.

Screen Shot 2012-08-22 at 1.30.22 PM

Finally, we push all of our bleeds out to our bleed guide we created, as seen below.

Screen Shot 2012-08-22 at 1.32.25 PM

Check for colors

The business card example I have been using above uses one color: blue. But what if you have several colors in your business card? If you have multiple colors in your business card, then you have two options for printing: digital printing or offset printing.

Digital Printing

Prepping your files for digital printing when it comes to your colors is easier than for offset printing. A word of caution however, just because it is easier to prep doesn’t mean that you are free from color shifts or undesirable colors. While the different types of settings on your program, what the printer requires, and how sensitive you are to accurate colors for a digital print could be an article in and of itself, keep in mind that you could have some color shifts and taking extra care in making sure the colors are what you want is important at this step.

With that caution behind us, for digital printing processes, your printer will either want the document and colors to be CMYK or RGB. For this tutorial let’s say the printer wants your document and colors to be in CMYK. First place to check this out is the document itself. Go to File > Document Color Mode. Make sure CMYK is selected if it is not already.

Next, select everything in your document and go to Edit > Edit Colors > Convert to CMYK. Now all of your objects should be using CMYK colors. You can check this by selecting anything in your document and going to the colors panel. If the color is made up of CMYK, then it is correct, however if the color is made up of RBG, then you need to repeat the steps above. Just remember this could cause color shifts (not always evident on screen).

Offset Printing

If your business card is being printed using offset printing, you can check to make sure everything is properly indicated for the right color. For simplicity, I am going to use the back of my business card above and use PMS (Pantone Matching System) colors. In my card below I have three PMS colors: PMS Black at 90% (Gray), PMS 298 (Blue), and PMS 381 (Green).

Screen Shot 2012-08-22 at 2.02.27 PM

To check to see if your objects are in PMS colors, click each one and look in the color panel. If it gives the correct name of the PMS color there, then you have designated that object as a PMS color. If you see numbers for either CMYK or RBG colors, then you must designate that object as a PMS color.

To pick a PMS color, go to Window > Swatch Libraries > Color Books > Pantone Solid Uncoated (or the option of your choice). A new window will appear with all of the PMS swatches. Select the object then select the appropriate swatch.

Now in the color panel you should see the name of the PMS color you selected. Repeat for all the other objects in your document. I went through and did all of the objects in the appropriate PMS color for my business card seen below (note color shifts from the one above – read my note above about color shifts).

Screen Shot 2012-08-22 at 2.27.15 PM

The best way to check now to make sure the printer will see the right colors is to print color separations digitally. You can do this on your computer and it requires no actual physical printing. Unfortunately, Illustrator doesn’t make this process easy so please bare with me.

Go to File > Print. In the print dialogue box, select “Adobe PostScript” in the printer drop down and select your local desktop printer in the PPD drop down. Next, select “Output” in the option box on the left hand side. Your print dialogue box should look like this one.

Screen Shot 2012-08-22 at 2.37.02 PM

Next, select “Separations (Host-Based)” where it says “Composite.” Click the printer icons to the left of every color that is not one of the PMS colors you want to print (so that the printer icon is no longer in that box). Finally, click “Save” at the bottom and in the dialogue box save it to your desktop for now.

Find the file on your desktop and open it in Adobe Acrobat. This will convert the .PS file into a .PDF file so you can view it. Each page of the resulting PDF will show in black what each color will print. You can see where the page count is in Adobe Acrobat the name of the PMS color for that page. Flip through and make sure everything appears right. If something is wrong, you can go back and check to make sure every object is designated the correct PMS color. Below is a screenshot of the PMS Black at 90% separation for the back of my business card.

Screen Shot 2012-08-22 at 2.47.19 PM

Die-cuts, Foils and Spot UV

If you have special effects going on with your business card, they require attention as well. Three common effects used in printing today include die-cuts, foils, and spot UV (or spot gloss). Foils and spot UV can be prepped the same way for printing, however die-cuts are prepped for differently. Depending on your printer’s requirements, they may either want these special effects in a different document or in a different layer in Illustrator. We are going to do them in a different layer.

Die-cuts

In short, die-cuts are special made dies (or cutters) that are designed to create a special shape (think cookie cutters). They are often used to cut circle business cards, business cards with rounded corners, or a custom shape. I am going to show you how to prep a card for rounded corners die-cutting, but the same applies to any shape.

Taking the back of my business card above, I would like to add rounded corners to it. The best way to do this is to do it on a separate layer. Create a new layer and name it “Die-Cut.” Next, using the Rounded Rectangle tool, I create the shape that I want my final business card to be. You can see the shape (with no fill or stroke color) in the image below (I have some bleed on my card that is why the shape is not all the way out to the edge of the gray). Finally, all you have to do is inform your printer the name of the die-cut layer!

Screen Shot 2012-08-22 at 3.02.04 PM

Foils and Spot UV

These can be done in a similar fashion as die-cuts, only making the shape a solid black color. Let’s walk through the process together for the spot UV on my business cards (keep in mind it is exactly the same as foil too). As you can see below, I want part of my logo in spot UV over the front of my business card, show in black below. All I have to do is make sure it is where I want it to be, then move it to a new layer (create a new layer, name new layer “spot UV,” select new layer, right-click object then select Arrange > Send to Current Layer).

Screen Shot 2012-08-22 at 3.16.23 PM

A little messy looking, I know, but this along with telling the printer you want spot UV (or foil) should be all the indication they need to properly print your cards.

File Delivery

Again, every printer is different, however once you do all the prep work above, the only file you should have to send to the printer is a PDF file of each side of your document (or however they want you to send it to them). If your printer can take .EPS or .AI files, then you can send them your print-ready files in that format as well, but also send them a PDF so that they can work from either type and see how you want your final product to be.

I always like to be on the super safe and clear side, so I often send along a JPG or PNG version of the card as well, one for each side and one for the color part and one for any special effects, just so it is crystal clear to the printer. Doing a little bit of leg work on your end can help get your card printed faster and accurate. It also never hurts to ask for a proof as well, and approve the proof, so that if something does come back incorrect, the printer will be responsible for it if you approved the proof.

A note about detailed business card designs

The one I used in this tutorial was a simple design with only a few colors, however if you have an extremely detailed business card, you may run into situations that require more prepress work, such as intricate lines with strokes, overlapping objects, trapping and knockouts, photographs, several special effects, etc. It is almost impossible to cover each one in this article but a quick Google search and/or a chat with your printer should help you in your prepress work.

Conclusion

Taking the extra steps to ensure your business card (or any printed document) is prepped for the printer will not only save you some headache with your printer, but also save you money, as some printers charge you prepress fees for this type of work. Why get charged a fee when it is easy to prep your own document? Just keep in mind that a lot of headache can be saved by talking to your printer to find out their requirements first.

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.

Don't be the product, buy the product!

Schweinderl