In this tutorial, I`m going to show you how to design a clean and simple, yet very fancy and complex chat window. Along the way, we`ll build different user interface elements, like buttons, fields, boxes and scroll bars, using a series of Photoshop designing tools.

What we`re going to build today:

First step is to open Photoshop and create a new document of 600×450px. Set the “Background Contents” to “Transparent.

Let`s build the background. Grab the Paint Bucket Tool(G) and paint the blank canvas with a blue color(#54728c). Prepare the layer for filters by going to Filter->Convert for Smart Filters. Now make the background noisy by applying to it a Noise Filter of 2%(Filter->Noise->Add Noise).

Add a gradient to the background to make it look better.

The background is finished. Don`t worry about that middle white spot. We`ll cover it with the app shape.

Now let`s build the app. Select the Rounded Rectangle Tool(U), put it in “Shape Layers” mode to create shapes, set the radius to 5px and draw a rectangle of 460×340px.Stylize it with a white stroke of 1px, color overlay(#f9f9f9) and a smooth dark outer glow:

We`re going to build now the header of the app. This is a tricky step, as we need to make a rectangle with rounded corners and straight corners too. Ctrl+Click the shape-app layer to reveal its selection. Grab the Rectangular Marquee Tool(M), put it in “Intersect with Selection” mode and draw a selection by starting above the shape and ending at 30px under the top of the app. This selection will intersect with the current one and will result another selection with rounded corners at the top and straight corners at bottom. Create a new layer, select the Paint Bucket Tool(G) and paint inside the selection with any color you want.

Apply the next gradient overlay to beautify the shape:

Create a “Close” button by drawing a small circle of 17×17px with the Ellipse Tool(U). Make it white and apply to it a small drop-shadow. Then select the Line Tool(U) and draw 2 lines to create an “x” or simply type in with the Type Tool(T) “X”.

With the Type Tool(T), add a title at the middle of the header. I used the beautiful “Yanone Kaffeesatz” font which can be downloaded from the Google Fonts Library. With this touch, the header is finished.

Now let`s build the scroll bar. Select the Rectangle Tool(U) and draw a rectangle of 17×250px.

Stylize it with the next blending options to make it look like a real bar:

Now the bar looks as we wanted to be:

You noticed that the browser bar has 2 arrows, one at the top and another one at the bottom of the bar, so let`s draw them too. Select the Rectangle Tool(U) and draw a rectangle of 17×17px. Add it the next blending options:

With the Custom Shape Tool(U), add a small gray up-arrow inside the rectangle.

Now duplicate the 2 layers and put them at the bottom of the bar, then rotate the arrow 180 degrees.

The arrows are placed where they belong and are looking good:

Now we have to make the middle bar which will scroll up and down.

Select the Rounded Rectangle Tool(U), set the radius to 2px and draw a rectangle of 15×60px. Then apply to it the same blending options you used when styled the up and down arrows (gradient and stroke).After, select the Line Tool(U), set the height to 1px and draw some lines exactly like on the next image. We want to create the drag effect existing on any bar.

Now the bar is finished:

Let`s continue. We`re going to build now the conversation area by building each chat box. Select the Rectangle Tool(U) and draw a rectangle of 443×81px.

Add to it the next gradient overlay:

Now just under this shape, draw 2 lines, one darker and other one lighter than the background, like in the image. Using this technique,we`ll create a nice depth effect.

Let`s populate this first box with some text and an avatar. The title is made with Yanone Kaffeesatz font, font-size:18px, font-weight:regular and the rest with Arial, font-size:12px, font-weight:regular as well. Being just a design, I can afford using some dummy text like the very popular “Lorem Ipsum…”. The avatar is 40×40px. I imported my own avatar, but you`ll have to use your avatar

Group the layers used to build this first chat box(Ctrl+G) and duplicate the group in order to obtain 2 more boxes. Modify them as you want to get a realistic conversation.

Now the window starts to look like a real one.

We have to build now the text area, in which the user can type in to chat. Select the Rounded Rectangle Tool(U), set the radius to 3px and draw a rectangle of 345×30px, under the conversation area.

Stylize it by adding it an outside stroke of 1px and #eaeaea color. Add some text to make it more visible and realistic.

The last step is to build a “Send” button. With the same Rounded Rectangle Tool(U) and 3px radius, draw a rectangle of 70×30px, next to textarea.

Stylize the shape with an inside stroke of 1px and #2b5e8b color and the next gradient overlay:

Let`s make the button shining a bit. Apply here the same selection technique used when we created the chat header, to obtain a rectangle with rounded and straight corners. Select only half of the button and color it with white. Then reduce the opacity of the white layer to 10% and you will obtain a more eye-catchy button.

Inside the button, with the same font Yanone Kaffeesatz, type in the message “Send” and add then stylize it with a smooth drop-shadow.

With this final touch, we`ve reached the end of the tutorial and obtained a clean, clear and beautiful chat window. Have a look at what we`ve done today:

I thank you for your visit, I hope this tutorial will help you somehow and if you have any questions, just drop them in the comments area. Until then, I wish you have a great day!

Related posts:

1. How to Design a Sleek Progress Bar in Photoshop
2. How to create a clean and design portfolio layout using Photoshop
3. Design a Gorgeous ToDo List Application in Photoshop

Go to Source

When building a business website, the two main things to keep in mind are usability and optimization. Usability refers to the ease of use of the site for the end user. Optimization refers to having the site place as well as it can in search engine results. Often, web design is done in a way that actually trades off search engine optimization value. This need not be the case.

Here are 5 Ways To Improve Your Site’s Design & Rankings.

1. Page Load Times

Many of the major search engines have factored in the time it takes a page to load when determining search engine ranking. The algorithms are thinking, most likely correctly, that a human user will not want to wait on a long page load time. This decreases the relevance of a web page, which definitely decreases search engine ranking.

However, improving the visual element of a web page, and thus its usability, usually begs for greater use of resources, and thus, a longer load time. However, here is what you can do to optimize your load time.

Optimize all images so they are not too load heavy. Photo editing programs are able to easily compress image data, many times losslessly.

Consider a file hosting service, which allows you to host all of your media and images on their service. The data will then be mirrored on their multiple server global network, and the media that loads will be the data from the closest physical server to the user.

Optimize your CSS. Many times stylesheets can be consolidated with no loss of performance or data. Also, if any javascript or widgets are running, make sure to have them load after the main content does. If you have it load first, and it doesn’t, it can take down the entire site’s load process and kill both your usability and optimization.

2. Use HTML 5

HTML 5 is a Flash alternative that improves load times while still enabling webmasters to have rich content on their web sites.

HTML 5 tags are much more precise, and allow for much more structure in content. Search engines love organization, and the specific tags in HTML 5 give a webmaster the opportunity to section off certain parts of pages as relevant to specific keywords.

Though the major search engines have not yet decided how to factor in HTML 5 into search engine rankings, increased organization and better metatags can only help things, now and in the future.

3. Optimizing your Images

Filenames of images should be named after keywords, as either the keyword itself or something that describes it. Also, use dashes to separate words instead of spaces or underscores. Search engine spiders like dashes much better.

Search engines now also factor in your images’ alt attributes (the desciptive text about an image that you see on mouseover). Alt attributes are now used by search engines to index the keywords for a particular image. Use them to send another signal to the search engines what the main focus of a certain page is.

You can also use this tactic for hyperlinks which point internally. The title attribute in hyperlinks serves the same purpose as a signal for search engines as alt tags do for images.

4. Copy Elements

Header tags are essential to optimizing both search engine optimization and the user experience. Search engines use header tags to determine what the main ideas of web pages are about. Basically, keywords put in header tags are assigned a greater weight and serve as queues for the rest of the page.

However, separating a page into sections also helps the reader follow the copy more easily.

5. Flash Hacks

Those in the know are actually moving away from Flash based web sites, as there are better alternatives for rich media content that are less resource heavy. However, this does not mean that it is necessarily wrong to have Flash elements on a web site. They should just be optimized in order to maximize their efficiency.

First of all, Flash sites should have HTML counterparts. Many elements of Flash do not register at all in search engines, and the HTML site is where you can put all of your meta descriptions, page titles, and text links that do register. Also, some browsers still have trouble with Flash, as do users with slower Internet connections. You can use javascript to find these people and serve them the HTML version of your web site automatically.

The parts of Flash that you can optimize, like the filenames, should be optimized. Send as many signals as you can to a search engine about the focus of a page. This means that your Flash filenames should be named descriptive keywords, and dashes should be used to separate words.

Lastly, make sure to place descriptive, similarly optimized text that describes the Flash object.

Related posts:

1. What Every Web Designer Must Know About SEO
2. TalkSpot – Build Your Own Site in Minutes Made Easy!
3. 11 Smart Keyword Related Apps to Help You Simplify Your SEO Task

Go to Source

Today, the expression “Time is money” is true more than ever, so spending your time wisely is a problem you should think about. Many people are using to-do apps to divide their activities in order to obtain a better work flow or more time to spare with family.

The today`s tutorial is about a to-do app. I want to show you how to design one in Photoshop. If you think to create an app, the design process is the first step, so stay close to us to see what we`ll deliver!

What we`ll be doing today:

First step is to open Photoshop, create a new document of 600×500px. Set the “Background Contents” to “Transparent”.

Build the background by grabbing the Paint Bucket Tool(G) and painting the blank canvas with the gray color #72727d. Convert the layer for filters by going to Filter->Convert for Smart Filters. Then apply a noise filter of 2.5% (Filter->Noise->Add Noise).

A last touch for the background, apply this gradient overlay. It makes it look better:

We have the background done and we can carry on designing the app:

Let`s build the app shape. Select the Rounded Rectangle Tool, put it in “Shape Layers” mode, set the radius to 5px, the color to #f8f7f5 and draw a rectangle of 380×360px. Then apply to it the next blending options:

We have a shape now:

Now I want to show you how to create a nice effect. I want to give the impression of multiple files, one on top of another. For this, duplicate the shape layer and resize it from bottom only with -5px. Also, hide the Outer Glow effect by clicking on the eye in layer`s palette, because we want it only on the first layer.

Repeat the process but resize the shape with only 3px. Now we have a nice base for the app.

Let`s build the header. The header will have 2 rounded corners and 2 straight corners. We`ll use a simple technique to make this possible. Ctrl+Click the shape layer`s thumbnail to reveal its selection. Select the Rectangular Marquee Tool(M), put it in “Intersect with Selection” mode and draw a rectangle starting from above the shape and ending at 55px under the top-margin of the shape. You should obtain a selection which has 2 rounded corners and 2 straight corners as well. Now create a new layer and paint with the Paint Bucket Tool(G) into selection.

Prepare the layer for filters by going to Filter->Prepare for Smart Filters.

Stylize the shape with the next gradient overlay and an uniform-monochromatic noise filter of 2%:

Now repeat the process of creating a shape with 2 rounded and straight corners but make the shape only 23px high (to occupy only the first half of the header). Color it with white and reduce its opacity to 15%.

To make the header look even better, draw 2 lines under the header, first lighter and second darker than the header.

The last touch for the header is a title, added using a nice old classic typeface called League Gothic. Stylize it a bit with a smooth drop-shadow. The header is done.

Select all the layers you used for the header and group by clicking Ctrl+G. Now we`ll work under the header layers to not reveal any further elements over it. So, please create any layer under this group. You can always check out the .PSD file of the tutorial, if you`re not understanding something.

Let`s build the app`s tabs. Grab the Rectangle Tool(U) and draw a rectangle of 380×40px. Make it white.

We`ll build now some shadows…this part is very important. Firstly, create a new layer. Now, grab the Rectangular Marquee Tool(M) and make a selection just under the header, 10px high. Then select the Gradient Tool(G) and set a gradient from black to transparent. With the tool set, create a shadow inside the selection by dragging a vertical line from above the selection until the middle of selection. Now, you should obtain a nice shadow.

Repeat the process and create a similar shadow at the bottom of the white shape.

Now, split the width in 4 to get 4 tabs. Create the current tab by drawing a rectangle of 95×41px and same color as the rest of the app and put it in the place of second tab.

As you did earlier, create 2 shadows on the left and right of the current tab. This will beautify the button and will make it stand out.

The tabs are done. We have to build now the activities list, but before, please download these 2 icons: checked icon and unchecked icon.

The activities in a to-do app should be classified by “done” and “not done”. So I decided to use the unchecked icon and black normal text for undone activities and the checked icon + gray and strikethrough text for activities already made. Separate each activity in the list with 2 lines, which creates a clean in-depth effect.

Now that you know how to do the first one, continue to populate the list with more activities. When you`re done, you`ll finish the design of the to-do app.

As you could see, designing an app is simple, but building one can be harder than you think. At least, the first step has been made and you have a starting point. I thank you for watching me, it was a pleasure to write the tutorial for you and if you have any questions, don`t hesitate to drop them into the comments area. Until then, take a look at what we`ve done today:

Related posts:

1. How to Design a Clean and Fancy Chat App in Photoshop
2. How to Design a Flip-Clock Countdown in Photoshop
3. How to Design a Sleek Progress Bar in Photoshop

Go to Source

Adobe photoshop is a complex software and it takes some skills to get going with photoshop and for our help there are photoshop tutorials available online that any one can give it a try. These photoshop tutorials involve many skills in them which are highly useful for any project.  Photoshop tutorials are widely available online and it is always good to try a tutorial to become expert in photoshop. These tutorials will excite everyone to give it a try and in this post we have rounded up the best tutorials over the web. Go ahead and enjoy.

1) Making Of Hell boy free photoshop tutorial

2) Creating a Surreal Smoking Bird Composition in Photoshop

3) Undress a Giraffe in Photoshop

4) Develop a Dynamic Illustration for a Dance Motion in Photoshop

5) Create eye-catching text straight from the 80s

6) Create a nice Moleskine booklet in photoshop

7) Design a Pretty Little Blue Bird Icon

Making Creative Business Card

9) Add Your Face to Movie Poster

10) Skin Retouching Techniques

11)  The Making of the Nutty Boat Trip

12) Create a Devastating Tidal Wave in Photoshop

13) How to Work With Vector Masks in Photoshop

14) Create a Planetary Asteroid Impact – Psd Premium Tutorial

15) How to Create Feet Shoes in Photoshop

16) How to Draw a Converse “Chuck Taylor” Shoe in Photoshop

17) How to Create Brochure Mockups in Photoshop

18) Easy Way How To Create Forsaken Street Photo Manipulation

19) Create a Realistic and Worn-Out Movie Ticket in Photoshop

20) Create a 3D Industrial-style Download Icon in Photoshop

21) Design A coffee cup in photoshop

22) How To Create Stunning Smoke Brushes in Photoshop

23) How to Create a Location Map Icon in Photoshop

24) Making of Sentinel

25) Artistic Printing Inspiration in Illustrator and Photoshop

26) How to Whiten Teeth in Photoshop

27) Create a Cool Text Effect in Photoshop With a Single Texture

28) Photoshop Tutorial | Urban Wasteland Photo Manipulation

29) Create A Retro Inspired Business Card

30) Creating a Vertical Navigation Menu in Photoshop

31) Create a Vibrant Conceptual Photo Manipulation in Photoshop

32) Create a Futuristic Portrait Poster in Photoshop

33) Create a Comic Art Style Photo Manipulation in Photoshop

34) Funny Animal Morphing in Photoshop

35) Meteorite Impact Photoshop tutorial

36) Vectorize a Landscape Photo Into a Watercolor Painting

37) Quick Tip: Create a Realistic Broken Glass Effect in Photoshop

38) Create a 3D Text Effect Using Photoshop Layer Styles

39) Photoshop Tutorial: Paint with fire

\

40) Create a Nebula Cosmolady in Photoshop – Tutorial

Related posts:

1. 40 Fresh Photoshop Tutorials – March 2011
2. 15 Fresh Quality Adobe Photoshop Tutorials
3. Set of 10 best Photoshop tutorials for fire effects

Go to Source

Under-construction templates are very popular nowadays. People are using them until they build a new website or modify the current one to inform readers, to collect subscribers or even to promote products. In this tutorial I`m going to show you how to design a flip-clock countdown in Photoshop which can be used for a coming soon template. Along the way, we`ll use different Photoshop tools and techniques in order to obtain a high-quality result.

What we`ll be doing today:

First step is to open Photoshop and to create a new document of 600×400px. Set the “Background Contents” to transparent.

Let`s build the background. Grab the Paint Bucket Tool(G) and with a dark gray color (#474747) paint the empty canvas.

Convert the layer for Smart Filters by going to Filter->Convert for Smart Filters. This way we can apply filters in a non-distructive way. Go to Filter->Noise->Add Noise and add a Monochromatic Uniform Noise of 2%.

Now add a Radial Gradient Overlay by double-clicking the layer or right-click -> Blending Options:

The background looks good and is ready to sustain the flip-clock countdown.

Now let`s build the countdown. Grab the Rounded Rectangle Tool(U), set the radius to 3px and draw a rectangle of 100×100px. Don`t worry about the color. We`ll apply a gradient overlay later.

Stylize the shape by adding the next blending options:

The shape just got transformed and looks like this:

Now pay attention at the next step. We`re going to build the flip effect. Duplicate the shape layer you just styled and place the new layer under the original one. Then hide the stroke effect by clicking on the small eye icon. Then move the layer 5 px under the original one.

Duplicate the new layer(the bottom one) 2 times and lower them 3px and 6px. Doing this, you`ll obtain a nice page-on-page effect.

Now it is time to add some text inside the box. I used the elegant Droid Sans typeface which can be downloaded for free from Google Webfonts directory.

Grab the Horizontal Type Tool(T), select the Droid Sans typeface, set the font-weight to Bold and font-size to 60px and type in a number, like “34″. This box will be used for days.

Stylize the text by adding the next layer styles:

Using the same bold Droid Sans font, type in under the box the word “DAYS”. Make sure to reduce the font-size from 60 to 18px and apply the same effects used for “34″.

The image looks good until now but still we didn`t build yet the flip-clock effect, so let`s do that now. Grab the Line Tool(U), set the line height to 3px and draw a black horizontal line at the middle of the box.

With the same Line Tool(U), draw 2 small gray flaps of 2×10px and position them on the left and right side of the bar. And with this touch we created the flip-clock effect which looks great!

Now that you completed the first box, group the layers used (all except the first one-background layer). To group more layers, select the layers and go to Layer->Group Layers or just hit Ctrl+G. Duplicate the group 2 times to create boxes for hours and minutes, arrange them one after another and rewrite the text by modifying “DAYS” with “MINUTES” and “HOURS”.

That was all, my friends. In just a few steps, you`ve learned how to build a stunning flip-clock countdown which I`m sure it will be useful for you.

Take a look at what we`ve done today:

I thank you for following me and if you have any questions/feedback, don`t hesitate to drop us a comment!

Related posts:

1. How to Design a Clean and Fancy Chat App in Photoshop
2. Design a Gorgeous ToDo List Application in Photoshop
3. How to Design a Sleek Progress Bar in Photoshop

Go to Source

Business online is profitable if you have enough resources to generate leads and bring quality traffic. Developing a business blog is one of the best ways to generate quality traffic for your business and also generate business leads. Self hosted WordPress is the most used blogging software that is used by businesses online.

If you are searching for latest WordPress themes for your business, then CharmingWP is the right place where you can get large collection of free and premium WordPress themes at very affordable price with good features.

You can find various types of themes which relate to Blog/magazine, Business/professional, portfolio/photography, E-commerce/stores etc., and can select a theme easily for your website.

About CharmingWP

CharmingWP is the place where you can find free WordPress themes and also the premium WordPress themes at an affordable price.

Apart from the premium WordPress themes, Elegant themes would be really beneficial where you can instantly access to top 60 quality updated WordPress themes for just $39. So if you are need of quality WordPress themes then become a member of Elegant club in CharmingWP. Elegant Themes helps you to get the best short code options and also get information related to the latest development in these themes through WordPress support forums.

Latest WordPress Themes

You can download free and premium WordPress themes from various categories in this websites. As themes are divided into categories, WordPress themes can be easily downloaded based on your website categories.

Get Year Wise Updates

CharmingWP is famous for WordPress theme development. Every year they develop new themes. You can also browse through top WordPress themes of the year and select the best WordPress theme for that particular year. You can browse through various categories and find top premium wordpress theme 2011

Preview your WordPress theme

CharmingWP also provides an option to preview the theme and then download. This is better as you need not download the entire theme which you generally do when you install new themes in self hosted WordPress . This saves bandwidth for your web hosting as well.

Free and Premium WordPress plugins Available

There are some of the top WordPress plugins available in CharmingWP . WordPress plugins are available for free as well as premium wordpress plugins. You can select the best WordPress plugin that exactly suits your requirements. You can go through the WordPress WordPress plugins and use them if they are necessary for your website.

As WordPress version gets updated periodically, it is always preferred to purchase a premium WordPress theme so that you can get regular updates and fixes for those themes when a new release of WordPress is developed. You also have the option to get support for your themes by purchasing premium WordPress themes.

However, if you are just starting to give a try, start with free WordPress themes provided by CharmingWP and get started with them.

Related posts:

1. WpStyles.org – Quality and Affordable Premium WordPress Themes
2. The Classic Collection of Free WordPress Themes Released in January 2009
3. 28 Best Quality Textured Backgrounds Free WordPress Themes

Go to Source

A few days ago, I showed you how to design a beautiful and clean paper sticky note in Photoshop. We created then some effects like paper, paper lines, sticky tape and shadows and guess what, we`re going to move one step further and will implement all these effects in a webpage using only HTML and CSS3.

Note: The demo looks perfect in browsers like Safari, Google Chrome, Mozilla Firefox and Opera. For a better experience, I strongly recommend to install one of the browsers mentioned.

Believe it or not, using only CSS, we can replicate objects like sticky tapes and shadows, elements which are supposed to be images to implement them in a website.

Take a look at how the sticky note will look at the end of the tutorial. Notice that the final image is slightly different from the original tutorial and I`m referring to the sticky tape which hasn`t the same lateral margins. Well, at this time, this is the best we can do with it using only CSS.

Ok, let`s get started. Prepare a folder and put in it 2 files: index.html and style.css . This is all we need.

Prepare the HTML document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Sticky Paper</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<!--paper note code-->

</body>
</html>

The structure will be very simple, with suggestive classes and ids. Take a look at the following image to understand the structure.

As seen in the image, we need a big container on which all the elements will stay.. Then, for each element, we`ll create a specific class. Here`s the HTML code which forms the structure of the page:

<body>

<div id="container">
	<div class="paper">
		<div class="tape"></div>
		<div class="red-line first"></div>
		<div class="red-line"></div>
		<ul id="lines">
			<li></li>
			<li>Please don`t forget to</li>
			<li>buy some food</li>
			<li></li>
			<li>Thanks</li>
			<li></li>
			<li></li>
		</ul>
		<div class="left-shadow"></div>
		<div class="right-shadow"></div>
	</div><!--end paper-->
</div><!--end container-->

</body>

With no element styled, the page looks like this:

Now let`s stylize some elements. We`ll start with the paper, lines and text.

/* Reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, font, img, ul, li {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ul {
	list-style-type:none;
}
/* Content */
body {
	background:url(bg.jpg) repeat scroll 0 0;
}
#container {
	width:320px;
	margin:0 auto;
	padding-top:200px;

}
.paper {
	position:relative;
	width:300px;
	height:250px;
	background-color:#faf8e5;
	border:1px solid #e3e3e3;
}
.red-line {
	height:250px;
	width:1px;
	background-color:#ef8b8b;
	float:left;
	margin-left:4px;
}
.first {
	margin-left:40px;
}
ul#lines {
	margin-top:40px;
}
ul#lines li {
	height:28px;
	line-height:28px;
	color:#4d84c8;
	font-family:Georgia;
	font-style:italic;
	font-size:16px;
	width:225px;
	border-top:1px solid #f2f0df;
	padding-left:75px;
}

These styles are not so different from what you know. The style is simple CSS, nothing fancy, no CSS3 yet, only basic CSS. And after these styles, the image looks like this:

Now create the sticky tape by adding the next css code. Notice that among normal CSS styles, we`re using “transform” and “box-shadow” properties which are specific to CSS3 markup :

.tape{
	position:absolute;
	top:-15px; right:80px;
	width: 130px;
	height: 35px;
	background-color:#fff;
	opacity:0.6;
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 1px 0px #cccccc;
	-moz-box-shadow: 0px 0px 1px 0px #cccccc;
	box-shadow: 0px 0px 1px 0px #cccccc;
	-webkit-transform: rotate(-2deg) skew(0,0) translate(0%,-5px);
	-moz-transform: rotate(-2deg) skew(0,0) translate(0%,-5px);
	-o-transform: rotate(-2deg) skew(0,0) translate(0%,-5px);
	transform: rotate(-2deg) skew(0,0) translate(0%,-5px);
}

The tape is added:

Now add the styles for the shdows:

.left-shadow{
	width: 140px;
	height: 140px;
	bottom:-5px; left:-12px;
	position:absolute;
	z-index:-6;
	display: inline-block;
	-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);
	box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);
	-moz-transform: scale(1) rotate(274deg) translate(20px, 25px) skew(9deg, 0deg);
	-webkit-transform: scale(1) rotate(274deg) translate(20px, 25px) skew(9deg, 0deg);
	-o-transform: scale(1) rotate(274deg) translate(20px, 25px) skew(9deg, 0deg);
	-ms-transform: scale(1) rotate(274deg) translate(20px, 25px) skew(9deg, 0deg);
	transform: scale(1) rotate(274deg) translate(20px, 25px) skew(9deg, 0deg);
}
.right-shadow{
	width: 140px;
	height: 140px;
	bottom:-13px; right:-4px;
	position:absolute;
	z-index:-6;
	display: inline-block;
	-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);
	box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);
	-moz-transform: scale(1) rotate(184deg) translate(20px, 25px) skew(9deg, 0deg);
	-webkit-transform: scale(1) rotate(184deg) translate(20px, 25px) skew(9deg, 0deg);
	-o-transform: scale(1) rotate(184deg) translate(20px, 25px) skew(9deg, 0deg);
	-ms-transform: scale(1) rotate(184deg) translate(20px, 25px) skew(9deg, 0deg);
	transform: scale(1) rotate(184deg) translate(20px, 25px) skew(9deg, 0deg);
}

Now the design is complete and looks like we wanted to be:

Conclusions:

Many objects can be made using only CSS, but the main issue comes when things doesn`t look so good in all browsers, especially InternetExplorer. For example, take a look at how our design looks in IE8. The sticky tape is just a white rectangle and the drop shadows doesn`t exist. That`s because IE8 doesn`t support CSS3 markup. Starting with IE9, the things are changing in good and CSS3 is finally supported my Microsoft`s internet browser.

In conclusion, the decision is yours. Is your call to be up do date with these awesome effects implemented in more and more websites or to stick with the old internet browsers like IE8.

I thank you for following me trough the tutorial and if you have any questions, drop us a line in the comments`s section.

Related posts:

1. Fundamental CSS3 Resources for Designers
2. How to Create a Grunge Letterpress Text Effect In Photoshop
3. How to create a clean and design portfolio layout using Photoshop

Go to Source

Companies online spend much of their marketing budgets in developing their business websites as it is crucial for their business online. Lead generation campaigns are being created for generating leads to their landing pages which contains attractive content with beautiful Fonts. Some of the best fonts are used in these lead capture pages as they attract readers in their first impression. There are some top Font providers online such as WhatFontis who are experts in font recognition

If you are a graphic designer or web page designer unable to identify a particular font on a website or found trouble in finding right place for getting various designs of fonts for your website the WhatFontis is the right platform to get knowledge about various fonts. This website provides you an option of find font from image which is an option to identify font that is in an image. Advanced options such as this helps readers to identify the best font for their requirements

Here you can have various options like multiple alternatives for your font. You can also identify the font type of a particular character, get various suggestions for your font and can select the best font that suits your web pages.

Steps to download your font from WhatFontis

There are three simple steps by which you can easily download your font or check for an alternative font.

1. You need to submit the image of your font or can submit the URL of your font image or you can also search for your font.
2. In the second step, you can add the character of your font.
3. In the third steps you can see the alternate designs for your selected font and can download them. Most of them are available for free and some are commercial. Select the best choice based upon your needs.

Tips to make use of WhatFontis

In WhatFontis, you can identify a font or look for an alternative for an alternative font. By making use of simple tips available in website, you can get various fonts ideas and multiple tips to identify font

There are many tips available in this website regarding font development and regarding look and feel of various fonts. For Example for best results resolution, the letter must be over 80 pixels and background color should be lighter than the character color and can use  minimum 2 -10 characters.

Efficient Customer Services from WhatFontis

WhatFontis has best customer service online. They are renowned for their best customer services.. You can send all your comments and questions by providing your email ID through Contact Page of WhatFontis and their technical support team will get in touch with you to solve your queries.

You can also add details of your requirements to their technical staff who can help you in providing the best fonts based on your requirements. Start using WhatFontis and generate more leads for your business online.

Related posts:

1. Embed Custom Fonts with Cufón Font Replacement and Google Fonts
2. The 20 free fonts most used in the corporate design
3. OnlineBackupSearch – Guide to Select the Best Online Backup Service

Go to Source

Logo design industry is the fastest evolving industry of the time because the logo design is a crucial element of any company or business as it represents the business image. Designing an impressive and effective logo takes loads of creativity and skill level. Therefore, majority of the companies hire costly designers to get their corporate image created accurately.

Here, we are sharing a collection of 50 incredible Adobe Illustrator Icon & Logo Design Tutorials that help you learn the tips on how to create an amazing logo and icon. Enjoy!

Logo Design Tutorials:

Create the Mini logo

Here in this tutorial you can learn to create the Mini logo. You’ll start with some basic tools and simple shapes. Then, with the Pathfinder options and some Warp effect you’ll get the desired shapes. Finally, you’ll need several gradients and strokes plus some Gaussian Blur and Drop Shadow effects.

Create a Sewed Adidas Logo

In this tutorial artist will show you how to create a sewed Adidas logo. First, you will create the basic shapes using the rectangle and the ellipse tools. For the sewed effects you will use some Roughen and Scribble effects. Finally, for a stitched effect you will use some simple, dashed strokes.

Create the BMW logo

Create the BMW logo. It’s one of the simplest logo tutorials so far. You’ll start with some basic tools and simple shapes. Then, with the Pathfinder options and some Warp effect you’ll get the desired shapes. Finally, you’ll need several gradients, strokes and some simple effects.

Vintage Badge

In this tutorial you will learn Vintage Badge in Illustrator and Photoshop.

Create the Yin Yang Symbol

Int this tutorial artist will show you how to create the Yin Yang symbol. You will only need the Grid, several circles and ellipses along with some basic effects. Once you’ve followed these eleven, simple steps you can easily turn your final result into a nice, little icon.

Create a Grungy Nuclear Warning Symbol

In this tutorial you can learn how to create a Grungy Nuclear Warning Symbol.

Create the QuickTime logo

Here you will learn how to create the QuickTime logo.

Create the Opel logo

In the following steps we’ll be using some classic tools, such as the Rectangle Tool, the Ellipse Tool or the Direct Selection Tool, along with some quite simple effects, such as the Drop Shadow, Offset Path, Reflect & Move and Zig Zag.

Create the Renault logo

Learn how to create the Renault logo. First, the grids and the snap to grid will help you create the basic shapes. Next, you’ll need some simple paths to divide these shapes. Finally, you will use some linear and radial gradient plus some basic effects.

Create the Toyota logo

In this tutorial you can learn to create the Toyota logo. It is all about circles and the Pathfinder panel. You will have to create a series of circles of exact dimensions. Regarding that,the grid and the snap to grid option will ease your work.

Abduzeedo 2010 Logo Design

In this tutorial you will learn how to create a beautiful Toyota logo.

Vector bacterial logo

In this tutorial you will learn how to make a very high quality logo ( vector ) in Adobe Illustrator. so it`s an easy tutorial to learn you how to design a logo in Adobe Illustrator, which is the best program for logo designs, because you create very high quality, ready to print designs.

Create the Volkswagen logo

In the following tutorial you will learn to create the Volkswagen logo. You’ll only need some simple circles, gradients, strokes and some basic effects. You might face some problems with the letter shapes but the grid and the snap to grid will simplify your work.

Create the Audi logo

In the following tutorial you can learn to create the Audi logo. It is mainly about circles, strokes and the Pathfinder pallete. It’s a pretty simple and fast tutorial but you might find some interesting stuff about working with these classic tools.

Create the Mercedes logo

In this new tutorial artist will show you how to create the Mercedes logo. It’s a pretty simple tutorial. Using the Grid, the Ellipse Tool and the Star Tool you will create the basic shapes. Later, with some linear/radial gradients, strokes, gaussian/radial blur and Drop Shadow you will get the final logo.

Artistic Printing Inspiration

Here you will learn how to create Artistic Printing Inspiration in Illustrator and Photoshop.

Create a Top Gun Badge on Illustrator

How to create this vector badge and add some extra feature to it look more awesome, this is a pretty simple tutorial, you probably won’t have bigger problems to execute it, hope you like it (and watch Top Gun, of course).

Icon Design Tutorials:

How to Turn Glasses into a Great Geek Icon

In this tutorial, we’ll show you how to make a cool, or should we say geeky, glasses icon. You should be versed in Adobe Illustrator’s tools to complete this tutorial. You’ll learn how to take creative license and create an illustration that uses a photo reference, but differs a bit in the final design.

How to Create a Suitcase Icon in Adobe Illustrator

In this tutorial you will learn how to create a Suitcase Icon in Adobe Illustrator.

Create a Jeans Pocket Icon Using Adobe Illustrator

In this tutorial you will learn how to Create a Jeans Pocket Icon Using Adobe Illustrator.

Create simple but effective Weather Icons in adobe illustrator

In this tutorial you will learn how to Create a simple but effective Weather Icons in adobe illustrator.

How to Create a Clean Style Folder Icon

In this tutorial you will learn how to Create a Clean Style Folder Icon.

Create an Anti-War Icon Using Adobe Illustrator

In this tutorial you will learn how to Create an Anti-War Icon Using Adobe Illustrator.

Create a Nice Award Medal Icon

In this tutorial you will learn how to Create a Nice Award Medal Icon.

Create a Safe Icon in Adobe Illustrator

In this tutorial you will learn how to Create a Safe Icon in Adobe Illustrator.

How to Create a Simple 3D Lollipop Icon

In this tutorial you will learn how to Create a Simple 3D Lollipop Icon.

Create a Super Glue and a Paint Tube Icon

In this tutorial you will learn how to Create a Super Glue and a Paint Tube Icon.

Create a Wallet Icon

In this tutorial artist will show you how to create a nice wallet icon. Give it and you will learn how to use built in patterns to create a nice textile texture or how to create a sewed effect using dashed stroke along with some basic Illustrator tools and techniques.

Create a Band-Aid Icon

Here is another simple tutorial on how to create a band-aid icon. You start with a simple rectangle and some warp effects. After you expand this shape you will use a linear gradient, a nice pattern and a strokes. Finally, using basic tools and some simple effects you will create the smaller components.

Create a Simple Coin Stack Icon

In this tutorial you will learn how to Create a Simple Coin Stack Icon.

Create a Google Buzz Icon

Here you will learn how to Create a Google Buzz Icon.

Create a Simple Trunk Icon

In this tutorial you will learn how to Create a Simple Trunk Icon.

How to make a realistic vintage typewriter in Illustrator

In this tutorial you will learn how to make a realistic vintage typewriter in Illustrator

How to Make a Detailed Printer Icon Using Illustrator

In this icon design tutorial, we will construct a desktop printer icon that is rich in detail. We will use the industry-standard vector illustration tool: Adobe Illustrator. The icon we will make is from our Perspective general icon set. Ready? Perhaps you should serve yourself a cup of coffee and grab a bag of chips to pass the hunger while we draw our icon (it could take a while to finish)!

Syringe Icon Tutorial

Here you will learn how to Create a Syringe Icon.

Simple Paint Brush Icon

Here you will learn how to Create Simple Paint Brush Icon.

How to Create a Simple Cardboard Box Icon

In this tutorial you will learn how to create a simple cardboard box icon.

Create a Safe Icon in Adobe Illustrator

In this tutorial you will learn how to create a Safe Icon in Adobe Illustrator.

Make a Headphones Icon Using Adobe Illustrator

In this tutorial you will learn how to create a realistic image of headphones using simple and understandable techniques. It turns out that to get a good result there is no need to do it in a complex way. This tutorial is easy for any beginner to complete.

Vector Retro Television

In this tutorial, I’ll show you how to make a stylish retro television in Adobe Illustrator. You will learn how to draw basic shapes, modify them and apply gradient and gradient mesh for more realism. Hope you enjoy this illustrator tutorial.

How To Create a Colorful Logo Style Icon

In this tutorial we will learn how to build the graphic in Illustrator using a range of tools and techniques.

Create A Sleek Bevel Styled Icon With Just a Few Illustrator Tools

Here you will learn how to Create A Sleek Bevel Styled Icon With Just a Few Illustrator Tools.

Simple Skull Vector Icon

In this tutorial you will learn how to create a simple skull vector icon.

Create a vector stop watch icon

In this tutorial you will learn how to create a vector stop watch icon in Adobe Illustrator. The tutorial is covering all the steps needed to create a great looking, realistic stop watch. Only the basic tools in Illustrator such as Ellipse, Rectangle, Gradient and transformations are used to achieve the result you see here.

Create a Simple Storefront Icon

In this tutorial artist will show you how to create a simple storefront icon using some rectangles, Illustrator Effects, and gradients. This icon is great for use in e-commerce sites and the techniques in this tutorial can easily be applied to other icons, illustrations, and logos.

Creating a Money Roll Icon

In this tutorial you will learn how to create a Money Roll Icon.

Vector coffee cup tutorial Illustrator

In this tutorial you will learn how to create a Vector coffee cup tutorial Illustrator.

Create a Tasty Burger Icon in Illustrator

In this delicious tutorial artist will show you how to create a three-dimensional, scrumptious burger using Adobe Illustrator. Remember that I’m a vegetarian, so you should definitely appreciate the effort!

Design a Stylish Wallet Icon in Illustrator

In this simple tutorial artist will show you how to create the wallet icon from my Women’s Icons using Adobe Illustrator CS4.

create a yummy vector cupcake

In this tutorial you will learn how to create a yummy vector cupcake.

Windows 7 icon with Illustrator

In this tutorial you will learn how to create a Windows 7 icon with Illustrator.

How to Create a Vector Smiley Icon

In this tutorial you will learn how to create a Vector Smiley Icon.

Create a Stylized GPS Icon

In this tutorial you will learn how to create a Stylized GPS Icon.

Related posts:

1. 50 Excellent and Useful Adobe Illustrator Tutorials
2. 150 Useful Adobe Photoshp Web Design Layout Tutorials and Techniques
3. A Round-Up of 50 Amazing and Fresh Photoshop Tutorials

Go to Source

To be successful, every web designer needs to be up to date with the latest design trends. Things are changing day after day and keeping up with the new stuff is even harder than ever. For any project, icons are a must-have and a bunch of new icons is always welcome. Therefore, I want to share with you no less than 40 icon sets available in PSD format so you may enhance them with ease in any project.

Upojenie Icon Set for Iphone and Ipod Touch

Picons Social

IconSweets

Iconseets2

Colorful Icons

Radium Icon Set

Minimalistic Icon Set

Avatar Icons

Free Vector Icons

Jeans Icon Set

Moskis Gems: Social Pack #1

Clouds Set

Light Social Icon Set

Github Icons

Social Buttons and Icons

Social Icons

Robots!Robots!

Guilty Pleasure Icons

Mush Icons

Web Icons

Small Icons

Simple Social Icon Set

Set Icones

Retro Icon Set

Tabs Color: Social

Glyphs

Android Icons – Shape Pack

Simple Icons

Chess&People Icons

Iphone Icons

Strabo

Gold Plated Glittering Social Media Icons

Free Mini Vector & Custom Shape Icon Set

Birthday Icons

Symbolicons: Drink

Nice Icon Set

App Bits

Mobileme Icons

Firecracker – Icon Pack

Burn Icons

Related posts:

1. 70 Useful and Free Social Media Icon Sets For Designers
2. Freebies Sticker icon Pack Download these icons for Free
3. 35 (NEW) Modern and High Quality Icon Sets

Go to Source

Create a Settings Page for Your WordPress Website

This tutorial is long and in-depth, but it’s worth a read. The subject material isn’t simple either – recommended for somewhat experienced WordPress developers.

WebPutty

In their own words, a “less craptacular” option to editing/writing CSS. Have one window that has a live preview as well as the editable stylesheet; one click publishing of your changes. Oooh, aahh.

Chosen

Turn your select forms into a thing of beauty with this easy-peasy plugin.

10 Fresh & Free Fonts

Everyone likes free fonts! There are some new ones in here (to me, anyways), so I thought it was worth a share.

Skeleton

Responsive web design is the new black; here’s a great boilerplate to get you on your way!

See you next week!

Go to Source

Tipogram

This sleek & simple icon pack costs $24, and you get the vector icons as well as @font-face icons to embed in your websites. Pretty solid.

50 New and Crazy Cool jQuery Plugins

jQuery plugins are always fun to check out – here’s a bunch of new ones.

10 Ways to Beat Online Obscurity

There are myriad ways to give your site a traffic bump; learn from one of the best with this article on CopyBlogger.

Tattly

Temporary tattoos with a design slant. I didn’t know this was a market, but it’s fun.

Opena iPhone Case

You always have your phone on you, right? So why not combine it with the oft-needed bottle opener? It’s Friday, after all.

See you next week!

Go to Source

Today we will be building a jQuery-powered bubble animation effect. It will be a great way to present a set of images on your website as a interesting slideshow. And as the code will be completely modular, you will be able to easily use it and modify it.

The HTML

The slideshow effect we will be creating today, will take the form of an easy to use jQuery plugin. As most of the work is done by the plugin, there isn’t much to do in this section. However, to use the plugin you need to add an unordered list on your page. The individual slides of the slideshow will be added as LI elements.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Bubble Slideshow Effect with jQuery | Tutorialzine Demo</title>

        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!-- The plugin stylehseet -->
        <link rel="stylesheet" href="assets/jquery.bubbleSlideshow/jquery.bubbleSlideshow.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <!-- The bubble slideshow holder -->
		<ul id="slideShow"></ul>

		<!-- JavaScript includes -->
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="assets/jquery.bubbleSlideshow/bgpos.js"></script>
        <script src="assets/jquery.bubbleSlideshow/jquery.bubbleSlideshow.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

To be able to use the plugin, you will need to include jquery.bubbleSlideshow.css in the head of the page, bgpos.js and jquery.bubbleSlideshow.js before the closing body tag. bgpos.js is a jQuery CSS hooks plugin that will allow us to animate the background-position property (needed in the bubble animation), and jquery.bubbleSlideshow.js holds the code we will be writing today.  Also remember to include the jQuery library as well.

You can see a simple explanation of the bubble effect below.

The Bubble Effect Explained

JavaScript and jQuery

First we will write a JavaScript class named Bubble. Every bubble in the slideshow is going to be an object of this class. It will have properties such as top and left (position offsets), size (diameter of the circle) and an elem property, which is a jQuery object containing the actual div. We will use this property later when we animate the bubble in the flyFrom() method.

jquery.bubbleSlideshow.js

	// This is the Bubble class. It takes left and top
	// coordinates, size (diameter) and a image URL

	function Bubble( left, top, size, imgURL ){

		this.top	= top;
		this.left	= left;
		this.size	= size;

		// This places the center of the
		// circles on the specified position:

		top -= size/2;
		left-= size/2;

		this.elem = $('<div>',{
			'class':'bubble',
			'css'	: {
				'width'		: size,
				'height'	: size,
				'top'		: top,
				'left'		: left,
				'background-position': (-left)+'px '+(-top)+'px',
				'background-image': 'url('+imgURL+')'
			}
		});

	}

	// The fly from method takes a starting position, time,
	// and a callback function, executed when the animation finishes.

	Bubble.prototype.flyFrom = function( startX, startY, time, callBack ){

		time = time || 250;
		callBack = callBack || function(){};

		startX -= this.size/2;
		startY -= this.size/2;

		// Offsetting the element

		this.elem.css({
			'display'				: 'block',
			'backgroundPositionX'	: -startX,
			'backgroundPositionY'	: -startY,
			'left'					: startX,
			'top'					: startY
		});

		// Animating it to where it should be

		this.elem.animate({
			'backgroundPositionX'	: -this.left,
			'backgroundPositionY'	: -this.top,
			'left'					: this.left,
			'top'					: this.top
		}, time, 'easeOutCirc', callBack );

	};

	// Helper function for generating random
	// values in the [min,max] range

	function rand( min, max ){
		return Math.floor( Math.random()*((max+1)-min) + min);
	}

The flyFrom() method takes a set of coordinates, that determine the position the bubble flies in from. It still ends up in the position that you specify when creating it. This method is defined on the Bubble function’s prototype, which automatically makes it available to all its instances. This is a more effective approach, as only one copy of this method exists at a time, instead of a copy of this method for each object. Also, notice the rand() function defined at the bottom of the fragment. It mimics the PHP function of the same name and is used throughout the plugin code.

Now that we have the class in place, lets write a function that creates an array with bubble objects, appends them to a new LI element, and animates them. The function takes three parameters:

• stage, which is a jQuery object that holds a UL element. This will hold the slideshow, with each slide being an individual LI;
• imgURL is the URL of the image that will be shown in the bubbles;
• func is a callback function that will be called once all bubble animations are complete. This is used to switch the slides and destroy the bubbles, as they will not be needed after the transition to the new slide is complete;

As you guessed, for every slide transition, a new random set of bubbles is created, and destroyed after the next slide is made visible.

Bubble Slideshow Effect

jquery.bubbleSlideshow.js

	function showBubbles( stage, imgURL, func ){

		// This function appends a new LI element to the UL
		// and uses it to hold and animate the bubbles.

		var i = 0,
			bubbles = [],
			totalBubbles = 75,
			stageWidth = stage.outerWidth(),
			stageHeight = stage.outerHeight(),
			emptyFunc = function(){};

		// This li holds the bubbles
		var li = $('<li class="bubbleStage">').appendTo(stage);

		// This function is passed to the flyFrom method call:

		var callBack = function(){

			// Waiting for the func function to
			// finish and removing the li.

			$.when(func()).then(function(){
				li.remove();
			});
		};

		for( i=0; i<totalBubbles; i++ ){

			var x	 = rand(0, stageWidth),
				y	 = rand(0,stageHeight),
				size = rand(30,150);

			var bubble = new Bubble( x, y, size, imgURL );
			li.append(bubble.elem);

			bubbles.push(bubble);
		}

		// Sorting the bubbles so that the
		// bubbles closest to the top border of
		// the image come first:

		bubbles = bubbles.sort(function( b1, b2 ){
			return b1.top+b1.size/2 > b2.top+b2.size/2;
		});

		// Looping through all the bubbles,
		// and triggering their flyFrom methods

		for( i=0; i<bubbles.length; i++){

			(function( bubble, i ){
				setTimeout(function(){

					bubble.flyFrom(
						stageWidth/2,
						stageHeight+200,
						250,
						(i == bubbles.length-1) ? callBack : emptyFunc
					);

				// This Math.floor schedules five bubbles
				// to be animated simultaneously

				}, Math.floor(i/5)*100); 

			})( bubbles[i], i );
		}
	}

Great! So now we have a function that creates a set of bubbles in a new LI element and animates them. But these are only functions, they are not a plugin yet, so we will have to work on that. Also we are still missing the slides themselves. Lets write the missing pieces:

jquery.bubbleSlideshow.js

$.fn.bubbleSlideshow = function(photos){

		if(!$.isArray(photos)){
			throw new Error("You need to pass an array of photo URLs as a parameter!");
		}

		photos = photos.reverse();

		var ul = this.addClass('bubbleSlideshow');

		$.each(photos,function(){
			ul.append('<li><img src="'+this+'" /></li>');
		});

		// These methods are available externally and
		// can be used to control the bubble slideshow

		ul.showNext = function(){
			showNext(ul);
		};

		ul.showPrev = function(){
			showPrev(ul);
		};

		ul.autoAdvance = function(timeout){
			timeout = timeout || 6000;
			autoAdvance(ul,timeout);
		};

		ul.stopAutoAdvance = function(){
			stopAutoAdvance(ul);
		};

		return ul;
	};

The code above defines a new plugin called bubbleSlideshow(). It should be called on a UL element and takes an array of photo URLs as its parameter. These are added to the UL.

Inside its body, the plugin creates a new LI element for each of the photos in the array, and adds showNext, showPrev, autoAdvance and stopAutoAdvance methods to the UL. These wrap around local functions with the same names, which you can see below:

jquery.bubbleSlideshow.js

	function autoAdvance(stage,timeout){
		stage.data('timeout',setTimeout(function(){
			showNext(stage);
			autoAdvance(stage,timeout);
		},timeout));
	}

	function stopAutoAdvance(stage){
		clearTimeout(stage.data('timeout'));
	}

	function showNext(stage){
		showFrame(stage, stage.find('li.bubbleImageFrame').first());
	}

	function showPrev(stage){
		showFrame(stage, stage.find('li.bubbleImageFrame').last().prev());
	}

	function showFrame(stage, frame ){

		// This function shows a frame,
		// passed as a jQuery object

		if(stage.data('working')){
			// Prevents starting more than
			// one animation at a time:
			return false;
		}
		stage.data('working',true);

		var frame = frame.hide().detach();

		// Using the showBubbles function, defined below.
		// The frame is showed after the bubble animation is over.

		showBubbles( stage, frame.find('img').attr('src'), function(){
			stage.append(frame);
			stage.data('working',false);

			// This returns a jQuery Promise object.
			return frame.fadeIn('slow');
		});		

	}

I used “local” to describe these functions, because they are not available from outside the plugin. The showNext and showPrev functions above both call showFrame, passing it the UL and the LI slide that is to be shown. showFrame makes sure that there is only one animation running at a time, and calls the showBubbles function we already wrote.

The callback function that is passed along with the method call, displays the slide you want to show above all the others by appending it last in the UL (the slides are absolutely positioned, which means that the last element in the UL is shown on top). This function is called once the bubble animation completes.

Here is how you initialize the bubble slideshow:

script.js

$(function(){
	var photos = [
		'http://farm6.static.flickr.com/5230/5822520546_dd2b6d7e24_z.jpg',
		'http://farm5.static.flickr.com/4014/4341260799_b466a1dfe4_z.jpg',
		'http://farm6.static.flickr.com/5138/5542165153_86e782382e_z.jpg',
		'http://farm5.static.flickr.com/4040/4305139726_829be74e29_z.jpg',
		'http://farm4.static.flickr.com/3071/5713923079_60f53b383f_z.jpg',
		'http://farm5.static.flickr.com/4108/5047301420_621d8a7912_z.jpg'
	];

	var slideshow = $('#slideShow').bubbleSlideshow(photos);

	$(window).load(function(){
		slideshow.autoAdvance(5000);
	});

	// Other valid method calls:

	// slideshow.showNext();
	// slideshow.showPrev();
	// slideshow.stopAutoAdvance();
});

All that is left is to define a few CSS rules that add properties such positioning, overflows and background-positions:

jquery.bubbleSlideshow.css

ul.bubbleSlideshow{
	position:relative;
	list-style:none;
	overflow:hidden;
}

.bubbleSlideshow li{
	position:absolute;
	top:0;
	left:0;
}

.bubbleSlideshow li img{
	display:block;
}

.bubbleSlideshow li div.bubble{
	-moz-border-radius:50%;
	-webkit-border-raidus:50%;
	border-radius:50%;

	background-repeat:no-repeat;
	display:none;
	position:absolute;
}

With this the bubble effect slideshow is complete!

Final words

The effect we made today may not be limited only to slideshows. It can be used to build unique website backgrounds, headers and presentations. The plugin is built to automatically resize to fit the UL, so you can easily change its size by tweaking a few CSS properties.

Go to Source

Imagine a cop drama taking place in the 1930s. After a streak of bank heists, a young detective is given the case of his life. He accepts the challenge, and after grueling months of hard work and life-threatening situations, he manages to bring the bad guys to justice.

What follows is a classical device used by film makers of the period – newspapers flashing and spinning towards the camera, praising the heroic feats of our protagonist.

So lets have some fun and build this classical scene using the CSS3 animations capabilities of the new versions of Firefox, Chrome and Safari, picking useful techniques along the way.

The Idea

Using JavaScript, we will load a sliced up version of the newspaper (slices are independently encoded as PNG or JPG for smaller filesize), and combine them in a single canvas element. We will also load a custom font from Google WebFonts, which we use to write the article title to the canvas.

We also define a simple CSS3 keyframe animation, which uses transformations such as scale() and rotate() to animate the canvas elements. Appending the canvas to the page triggers the animation, which means we don’t need to write a single line of JavaScript for the effect itself.

Currently, CSS3 keyframe animations are supported by Firefox, Safari and Chrome, so if you are using a recent version of one of these browsers, you will be able to enjoy the demo.

Here are some minor considerations that drove the decisions above:

• The image of the newspaper, encoded as PNG, weighs at over 250kb. Slicing it into independently encoded slices saves 200kb, as the center part does need transparency and is encoded as JPEG;
• Rotating a bunch of DOM elements is slower than a single canvas element. Also, rotated text in the browser generally does not look very good, as letters may lose their anti-aliasing (see a simple experiment here; it is most pronounced in Firefox). Painting the text and the newspaper background to a canvas element solves both of these problems;

The Sliced Newspaper Background

The HTML

The markup of the page is minimal – everything is done using jQuery, so we only need to include our JS source files and stylesheets.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Spinning Newspaper Effect | Tutorialzine Demo</title>

        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />

		<!-- Embedding the Anton font from Google Webfonts -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Anton&v2" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

		<h3 id="fin">That is all</h3>

		<!--
			This div uses the "Anton" font,
			preloading it for the canvas element
        -->
		<div id="fontPreload">.</div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

In the head section, we include our styles.css file (discussed below) and a stylsheet, which embeds the Anton font from Google WebFonts. Near the end of the file, we include version 1.6.2 of the jQuery library and our script.js (discussed in detail later on).

The most important piece of markup in the code is also the most unassuming. The #fontPreload div is crucial for this example. What it does is use the embedded Anton web font. This is required so that browsers properly initializes the font before it is used in the canvas. Without it we would be staring at a blank newspaper cover.

Spinning Newspaper Effect with CSS3 Animations

The jQuery

As we are using a custom web font, we need to be sure that the font is loaded before we use it to generate the newspaper titles. This is why we are binding a callback to the $(window).load() event, which is called once everything is loaded:

assets/js/script.js

$(window).load(function(){

	var imgPath = "assets/img/";

	// Define 6 paper covers:

	var papers = [
		{
			line1:"The financial",
			line2:"chrisis is a hoax!",
			subtitle:"Economist admits practical joke"
		}, {
			line1:"Deeply fried now",
			line2:"considered healthy",
			subtitle:"Scientists change the definition of \"Healthy\""
		}, {
			line1:"Apple announces",
			line2:"the new iphone 9",
			subtitle:"5, 6, 7 and 8 deemed \"not hip enough\""
		}, {
			line1:"The world did end",
			line2:"on may 21st!",
			subtitle:"Priest argues we are actually dead"
		}, {
			line1:"France imposes an",
			line2:"internet kitten tax",
			subtitle:"Every cat picture on the internet will cost 3 €"
		}, {
			line1:"Thank you &",
			line2:"goodbye",
			subtitle:"The Zine Weekly takes its farewell"
		}
	];

	// Check whether canvas and CSS3 animations are supported:

	if(!$.support.canvas){
		$('#fin').html('Sorry, your browser does not<br />support &lt;canvas&gt;').show();
		return;
	}

	if(!$.support.css3Animation){
		$('#fin').html('Sorry, your browser does not<br />support CSS3 Animations').show();
		return;
	}

	// Use jQuery.Deferred to bind a callback when all
	// the images that comprise the paper are loaded:

	$.when(

		loadImage(imgPath+"paper_top.png"),
		loadImage(imgPath+"paper_left.png"),
		loadImage(imgPath+"paper_center.jpg"),
		loadImage(imgPath+"paper_right.png"),
		loadImage(imgPath+"paper_bottom.png")

	).then(function( imgTop, imgLeft, imgCenter, imgRight, imgBottom ){

		// Loop through the paper covers and
		// create a new canvas for each one:

		$.each(papers,function(i){

			var canvas	= document.createElement("canvas"),
				c		= canvas.getContext("2d");

			canvas.width = 717;
			canvas.height = 526;

			// Drawing the paper background slices:

			c.drawImage( imgTop, 0, 0 );
			c.drawImage( imgLeft, 0, 12 );
			c.drawImage( imgCenter, 14, 12 );
			c.drawImage( imgRight, 711, 12 );
			c.drawImage( imgBottom, 0, 516 );

			// Drawing the text using our helper
			// function (see at the bottom):

			drawText( this.line1, this.line2, this.subtitle, c, 358, 250 );

			// Appending the element to the page.
			// This triggers the CSS3 animation.

			setTimeout(function(){
				$("body").append(canvas);
			},i*5800);

		});

		// "This is all"
		$('#fin').delay(papers.length*5800).fadeIn();
	});

	/*------------------------
		Helper functions
	------------------------*/

	// Load an image by URL and resolve a jQuery.Deferred:

	function loadImage(src){

		var def = new $.Deferred(),
			img = new Image();

		img.onload = function(){

			//	Resolve the deferred. The img parameter
			//	will be available in the then function:

			def.resolve(img);
		}

		// Always set the src attribute
		// after the onload callback:

		img.src = src;

		return def.promise();
	}

	// Draw two lines of text and a subtitle
	// on the canvas (passed as the c param):

	function drawText( line1, line2, subtitle, c, x, y ){

		c.font = "65px Anton,Calibri";
		c.textAlign = "center";
		c.fillStyle = "#3e3e3e";

		c.fillText(line1.toUpperCase(),x,y);
		c.fillText(line2.toUpperCase(),x,y+80);

		c.font = "italic 20px Georgia,serif";
		c.fillStyle = "#737373";

		c.fillText(subtitle,x,y+120);
	}
});

(function(){

	// Adding custom checks for canvas and css3
	// animations support, to the jQuery.support object:

	$.support.canvas = 'getContext' in document.createElement('canvas');

	$.support.css3Animation = (function(){
		var sp = $('<span>');

		return (
			sp.css("-webkit-animation") !== undefined	||
			sp.css("-moz-animation") !== undefined		||
			sp.css("animation") !== undefined
		);

	})();
})();

To generate the newspapers, we need to first load the five slices that comprise the image. This sounds like the perfect place to use jQuery’s Deferred object, introduced in version 1.5. What it does is to notify us when a number of asynchronous events are completed. As you can see in the code above, we are using it in the loadImage() function. The then() method on line 58 is called only when all five images are loaded.

Using jQuery.Deferred is a convenient way to organize our code better. It is also used by jQuery’s internal AJAX and animation methods. To get a better idea of what you can do with it, read through the deferred object documentation.

Inside the $.each loop, we create a canvas element for each of the paper covers, and add them to the page after a delay introduced by the setTimeout() call.

Once we have the canvas on the page, we can continue with animating it.

The CSS

Canvas elements are treated as any other element. This means that you can safely style and transform them the same way as you would a regular image.

Once the canvas is added to the page, it will assume the styling you see below:

canvas{
	position:fixed;
	width:717px;
	height:526px;

	top:50%;
	left:50%;

	margin:-263px 0 0 -358px;
	opacity:0;

	/* Configure the animation for Firefox */
	-moz-animation-duration:6s;
	-moz-animation-name:spin;
	-moz-animation-timing-function:linear;

	/* Configure it for Chrome and Safari */
	-webkit-animation-duration:6s;
	-webkit-animation-name:spin;
	-webkit-animation-timing-function:linear;
}

Nothing out of the ordinary here. We are centering the canvas in the page, and defining the different aspects of the animation like duration, name, and a timing function. “Linear” would make our animation run at a constant speed, instead of getting accelerated as is the case with “ease”, which is used by default.

After this, we have to use the @keyframes declaration to specify how our element would look at different key points during the animation:

@-moz-keyframes spin{
	0%{
		opacity:0.2;
		-moz-transform:scale(0.2) rotate(0deg);
	}

	15%{
		opacity:1;
		margin:-263px 0 0 -358px;
		-moz-transform:scale(1) rotate(1090deg);
	}

	90%{
		opacity:1;
		top:50%;
		-moz-transform:scale(1) rotate(1090deg);
	}

	100%{
		top:500%;
		opacity:1;
		-moz-transform:scale(1) rotate(1090deg);
	}
}

When the canvas element is added to the page, we start off from the 0% position above. The element’s opacity is set to 0.2, and it is made 5 times smaller using a scale() transformation. It is quickly animated to its full size ( scale(1) ) in and from 15% to 90% of the animation (or about four and a half seconds) it stays fixed on the screen, after which it quickly falls outside the bottom border of the window (top is increased to 500%).

It is important to specify the properties that you want to persist in every percentage point of the animation. One example is the -moz-transform:scale(1) rotate(1090deg) declaration, which is duplicated three times. Without it, Chrome and Safari (but not Firefox) will revert to the default rotation of 0 degrees mid animation.

And, as this is still considered an experimental feature by browser vendors, we need to write the same code for webkit:

@-webkit-keyframes spin{
	0%{
		opacity:0.2;
		-webkit-transform:scale(0.2) rotate(0deg);
	}
	15%{
		opacity:1;
		margin:-263px 0 0 -358px;
		-webkit-transform:scale(1) rotate(1090deg);
	}
	90%{
		opacity:1;
		top:50%;
		-webkit-transform:scale(1) rotate(1090deg);
	}

	100%{
		top:500%;
		opacity:1;
		-webkit-transform:scale(1) rotate(1090deg);
	}
}

With this our spinning newspaper effect is complete!

Conclusion

As with any cop drama from the 1930s, and the 1930s themselves for that matter, this tutorial has to come to an end. Hope you folks had as much fun following the tutorial as I had writing it. If you have any thoughts or suggestion be sure to share in the comment section. You can also download a PSD with the newspaper template, so you can make your own, below.

Go to Source

This logo looked like the perfect candidate to do so, since it uses huge pixels and only a couple of colours (4 shades of green). With only little HTML, CSS and jQuery, I was able to generate this logo with not much effort.

  

Did you check out the demo to see what we’re going to do? This is how you can generate this pixellogo yourself!

Read more…

Go to Source

Here, I’ll continue the theme, but focusing on modern design movements (mainly 20th century) that have lessons to teach us and inspiration to offer.

The challenge with modern design is that there are dozens of movements, and they all overlap each other in a tangled mess.

Things are no longer as simple as a century-long Renaissance or Baroque period. To keep it manageable, I have selected a few movements to review here.

Arts and Crafts movement

We’ll begin our journey with the Arts and Crafts movement, which began around 1860 and flourished until about 1910. The movement emphasized craftsmanship and simplicity and was sensitive to the actual materials used to create the work.

Fundamentally, the movement was a direct response to the modern machine age, and it challenged it in its style and decoration. With a focus on simplicity, functionality and craftsmanship, the Arts and Crafts movement offers many things that the modern designer can draw on.

Granted, drawing principles from a movement that was fundamentally opposed to modern machinery and applying them to web development presents an obvious problem. But let’s see what we come up with.

Preoccupied with purpose and technological simplicity, designers of the period relied heavily on ornament and patterns, while still attending to overall quality and style. These elements were so fundamental that a book from this period was devoted to them, The Grammar of Ornament.

Ornament, patterns and refinement

This page from The Nature of Gothic, as printed by Kelmscott Press, shows painstaking craft and an aesthetic that is fundamentally opposed to mass production. How can we apply this to web design? The leap is rather difficult, but I think we have a winner here:

Despite the fact that a website, at its most basic level, represents an embrace of technology, this particular website is a fantastic bridge between the Arts and Crafts style and the web.

For starters, it has a remarkably handcrafted feel to it. The background most likely was handcrafted, before being converted to digital vector format. The website clearly reflects the subject matter (i.e. letterpress), which itself has a direct connection to craftsmanship. Most of all, the lack of graphics or decoration, in addition to its refinement, truly makes this fit the style.

Another interesting, though very different, example is Zaarly, which packs a distinct visual punch. The website combines modern functionality with a craft-oriented style. The hand-rendered illustration and natural color palette connect this design to tangible handicrafts. In many ways, the designer distances this design from the cold, sterile technologies used to create it, going instead for a personal, natural feel.

The website certainly doesn’t abstain from modern tools, though, with its Facebook, Twitter and Google Maps integration. In fact, the beautiful design would be useless without its modern application and relevance.

Let’s consider the impact of this style. One might assume that it was randomly decided on. I would propose that it was carefully calculated. It represents a radically different approach than that of Craigslist, a competitor of Zaarly’s. By making the website personal and less “digital,” the designers have attempted to appeal to people on a totally different level. The design serves a very definite purpose with the product, which is totally in line with the ideals of the Arts and Crafts movement.

Art Nouveau

The Art Nouveau movement was popular right around 1900 and is most frequently recognized for its impact on architecture of the time. The style captured floral and plant elements, with stylized flowing lines. This combination of elements makes art from this period relatively easy to identify.

The beautiful poster Maude Adams as Joan of Arc by Alfons Mucha embodies all of the core principles of Art Nouveau. Clearly visible are the floral patterns and flowing lines. The style of the painting is highlighted by the technique used to create it, without distracting from the absolutely beautiful result. It’s like a combination of the realistic and decorative elements of other more stylized movements (Impressionism, for example).

I couldn’t have stumbled on a better example of Art Nouveau elements in modern design than idesign’s website. The flowing elements at the top are the most obvious reference to this period. Throw in the other elements, including the rooster, bicycle and hand, and you have a very clear homage to the early 1900s.

While the connection to Art Nouveau is clear, the modern touches are what make the website truly outstanding. Foremost are the simple animations at the top of the page. Little elements like these go a long way to bringing the page to life.

Bauhaus

Bauhaus was a German school that ran from about 1919 to 1933. It had a tremendous influence on modern design and almost all forms of art that followed, especially the commercial arts.

As most movements do, the Bauhaus style contrasted starkly with its predecessors. Absent are the ornamentation and decoration of the Arts and Crafts and Art Nouveau styles. In its place is the merging of design and function, which was in many ways the birth of true minimalism. The attempt to harmonize function and design is remarkably similar to the user experience efforts of the web design community today.

The Barcelona Chair above was designed by Mies van der Rohe, one of the directors of Bauhaus. The simple chair perfectly captures the aesthetic. It is streamlined and incredibly stylish and yet totally designed to perform its function, which are the reasons it is still being used today, 80 years on.

Finding minimalist websites is remarkably easy, but finding ones that also embrace the Bauhaus style is a tad more difficult. Identity Designed does it effectively. The website clearly embraces minimalism but goes deeper.

Function and design

In keeping with the Bauhaus style, Identity Designed has a minimalist website and has ensured that it functions extremely well. The header of the page shows simple branding, “ID.” From there, we have a simple clear menu bar; the user instantly knows how to navigate the website. It follows conventions while functioning beautifully.

Another feature of Bauhaus is its use of sans-serif typefaces. After all, a typeface can perform its function perfectly well without all of those extra serifs, ears and arms! Not to mention, sans-serif fonts can be remarkably beautiful in their own right.

Finally, notice how carefully color is used. In the Bauhaus style, stark color combinations are almost non-existent. Identity Design uses color to distinguish links, but otherwise, color is used for only the subtlest of decoration.

International Typographic Style

Also known as the Swiss Style, the International Typographic Style originated in Switzerland in the 1950s. On the surface, it embodies the functional and minimal style of Bauhaus. As you dig deeper, you’ll find a focus on typography, geometric design and grid systems.

Some of the biggest names in graphic design emerged from this movement: Paul Rand, Max Miedinger. Miedinger and Eduard Hoffmann created the Helvetica typeface, which some of you may have heard of.

(Image: Joe Kral)

The sample above from Neue Grafik magazine exemplifies the International Typographic Style. Notice the almost complete reliance on typography, the strong adherence to a grid and the left-justified text.

Focus Lab’s website is not 100% in the International style, but in a way this makes it an even better example. After all, such comparisons are meant to demonstrate how these ideas from modern art can be adapted to current needs and aesthetics.

Clearly visible on Focus Lab’s website is refined typography as a stylistic element. The type doesn’t just communicate information: it is the primary design element on the page (even if it’s not quite Helvetica).

Also, the grid is critical to the effectiveness of the page. And while perhaps a subtler detail, all of the text is left-justified, very much in keeping with the style. The website is a stunning example of modern web design and proves that we can leverage any style to suit our needs.

Pop Art

Pop Art also came out of the 1950s. It originated in Britain and found its way to the US. Andy Warhol is perhaps its best known proponent.

Once again, we see an art movement challenging tradition. Pop Art incorporates everyday items like comic books, celebrity photographs, household objects and even advertising.

One of the earliest examples of Pop Art is this collage by Richard Hamilton, titled Just what is it that makes today’s homes so different, so appealing? This amalgamation of disparate elements of 1950s life was a striking, perhaps shocking, demonstration of this style.

Finding websites that leverage the Pop Art style is hard, but they do exist. One is Mixbits.com:

Perhaps the biggest difference between this and the Pop Art style is that Mixbits.com is actually meant to be used, not just viewed. However, the interface does carry elements of the style. What does Pop Art aim to achieve other than to change our perspective on what art is? Mixbits.com’s interface challenges our expectations of what a web app should look like. And it works brilliantly.

We do not know the inspiration behind the Pelican Hotel’s website, but the visuals here do seem to evoke Richard Hamilton’s collage. Commercial considerations keep the designer from pasting together everyday items the way Hamilton did, but there is something collage-like about the way this page is put together.

Punk

Not everyone would consider the 1970s punk rock scene a milestone in modern art and design. But its influence is far-reaching and rather persistent. Not to mention, it forms a nice contrast to the minimalism of Bauhaus.

Some of its principal features are collage, gritty visuals, shocking content, and intense bright colors like fluorescent pink and yellow. One of the most memorable products is this album cover for the Sex Pistols’ single God Save the Queen:

This album art perfectly embodies the punk rock era: shocking graphics, collage and low production value. Let’s consider a couple of website designs to see how this style lives on.

Fortunately, many of the designers who adopt this aesthetic do not abandon principles of usability in the process. Take the two examples shown above, Serge Seidlitz’s website and the more commercial approach of Puma Talk. Granted, neither of these websites is literally “punk rock.” Neither is offensive in the least, and neither has a lo-fi feel. Still, the websites are rooted in the style, even while being heavily modernized.

Rancid is truer to the punk rock spirit. The website for this current semi-punk band lacks the offensiveness, but it certainly has the lo-fi hacked-together feel. And it suits the band well.

If you’re thinking of adopting this style, consider its effect on your audience. Puma Talk, for example, leverages a pseudo-punk style to connect with a young audience, even though users wouldn’t be old enough to have experienced the punk movement firsthand. Don’t let the style dictate the project. Instead, leverage modern techniques and approaches, and ensure that your website is relevant to current audiences.

Conclusion

Trying to unravel the countless art movements that have occurred in the last 100 years would be mind-boggling. With the globalization of communication, the styles have intertwined to the point of being overwhelming. But this is not a lesson in art history. Rather, my goal was to shed light on the origins of some of the styles we employ on the web today.

Today’s web designers leverage ideas that are decades, if not centuries, old. The true innovators of any period are able to leverage the ideas of the past, adapt to modern needs, and create fresh approaches that shape future generations of designers.

I hope this brief introduction to various art movements demonstrates the power of looking to the past. Creativity is never inhibited by considering what others have done. On the contrary: understanding the lessons others have learned helps us adapt their ideas to new styles.

Patrick McNeil is a freelance writer, developer and designer. In particular, he loves to write about web design, train people in web development and build websites. Patrick’s passion for web design trends and patterns can be found in his books on TheWebDesignersIdeaBook.com. Follow Patrick on Twitter @designmeltdown.

Do you see any other 20th-century styles represented prominently on today’s websites?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: s2MX9m

Vivid Icon Set – 240 High Quality Icons for just $18

Source

Go to Source

It’s not quite like a “regular” blog platform (like WordPress or Blogger) and it’s not microblogging either. It’s tumblogging, but a lot of people don’t know what thadet means.

And it can be a little daunting for designers who are trying to figure out how to develop Tumblr themes considering there are seven post types (or eight if you count photo slideshow posts as separate from regular photo posts).

One thing that Tumblr definitely has going in its favor is the number of themes that are now available. Tons of free themes and a growing premium theme marketplace make it easy to find a theme you like, and most are easily customizable even if you don’t know tons of code.

Below are more than 70 awesome Tumblr themes, more than half of them free.

Free themes

Imperial

Demo | Details

Imperial is a feminine theme with a patterned background and flag detailing. It’s a fairly narrow theme, with a lavender color scheme.

Ernest

Demo | Details

Ernest has an almost corporate look, with textured granite background and a conservative color scheme. The typography is much more readable than many themes.

Miss Sourpuss

Demo | Details

Miss Sourpuss has a linen background, rounded corners, and accents in shades or orange. It’s a subtle, understated theme with great typography.

Boxes

Demo | Details

Boxes is very well-suited for image-heavy tumblogs, though it also works for those with more text posts. Shadow details make it unique, while the grid-based layout adds structure.

Lines

Demo | Details

Unsurprisingly, Lines has a ton of line details. The design is minimalist, with good typography and a muted color scheme.

Solstice

Demo | Details

Solstice has a muted striped background, handwritten script typography, and a gray and white color scheme. It’s a very understated theme.

Stacky Pro

Demo | Details

Stacky Pro has a stacked grid layout, with columns that reposition themselves based on your browser width.

Sam’s Theme

Demo | Details

Sam’s Theme has a large photo background and understated typography. The muted colors of the background give it a retro feel.

Native Citizens

Demo | Details

This is a simple, minimalist theme with two content columns, a monospaced font, and a gray and white color palette.

Retro Candy

Demo | Details

Retro Candy has oversized typography, rounded corners, and a muted stripe background.

Serifs & Scribbles

Demo | Details

Serifs & Scribbles has a pencil-drawing look to it, with custom icons for each post type. It even includes a hand-drawn search bar and RSS feed logo.

Effector Theme

Demo | Details

The Effector Theme comes in two color schemes (light and dark). The shadow details and thought put into each post type sets it apart from many other free themes.

Boston Polaroid

Demo | Details

Boston Polaroid is perfectly suited to showing off large images (which resize based on the browser viewport size). It has a muted gray color scheme and a subtle textured background.

Megapixels

Demo | Details

Megapixels has a dark lavender pixelated background and transparency effects.

Lightweight

Demo | Details

Lightweight is a minimalist, dark gray and white, one-column theme. It includes round icons for each post type and very readable typography.

Centennial

Demo | Details

Centennial is a simple black and white theme with a very formal, traditional look despite its minimalist aesthetic.

Legrand

Demo | Details

Legrand is a retro-modern theme with muted colors and 3D effects. The thin sans serif typeface used for everything but the header is quite stunning and gives the design a mid-century modern feel.

Yay, Hooray!

Demo | Details

Yay, Hooray! is a very narrow, minimalist theme with rust-colored accents.

Descriptive

Demo | Details

Descriptive is a minimalist theme with a light blue background and dashed line details.

fluidMod

Demo | Details

fluidMod uses transparent post backgrounds over a large, multi-colored background image. It’s an understated theme that still packs a lot of visual punch.

Peach

Demo | Details

Peach is a mostly-gray theme with pink and pastel orange accents and header image. It has a three-column grid layout.

Phobic Man

Demo | Details

Phobic Man has a blue color scheme with orange accents and rounded corners. Flag details and shadow effects set it apart from the competition.

Significance

Demo | Details

Significance is a gray and white grid-based theme that’s perfect for portfolio or other image-heavy sites.

Pulp

Demo | Details

Pulp has a bold red background, and simple gray color scheme for everything else.

Punch of Intuition

Demo | Details

Punch of Intuition has a large photo background, and simple gray and white color scheme otherwise. Line detailing on the posts and in the sidebar add an extra bit of polish.

The Stitch

Demo | Details

The Stitch uses hand-drawn elements and an accordion slider for displaying posts. The basic gray color scheme is offset by brightly colored post type banners.

The Curator [Beta]

Demo | Details

The Curator is best suited for photo and video posts, due to the typography being incredibly tiny for everything else. It’s a great minimalist theme, though, with a textured background.

go CRAZY!!

Demo | Details

go CRAZY!! uses web fonts and multi-colored accents against a gray background.

Surreal

Demo | Details

Surreal is a minimalist gray theme with a lightly textured background and shadow details behind each post.

Mellow Yellow

Demo | Details

Mellow Yellow is a bold, retro-styled theme with photo corner accents on each post and a textured background.

Hobo

Demo | Details

Hobo is a grid-based theme with content columns that shift depending on your browser width. The warm gray color scheme and round post type icons are unique.

Firsts

Demo | Details

Firsts is a multi-colored grid theme with two columns and a gray background.

Inkhorn

Demo | Details

Inkhorn is a modern theme perfectly suited for text posts. The two-column layout is a bit unexpected for the overall style.

Luxury Notes

Demo | Details

Luxury Notes is a notepad-styled theme with a yellow lined paper content area background and a woodgrain main background.

Grunge Era

Demo | Details

Grunge Era is a grungy single-column theme with lots of textures and multi-colored accents.

Luminescence

Demo | Details

Luminescence has a multi-colored bokeh background and a transparent sidebar. Letterpress effects for the post icons are a nice touch.

With Style

Demo | Details

With Style has a multi-colored noise-filled background and hard shadows behind each post. The header includes a letterpress effect behind the text.

Impaler v.2

Demo | Details

Impaler has a grungy look, with animated menus that become blood-soaked in their hover state.

The Elephant in the Room

Demo | Details

The Elephant in the Room has a minimalist design with four elephants in the header.

Clean & Simple

Demo | Details

Clean & Simple is an apt name for this theme. It has a minimalist design with bold sans-serif typography.

Revista

Demo | Details

Revista is a grid-based theme with a gray color palette and excellent typography.

Premium themes

Nautical ($49)

Demo | Details

Nautical has an antique look, with bespoke textures and woodcut illustrations. It includes unique post illustrations and Disqus comments integration.

Vintage Scrapbook ($49)

Demo | Details

Vintage Scrapbook includes distressed typefaces and a vintage look and feel. It also has a highly-customizable sidebar area.

Stockholm ($49)

Demo | Details

Stockholm has a minimalist look and is designed to work well with blogs that are heavy on images. It includes subtle patterns and simply typography, and also has support for Disqus comments and Typekit integration.

Zurick ($49)

Demo | Details

Zurich was designed specifically for people who love Helvetica. It includes meta data that fades in and out as visitors scroll, as well as social media links.

High Res Theme ($19)

Demo | Details

High Res is a very minimalist theme with automatically resizing images. It takes advantage of larger screen sizes and browser viewports, both for photos and video.

Etcetera ($19)

Demo | Details

Etcetera is a hand-made premium theme that combines real and graphic elements in a scrapbook/collage style. It’s easily customizable and supports Disqus comments.

Leica ($49)

Demo | Details

Leica is a gallery/portfolio theme with four columns of images. It’s perfect for photographers, illustrators and designers. It includes customizable link, title, and navigation colors, and a special layout for custom pages, among other features.

Antiquity ($9)

Demo | Details

Antiquity has a muted color scheme and surprisingly modern look. It includes custom fields for Twitter and Flickr, as well as support for Disqus comments.

Depth ($19)

Demo | Details

This blue and purple theme from Obox includes transparency effects and a modern design. It also has support for Disqus comments, Flickr stream integration, and custom page templates.

National Park ($19)

Demo | Details

The National Park theme has a retro-inspired clean design, with a great header and typography.

Sunrise ($49)

Demo | Details

Sunrise has a hand-made style but a simple design, with a mostly-pastel color scheme. It includes hand-drawn icons for each post type, as well as support for Disqus comments.

Wordographic ($9)

Demo | Details

Wordographic is a theme specifically designed for text-heavy tumblogs. It has a focus on beautiful typography, as well as some interesting post formats (the Quote post is especially well thought-out).

Ascender ($49)

Demo | Details

Ascender comes in both dark and light varieties, and is built on a flexible grid. You can also customize the color scheme, add Typekit fonts, and choose between two different post sizes (250px or 400px).

Inspire Well ($49)

Demo | Details

Inspire Well is a flexible grid-based theme with customizable colors, background image, and more than 30 other options. It also has three different post sizes (1, 2, or 3 columns wide) that are easy to activate with tags.

Solaris ($9)

Demo | Details

Solaris is a minimalist theme with lots of circular graphics. There’s also an optional dark color scheme.

MARS ($49)

Demo | Details

Mars has a large background image and three layout modes (default, wide, and columns). Mars is also Typekit ready, includes social features, and has many other customization options.

Savory ($49)

Demo | Details

Savory has a slightly grungy feel, with textures and stitching detail. It’s Typekit ready, and includes color customizations and a customizable background image.

Paris Nights ($49)

Demo | Details

Paris nights has a beautiful collage style layout, complete with lighting effects in the header.

Rank & File ($49)

Demo | Details

Rank & File is a clean, modern theme with a more traditional blog layout than many Tumblr blogs. It includes a number of theme customization options, including color options and a customizable header image.

Pixelated ($18)

Demo | Details

Pixelated is a simple theme with a graphic, pixelated background. All post types are supported, and CSS3 features are also integrated (including web fonts).

Meteoro 2028 ($15)

Demo | Details

Meteoro 2028 is a robust, minimalist portfolio theme that has support for both images and video (YouTube and Vimeo at the moment). The color scheme can be fully customized, and it includes a custom slideshow for photosets.

Gallera ($15)

Demo | Details

Gallera is an elegant gallery theme with a subtle, grungy textured background. It’s great for designer, artists, and photographers who want to use Tumblr for their portfolio.

Boxxed ($10)

Demo | Details

Boxxed has a modern, colorful style and includes Twitter and Flickr integration in the sidebar. It has a transparent background for easy color changes, as well as support for all post types.

Desire ($17)

Demo | Details

Desire is a dark, minimalist theme with support for all of Tumblr’s newest features. It also includes an array of jQuery effects and custom typography.

Polaroid ($12)

Demo | Details

Polaroid is an easily-customizable theme with a clean and modern look. The background image, link colors, sidebar and other features can all be changed to suit the look you want.

Gothic Dream ($12)

Demo | Details

Gothic Dream is a dark theme with gothic styling. The background can be customized (image or color), as can the fonts, and colors of links and other elements.

Cherry ($11)

Demo | Details

Cherry is a very girly theme, well-suited to personal Tumblogs. The color scheme is made up mostly of pastels, with simple icons for each post type and a patterned background.

Fanfarron ($10)

Demo | Details

Fanfarron is a very elegant theme, with an understated background. It includes a number of customization options, Disqus comments, and a Flickr widget.

Vintage Sky ($20)

Demo | Details

Vintage Sky has a muted color scheme and a pretty Fail Whale illustration in the header (with cloud animations). You can customize the background image, header image, and many other aspects of the theme.

Scribble ($9)

Demo | Details

Scribble is a hand-drawn theme with a crumpled paper background texture. Unlike many hand-drawn designs, though, it has a very structured look, as if a straight-edge had been used in the drawing process (unlike the organic lines of most designs of this style).

Nova ($49)

Demo | Details

Nova has a clean grunge look, with paper-like accents and three color schemes. It includes nearly 50 appearance options, two layout modes (standard two-column and wide one-column), and customizable colors and background and header images.

Compiled exclusively for WDD by Cameron Chapman.

Do you use or design themes for Tumblr? What’s your favorite Tumblr theme? Let us know in the comments!

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: s2MX9m

Vivid Icon Set – 240 High Quality Icons for just $18

Source

Go to Source

Today, we’ll learn how to create a simple but effective anaglyph illustration.

Before we begin, I suggest you buy a pair of 3-D glasses or read this guide on how to create your own.

We’ve included the Photoshop and Illustrator files at the bottom of this post; download them to explore more.

If you follow this tutorial to create your own anaglyph, please share your results and experience with us in the comments.

Step 1

First, open Adobe Illustrator and create an A4 canvas (21 × 29.7 cm or 8.27 × 11.69 inches).

Step 2

Create two circles using the Ellipse tool (the shortcut is L). Draw an elliptical shape on the bottom and a perfect circle above it (holding Shift + L will make it proportional).

Step 3

Use the Pen tool (P) to create the fuse. To get square shapes using the Pen tool, hold Option/Alt and click on the point on the curve that you want to turn into a vertex.

Step 4

To create the flame, just repeat the same procedure. Practice drawing round and square shapes with the Pen tool; with time, it will get easier.

Step 5

Now let’s add some color to our little bomb. Select the circle and bottom of the fuse using the Selection tool (V), and go to the Gradient panel. Let’s create a radial gradient that fades from white to black, using a perfect white (C:0, M:0, Y:0, K:0) and perfect black (C:0, M:0, Y:0, K:100).

Using the Gradient tool (G), position the gradients as shown below. And add a 10-point black stroke to both, which should give you something like this:

Step 6

Let’s add some plain color to the fuse. Select it and choose a dark yellow (C:36, M:46, Y:100, K:10), with no strokes.

Step 7

Select the flame shape using the Selection tool (V). And in the Gradient panel, set a classic flame gradient, using some yellow (C:5, M:0, Y:90, K:0), orange (C:0, M:90, Y:85, K:0) and brown (C:15, M:100, Y:90, K:79).

Don’t forget: unless it’s a radial gradient, it will not look as soft as we want. Using the Gradient tool (G), place it as in the screenshot below:

Step 8

Remember the first ellipse we did in the beginning? Select it, and choose a total black fill.

Now got to Effect → Blur → Gaussian Blur, and set a radius of 40 pixels.

You should get this shadowing:

Step 9

Now let’s create some reflections. Using the Pen tool (P), draw this shape with a white fill:

Open the Gradient panel, and create a white gradient with a transparency. Just set the opacity of one of the colors to 0% to get this effect:

Open the Transparency panel, and set the opacity of the two shapes to 50%.

Our bomb is done. Now let’s create the anaglyph effect.

Step 10

Open Adobe Photoshop and create a 550 × 550-pixel canvas, with a 72 DPI.

Step 11

Copy the bomb from Illustrator (Command/Control + C), and paste it in Photoshop (Command/Control + V). Pasting it as a Smart Object is better because you will be able to scale it without it looking pixelated.

Step 12

Create a simple gray-to-black gradient background using the Gradient tool (G).

Step 13

By clicking on the bomb layer using the Selection tool (V), you can select only the shape of the bomb, which is quite useful when you need to work with only this space.

Step 14

Let’s create a new layer (Command/Control + Shift + N). With the bomb selected, go to the Color panel and choose a blood red (R:255, G:0, B:0). Using the Paintbucket tool (G: it’s in the same place as the Gradient tool — just hold your mouse over it), fill the entire selected area.

Step 15

Go to the Layers panel, and duplicate the original bomb layer by pressing Command/Control + J. Then, group this new layer with the red shape layer, and call the group “Red.”

Step 16

Select the red shape layer. In the Blending Modes panel, choose the one called “Screen.” You should get this result:

Step 17

Let’s repeat the same procedure of creating a new layer, filling it with color, duplicating the bomb layer, creating a group (“Blue”) and blending the color layer with the bomb layer. This time, though, use a light blue (R:0, G:240, B:255).

Step 18

Pay attention to these next steps, or else you might not achieve the 3-D effect. First, select the group “Red,” and open the Blending Modes panel. Select the one called “Multiply.” Repeat this procedure with the “Blue” group. Your image should have gotten a bit darker.

Step 19

Using the Selection tool (V) move the “Red” group gently to the left and the “Blue” group to the right; not too much, just a bit so that they are out of the center. This will create a depth effect, so put on your 3-D glasses to see if it works.

Step 20

Let’s try some depth effects. Group all of the layers (Command/Control + G), and name it bomb_1. Duplicate the group, and call the second one bomb_2.

Using the Free Transform tool (Command/Control + T), resize bomb_2 and flip it horizontally (right-click while using the Free Transform tool). Place this group behind the first one. You should get this, the final result:

The result

I hope you had a great time following this tutorial and that you learned a bit about how to create anaglyph images. There are a lot of other ways to achieve this effect; this is just a introduction. Keeping working hard, and please share your results with us.

Written by Marcos Torres. He is a Brazilian illustrator and art director who works for a marketing agency and for Abduzeedo as a tutorial designer. You can see more of his work by accessing his website or by following him on Twitter.

So, what were your results from following this tutorial?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: s2MX9m

Vivid Icon Set – 240 High Quality Icons for just $18

Source

Go to Source

Today, we’ll learn how to create a simple but effective anaglyph illustration.

Before we begin, I suggest you buy a pair of 3-D glasses or read this guide on how to create your own.

We’ve included the Photoshop and Illustrator files at the bottom of this post; download them to explore more.

If you follow this tutorial to create your own anaglyph, please share your results and experience with us in the comments.

Step 1

First, open Adobe Illustrator and create an A4 canvas (21 × 29.7 cm or 8.27 × 11.69 inches).

Step 2

Create two circles using the Ellipse tool (the shortcut is L). Draw an elliptical shape on the bottom and a perfect circle above it (holding Shift + L will make it proportional).

Step 3

Use the Pen tool (P) to create the fuse. To get square shapes using the Pen tool, hold Option/Alt and click on the point on the curve that you want to turn into a vertex.

Step 4

To create the flame, just repeat the same procedure. Practice drawing round and square shapes with the Pen tool; with time, it will get easier.

Step 5

Now let’s add some color to our little bomb. Select the circle and bottom of the fuse using the Selection tool (V), and go to the Gradient panel. Let’s create a radial gradient that fades from white to black, using a perfect white (C:0, M:0, Y:0, K:0) and perfect black (C:0, M:0, Y:0, K:100).

Using the Gradient tool (G), position the gradients as shown below. And add a 10-point black stroke to both, which should give you something like this:

Step 6

Let’s add some plain color to the fuse. Select it and choose a dark yellow (C:36, M:46, Y:100, K:10), with no strokes.

Step 7

Select the flame shape using the Selection tool (V). And in the Gradient panel, set a classic flame gradient, using some yellow (C:5, M:0, Y:90, K:0), orange (C:0, M:90, Y:85, K:0) and brown (C:15, M:100, Y:90, K:79).

Don’t forget: unless it’s a radial gradient, it will not look as soft as we want. Using the Gradient tool (G), place it as in the screenshot below:

Step 8

Remember the first ellipse we did in the beginning? Select it, and choose a total black fill.

Now got to Effect → Blur → Gaussian Blur, and set a radius of 40 pixels.

You should get this shadowing:

Step 9

Now let’s create some reflections. Using the Pen tool (P), draw this shape with a white fill:

Open the Gradient panel, and create a white gradient with a transparency. Just set the opacity of one of the colors to 0% to get this effect:

Open the Transparency panel, and set the opacity of the two shapes to 50%.

Our bomb is done. Now let’s create the anaglyph effect.

Step 10

Open Adobe Photoshop and create a 550 × 550-pixel canvas, with a 72 DPI.

Step 11

Copy the bomb from Illustrator (Command/Control + C), and paste it in Photoshop (Command/Control + V). Pasting it as a Smart Object is better because you will be able to scale it without it looking pixelated.

Step 12

Create a simple gray-to-black gradient background using the Gradient tool (G).

Step 13

By clicking on the bomb layer using the Selection tool (V), you can select only the shape of the bomb, which is quite useful when you need to work with only this space.

Step 14

Let’s create a new layer (Command/Control + Shift + N). With the bomb selected, go to the Color panel and choose a blood red (R:255, G:0, B:0). Using the Paintbucket tool (G: it’s in the same place as the Gradient tool — just hold your mouse over it), fill the entire selected area.

Step 15

Go to the Layers panel, and duplicate the original bomb layer by pressing Command/Control + J. Then, group this new layer with the red shape layer, and call the group “Red.”

Step 16

Select the red shape layer. In the Blending Modes panel, choose the one called “Screen.” You should get this result:

Step 17

Let’s repeat the same procedure of creating a new layer, filling it with color, duplicating the bomb layer, creating a group (“Blue”) and blending the color layer with the bomb layer. This time, though, use a light blue (R:0, G:240, B:255).

Step 18

Pay attention to these next steps, or else you might not achieve the 3-D effect. First, select the group “Red,” and open the Blending Modes panel. Select the one called “Multiply.” Repeat this procedure with the “Blue” group. Your image should have gotten a bit darker.

Step 19

Using the Selection tool (V) move the “Red” group gently to the left and the “Blue” group to the right; not too much, just a bit so that they are out of the center. This will create a depth effect, so put on your 3-D glasses to see if it works.

Step 20

Let’s try some depth effects. Group all of the layers (Command/Control + G), and name it bomb_1. Duplicate the group, and call the second one bomb_2.

Using the Free Transform tool (Command/Control + T), resize bomb_2 and flip it horizontally (right-click while using the Free Transform tool). Place this group behind the first one. You should get this, the final result:

The result

I hope you had a great time following this tutorial and that you learned a bit about how to create anaglyph images. There are a lot of other ways to achieve this effect; this is just a introduction. Keeping working hard, and please share your results with us.

Written by Marcos Torres. He is a Brazilian illustrator and art director who works for a marketing agency and for Abduzeedo as a tutorial designer. You can see more of his work by accessing his website or by following him on Twitter.

So, what were your results from following this tutorial?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: s2MX9m

Vivid Icon Set – 240 High Quality Icons for just $18

Source

Go to Source

A good candidate for a one-page website is not super-heavy on content. You only have one page to get your point across, and there are only so many animations and tricks you can throw in before they get stale.

Plus, most one-page websites are unconventional in their layout. Trying to fit a lot of content onto one page without looking cluttered is pretty tough.

Potential uses vary, but some of the most popular candidates for one-page websites are personal portfolios and websites for businesses that sell only a few products or services.

If you qualify, make sure your website hits the mark. There are always certain things you have to follow through on when making any website, but the points below are especially critical to single-page websites.

1. Stay focused

Make everything as simple as possible for the audience. Chances are, if you are considering a single-page website, you probably don’t have a ton of content. That’s fine. We’re sometimes tempted to add a lot of fluff to our websites. Single-page websites don’t require any fluffing because their sole purpose is to get to the point. If you are a designer putting together a portfolio, present your best work; don’t get distracted by mediocre projects or your side t-shirt business.

Strip your website of any fluff, and get down to the stuff that matters. While this is a good strategy for any website, most multi-page websites can get away with a bit of fluff, because users will usually know where to find the information they want. With one-pagers, you get one shot, and if the information someone is looking for is not there, you’ll lose them.

There is no question about what this e-commerce website is selling.

This portfolio gets right to the point. A pretty wonderful minimalist design, too.

2. Give the layout a hierarchy

Along with maintaining the visitor’s focus, a single-page website is supposed to showcase your product or service. If you think about one-page websites you’ve come across, they probably have a singular purpose, whether to showcase an agency’s design work or to drum up interest in an upcoming event.

A great design and focused layout can help define your website’s purpose. You, as the designer, have the power to direct the visitor’s eyes where you want them to go. People naturally notice big things first and small things last, so use that to your advantage. Important things should not be the smallest or last things on the page.

Those large-font introductory paragraphs have become so popular on designer portfolios because they get to the point quickly and sound appealing to people looking for a designer. The last thing you probably want to see is what school they graduated from. But you do want to know what they specialize in and what kind of work they do.

Again, you have precious few opportunities to get your message across, so get it right. If you find that you have too much content to be able to do this, then consider going with a multiple-page website.

While this website makes several different points, even within this screenshot, we can pretty much tell what’s most important.

We can tell what this company does, but the visual hierarchy could be better.

3. Clear navigation

Some one-page websites are static pages whose navigation takes the visitor to external websites. For example, a musician might have a navigation option on their website labeled “Videos” that takes you to their YouTube account. Absolutely nothing is wrong with this, and it even makes things easy (especially for non-coders). The only thing is that visitors should know when they are being directed to an external page.

If your one-page website is to showcase a product, and your purchasing link sends customers to an external payment platform without telling them so, you could lose some sales.

Your aim is to keep everything simple. Redirecting users to external websites without warning can be confusing. They might assume that the link is broken or incorrect. Consider using icons (plenty of free ones are out there) or headings to let visitors know where they’re headed.

Here is what not to do. The links at the top take you outside of the website with no warning. This really threw me off.

The design and coding of this website are very unusual. Nevertheless, links to external pages are distinguished by the green circles, and they’re labeled as such.

4. Go design crazy

Now we get to the fun part: using a single-page website to show off. You don’t want the website to be boring or repetitive, so go nuts. Take the design to the next level, and think outside the box. An unorthodox design is fine to draw attention to your product and make it memorable.

One-pagers are becoming synonymous with great design, because you can do more with the bigger canvas. You aren’t forced to use the same background everywhere; you change it across the sections. Scrolling through one-page websites is often like thumbing through a magazine or a well-assembled slide presentation. Exploit the possibilities.

Make the design great, whether by using big pictures that span the full browser window or creating a great illustrated background. You’ll get bonus points and may end up getting featured in Web design showcases.

This design is breathtaking, something like a poster. And the rest of the website does not disappoint.

The cleanness of this design (and the code) is amazing. It makes you stop and stare.

5. Go coding crazy

Much like with the design, you want to show off your coding skills as well. Single-page websites are supposed to be interacted with. The user experience is critical, so pay attention to the details. The code can take your website to the next level.

Some things to pay attention to are the colors and behavior of links (especially the hover selector); the look and behavior of forms (for example, making the form fit the design, and using AJAX and JavaScript validators); submission and error messages (used with the forms and some AJAX); and the grid and placement of content (as well as the content’s behavior in the browser window). All of these should align with the design.

A nice simple way to put code to work on a single-page website.

I may be biased because I like the trick where content loads on scroll, but the attention to detail in the code here is incredible all around.

6. Get it moving

In addition to taking care of the coding details, you can use code to create some movement and excitement on the page. Again, avoid being boring. Give your page a sense of life and motion; make it look like it’s moving with visitors. Add some fun animations or transitions to make the page stand out.

Languages such as jQuery and AJAX have become the standard for creating movement on a website. Whether you make the content fade in from different sides or make the background a slideshow, keep the audience engaged.

This background is an animation. I have no clue what the website is about, but it looks neat.

The transitions on this website are excellent. Love this one!

Kendra Gaines is a young freelance designer for Norfolk, VA. Visit her online portfolio at kgainez.com and follow her on twitter @kgainez

What other things are needed to make a one-page website special?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: s2MX9m

Vivid Icon Set – 240 High Quality Icons for just $18

Source

Go to Source

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

30 Beautiful & Creative Invitation Card Designs – http://ow.ly/5GTVq

Find the perfect color for your website – http://ow.ly/5GTW4

All About Helvetica Font – http://ow.ly/5GTX3

Why You Can’t Buy Creativity – http://ow.ly/5HBlS

UnderTheSite Detects The Technology Behind Any Website – http://ow.ly/5HBnc

Psychedelic Stop-Motion Clay Animations – http://ow.ly/5HBoO

How to Arrange Interface Elements – http://ow.ly/5HBvf

How to Teach Someone Graphic Design – http://ow.ly/5IA8s

What You Can Do With 1k of CSS Design (Showcase) – http://ow.ly/5GTYB

Recycled Art: 66 Masterpieces Made From Junks – http://ow.ly/5IAbq

Why designers should seek chaos and complexity first – http://ow.ly/5IAf3

Awesome Bar Code Designs – http://ow.ly/5GTZr

7 Lovely Things About HTML5 Markup – http://ow.ly/5GU0Q

Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: s2MX9m

Vivid Icon Set – 240 High Quality Icons for just $18

Source

Go to Source

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Unforgettable

Christmas in March

Designer irony

Can you relate to these situations? Please share your funny stories and comments below…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: s2MX9m

Vivid Icon Set – 240 High Quality Icons for just $18

Source

Go to Source

As developers are well aware, there are hundreds of APIs out there for doing almost anything you could imagine online. Some are better than others, and some are definitely more useful than others.

Below are forty of the most useful APIs out there. The included APIs will let you do everything from shortening a URL to displaying a book preview on your site to interacting with your Twitter account, and everything in between.

Please share with us which APIs have you found most useful and feel free to recommend others that we may have missed…

The Google APIs

Google offers dozens of APIs for web designers and developers.

Some are specifically related to popular Google products, like Gmail and Analytics, while others are more specialized and aren’t part of public programs.

All are free to use, of course. You can view all of Google’s APIs and code tools on their site directory.

• Feed API – The Google Feed API lets you download any public feed (including RSS, Media RSS, and Atom) and then combine them into mashups. It simplifies the mashup process by using JavaScript rather than more complex server-side coding.
• Places API – Google Places is a large directory of local businesses and attractions all around the world. The Places API lets you access that information and display it on your website, as well as display check-ins by users.
• Geocoding API – The Geocoding API lets you convert any address into geographic coordinates, which can then be used to place markers on a map.
• Tasks API – The Tasks API offers endpoints for reading, searching, and updating Google Tasks content and metadata.
• Analytics Management API – The Analytics Management API gives improved access to your Analytics data, and lets you fine-tune your requests to just pull the information and reports you need for your application.
• Blogger Data API – The Blogger Data API lets your application create and post new blog posts, edit or delete existing posts, and search for posts based on specific criteria.
• Books API – The Google Books API lets you integrate book searches into your application, and embed book previews on your site.
• Calendar API – The Calendar API gives access to many of the standard web interface tools and operations to your web app. Public calendar events can be searched and viewed without authentication, while authenticated sessions can access private calendars, as well as edit, create, or delete those calendars.
• Moderator API – Google Moderator is a tool for collecting ideas, questions, and recommendations from any size audience. The API allows your website or application to do the same.
• Prediction API – The Prediction API helps you make smarter apps that can analyze historic data and predict future outcomes. It can be used for things like recommendation systems, spam detection, upsell opportunity analysis, and more.
• Picasa Web Albums Data API – The PWA Data API can be used to create albums and upload, retrieve, or comment on photos, among other features. It’s been used for everything from powering digital photo frames to full-featured mobile clients and more.
• Static Maps API – You don’t always want an interactive map on your site. Sometimes a static map is just what you need. The Static Map API lets you embed static Google Maps onto your site, including custom styled maps.
• Directions API – The Directions API lets your users get directions from one point to another using a variety of travel modes from within your site or app, and doesn’t require a Google Maps API Key.
• YouTube APIs – YouTube has two APIs available: Player APIs and Data API. The Player APIs allow you to have an embedded player, or a chromeless player that you can then customize within HTML or Flash. The Data API lets your app perform a lot of the operations available on YouTube, including uploading videos and modifying user playlists.
• Webmaster Tools API – The Webmaster Tools API lets your client application use a variety of Webmaster Tools functions, including viewing sites, adding and removing sites, verifying site ownership, and submitting and deleting Sitemaps.
• Google Web Fonts API – The Web Fonts API makes it easy to add free web fonts to your website or application. Their collection of fonts grows on a continuous basis and already includes a huge variety.
• OpenSocial – OpenSocial can be used for building social applications, creating social app platforms, and sharing and accessing social data.

The Yahoo! APIs

Like Google, Yahoo! offers a number of APIs useful for developers. All are free to use and can help you integrate a variety of Yahoo!-owned web services into your app, including Flickr and Delicious.

• Answers API – The Answers API lets you access the collective knowledge contained within Yahoo! Answers. You can search Answers based on a variety of criteria (including specific user, category, and more), set your app to watch for new questions in the categories you choose, and track new answers from specific users.
• Contacts API – The Contacts API lets you access relationships in your Yahoo! address book. It reads a user’s Contacts information while respecting user privacy and permission settings.
• Delicious API – The Delicious API gives read/write access to Delicious bookmarks and tags.
• Fire Eagle Developer API – The Fire Eagle API helps you create location-aware websites and applications.
• Flickr API – With the Flickr API you can view, search, and manipulate photo tags, display photos from a specific user or group, and more.
• Local API – The Local API lets you access location-based information and user-contributed content.
• Maps APIs – Yahoo! offers a number of APIs for their Maps services, including an Ajax API, a REST API, and a No Coding API.
• Meme API – Meme is a multimedia light-blogging platform. The API lets you create apps that can read, post, and repost content through Meme.
• PlaceFinder – The PlaceFinder API, similar to Google’s GeoCoding API, and lets you convert a street address into geographic coordinates.

More APIs

Yahoo! and Google aren’t the only ones offering powerful APIs for designers and developers. A number of social media sites and others have their own API(s), including Twitter, Facebook, Yelp, Bit.ly, and many more.

• Twitter API – Twitter has a host of developer tools surrounding their API that let you create apps that interact with virtually any of Twitter’s functions.
• Facebook APIs – Facebook offers APIs for working with Credits, Ads, Chat, and more, including a couple of legacy APIs that are no longer actively supported. Also found here is the Graph API, which is the backbone of the Facebook Platform, and enables your app to read and write data to Facebook.
• Awe.sm – Awe.sm offers a number of developer APIs for integrating their social media campaign tracking tools into your app or website.
• Foursquare APIv2 – The Foursquare API not only allows you to create apps that interact with the Foursquare service, but also to use Foursquare’s place-related database as a standalone service.
• Ning API – Ning offers a set of APIs for developing desktop and mobile apps, custom network features, profile apps, and data importers.
• Soundcloud API – Soundcloud’s API includes tools for sharing, streaming, and customizing the Soundcloud player for your website.
• Klout API – The Klout API makes a variety of data available to developers, including Klout Scores, Network Influence, Amplification Probability, True Reach, and more.
• Social Mention API – The Social Mention API provides a stream of real-time search data from a number of social media services for integration into other applications. It’s free for personal and non-commercial use.
• Opus Social Media API – The Opus Social Media API can serve as a basis for developing a social networking and digital media site or app.
• Digg API – Digg offers an API that lets you access their newsfeeds for your own sites and applications.
• Yelp API – The Yelp API lets you access business listing info, business ratings, and review excerpts from Yelp in your application or website.
• Zillow Neighborhood Information APIs – Real estate site Zillow offers APIs that give access to neighborhood information that can be integrated into other applications. (They also offer a number of other APIs, including postings, property details, home valuations, and more.)
• Tropo – The Tropo API adds Twitter, IM, voice and SMS functionality to a variety of common programming languages. Development is free, though sending messages varies in price (with Twitter and IM messages currently free).
• Bit.ly API – Bit.ly offers an API for integrating URL shortening into your app or site.

Written exclusively for WDD by Cameron Chapman.

Which APIs do you use? Are there any sites you’d like to see an API from that doesn’t currently offer one? Let us know in the comments!

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: s2MX9m

Vivid Icon Set – 240 High Quality Icons for just $18

Source

Go to Source

Advertise here with BSA

A great carbon chrome social media icon set at decent size of 128 pixels by 128 pixels to be used within commercial web design projects.  The icon was constructed in Photoshop use and seamless pattern and effects to create a unique icon set.

License Details

The vector set can be used within commercial and non-commercial design projects. The vector set CAN NOT be redistributed on any other website without permission from the Creative Nerds team.

Preview

Advertise here with BSA

Go to Source

Advertise here with BSA

This is a great inspirational showcase of street paintings. Street paintings are created in the streets hence the name. What i really about street paintings is the 3D perspective of the of the paintings and the realism, they are truly remarkable paintings so spend some time check each one out.

1. 3D Street Painting – Escape of the Mummy

2. Escalators

3. metanamorph

4. 3D Shark

5. shopping mall in Gdansk

6. Indian Fantasy

7. Chess with the Dalai Lama

8. SEOUL

9. Smart Car

11. Jaguar Temple

12. Abu Dhabi

13. chalkfestival

14. ASIAN PAINTS

15. Milagro

16. Champions planet

17. Grants

18. mural art

19. Starmild

20. Orange

Advertise here with BSA

Go to Source

1. Pods CMS

www.podscms.org

Just as the name suggests, Pods CMS is a content Management plugin for WordPress. Gone are the days of people using WordPress for your blog alone. It’s fast becoming one of the industry’s standard CMSs, and if you’re thinking about using it for this purpose, then this plugin is possibly the most powerful of all.

Pods lets you add and display your own content types, but unlike WP custom post types, each bit of content gets its own table. You can:

• Create Pods (tables)
• Create conventional CMS input forms within WP Admin
• Add custom menu items to WP Admin
• Easily loop though data
• Create detail pages
• Use custom code to query database

I use Pods on 90% of WP builds. It’s brilliant.

If, for example, you need a manageable page on your website which includes a list of team members with a photo and name, then there’s no choice other than to manage the page via a CMS. Features like this are standard in most CMSs, but getting a basic WordPress installation to do this right out of the box is no simple task. This is where Pods CMS comes into its element. Functions like this are so much more simple – you can even customise the WP admin menu and add quick links to your pods.

The level of support is excellent considering this plugin is completely free! Pods is well documented in the user guide and there are a number of tutorials by Jonathan Christopher. The Pods team also run and manage a Q&A forum.

If you currently use Pods, please help the team by making a donation: http://podsfoundation.org/donate/

2. Gravity Forms

www.gravityforms.com

Every websites needs a form. Well, almost. This might be a contact form, sign-up form, registration form, payment form – the list is endless. Gravity forms does it all, quickly and easily, and you don’t need to code a thing!

The range of features is amazing:

• You can quickly and easily create a form by dragging and dropping fields
• Use default styling or custom CSS
• Data stored in a database
• Email data – customise email content and format
• Segregate and export data
• Add-ons : Mailchimp, Campaign Monitor, Paypal etc (Push data to other services)

It isn’t free, but if you’re familiar with building forms then you’ll know that it can be a time consuming process. Gravity Forms does all the hard work for you, and with so many extra features the personal package is a bargain at $39 (£25).

However, if you just want a simple form then make sure you check out Contact Form 7. A free, more basic plugin for your WP site: http://wordpress.org/extend/plugins/contact-form-7/

3. WordPress SEO by Yoast

www.wordpress.org/extend/plugins/wordpress-seo/

As it says on the tin, WordPress SEO is our recommend plugin for optimising and customising SEO on your website. Of course, to begin with you need to always make sure your site is structured and built correctly, but then you can use a plugin such as WordPress SEO to make sure all your posts and page titles are correct and meta descriptions are optimised.

Features list:

• Post titles and meta descriptions
• Robots Meta configuration
• Canonical
• Breadcrumbs
• Permalink clean up
• XML Sitemaps
• RSS enhancements
• Edit your robots.txt and .htaccess
• Clean up head section

4. Google XML Sitemaps

www.wordpress.org/extend/plugins/google-sitemap-generator/

A simple but very effective plugin, Google XML sitemaps will generate an XML sitemap to help search engines to index your website or blog more effectively.

Sitemaps are useful for one simple reason: They make it much easier for a crawler (such as Google) to see the complete structure of your site, and in turn, allows them to find as much of the content as possible in order to rank your website fairly.

5. Google Analytics for WordPress

www.wordpress.org/extend/plugins/google-analytics-for-wordpress/

Tracking visits to your site can be extremely useful. Who wouldn’t want to know which sections are the most popular, how long visitors spend on your site, where they come from and what devices they are using? l’m sure I don’t need to detail out why you should have Google Analytics on your WP site, but if you’re still unsure, check out the video above to find out more on all the great features. Convinced? Well what are you waiting for? Install this plugin to quickly and easily manage Google Analytics from your admin panel.

6. WP Super Cache

www.wordpress.org/extend/plugins/wp-super-cache/

The speed of your website is very important but unfortunately it’s often something that’s overlooked, especially by the less experienced developers. Many people don’t realise that your Google ranking is actually effected by the speed of your site, so if that sends alarm bells ringing, then you can use this tool from Google to check how your website is currently doing: http://pagespeed.googlelabs.com/

WP super cache works by creating static html versions of your dynamic pages. These are then served instead of more heaver (larger file size) and processor intensive files. These files will be served to users the majority of the time, increasing the speed of your WordPress site and improving the user experience.

The plugin is very simple to use; you simply install it and turn it on. This is great for the less technically minded, however you also have the option of editing the ‘advanced’ options to take full advantage of all the settings and features that WP Super Cache has on offer.

7. WP Minify

www.wordpress.org/extend/plugins/wp-minify/

This plugin also focuses around speeding up your website. It is recommend by WP Super Cache to work in tandem, but it can also be used on its own.

The plugin combines and compresses Javascript and CSS files to improve page load times. This is really important (especially if you have several plugins installed) because most WP plugins have their own CSS and JS files on top of all the ones you’re using for your basic pages. So as you can see, requests to these files could quickly get out of hand without you even realising it!

To be completely honest, this may not drastically improve the speed of your site for one single user, however if you have a more popular site it will certaintly improve the performance when delivering your pages to 100s of users at once.

8. Disqus

www.wordpress.org/extend/plugins/disqus-comment-system/

Disqus is a comment system that’s been designed and developed to improve and replace standard WordPress comments. It has a wide range of features – two of my favourites being threaded comments and the option to login with your Twitter or Facebook account.

More features include:

• Threaded comments and replies
• Notifications and reply by email
• Subscribe and RSS options
• Aggregated comments and social mentions
• Powerful moderation and admin tools
• Full spam filtering, blacklists and whitelists
• Support for Disqus community widgets
• Connected with a large discussion community
• Increased exposure and readership

Disqus is used by a wide range of websites, Mashable being one of the most famous.

Note: If you use any other comment plugins they will automatically be disabled if you use Disqu.

9. Custom Post Type UI

www.wordpress.org/extend/plugins/custom-post-type-ui/

Custom post types and taxonomies can be extremely useful if you have areas on your site where you want to be very specific with the types of data that you’re publishing. This plugin allows you to easily create and manage these areas though a simple UI which gives you options to label custom posts and add tabs to the sidebar based on the post type. If you’re still a little unsure and need a bit more info then check out this video which walks you through an example:

Alternatively, read this tutorial which details how to use Custom Post Type UI:
http://www.wpbeginner.com/wp-tutorials/how-to-use-custom-post-types/

10. BBpress

www.bbpress.org/

BBpress is forum / bulletin board software from WordPress that can be installed as a standalone application or as a plugin. It’s designed to be simple, light, and solid, and can also be extended with plugins just like the standard WordPress package.

Forums and discussion boards can be a great way to drive traffic to your website and increase return visits from users. If you want lots of features and tools you may need to install a number of plugins, however if you want a simple clean forum adding to your existising WordPress site then this is the perfect option.

We hope you’ve found some useful hints and tips here, but if there’s anything that you think we’ve missed off please leave your suggestions and comments below.

Go to Source

People in every trade do this, including those in photography, painting, sculpture and architecture. Why should web designers be any different?

Of course, we look to the very recent past through our countless web design showcases. But we can go much further back for inspiration, to the masters of old.

Let’s review some key art movements and the fundamental design principles they embraced. Based on these, we can review current web designs for elements to apply to our own work.

We’ll focus on Western art before the 20th century, and we will highlight only a few movements from among the many that took place.

The Renaissance

We’ll begin our journey in the mid-15th century, with one of the most well-known eras: the Renaissance. The height of this period saw some of the most notable artists of all time: Michelangelo, da Vinci, Raphael. One of the reasons this period was so critical, and our reason for starting here, is that it marked the transition from the medieval period to the modern era.

While many things shaped this period of art history, a few fundamental principles stand out: the use of perspective, the attempt at stability and balance in compositions, and the relentless push towards realism. To illustrate these ideas, I have selected da Vinci’s The Last Supper:

Perspective

The use of perspective was brand new to the Renaissance. The Last Supper shows an entire scene created using single-point perspective. The focal point is directly on Christ’s head, drawing the viewer’s gaze. Perspective not only increases the realism but directs the viewer’s attention to the most important area.

At first glance, the Skittles website does not scream Renaissance. But that period’s ideas can be leveraged in creative ways. Note the use of perspective on the title text, “Experience the rainbow.” It might seem purely decorative at first, but the trailing rainbow guides us down to the arrow below. It’s a more blatant use of perspective, directing the user down the page, fulfilling its purpose. The use is entirely appropriate in this case: the page scrolls infinitely, and content continues to loads the further down you go.

Stability and balance

Another key principle of the Renaissance is balance and stability in composition. The Last Supper has a sense of overall stability, enabled by the long table at the bottom of the scene. This grounds the painting and keeps it from feeling lopsided.

Also, notice the symmetry across the entire piece: six people on each side and a mirror image background, all revolving around the central figure.

And notice how Christ is shaped like a triangle, with his head at the peak. This was not accidental. This sort of balance and stability is a hallmark of Renaissance art.

Again, not much about Site Stitcher connects it to the Renaissance. However, we do see stability and balance effectively at work. First, the page has a basic triangular structure. At the top is the logo and branding; below is a summary and illustration of the company’s work; and all of this sits on top of the most critical information and action items. This not only creates structure, but leads viewers down an important series of steps. Consider your design and how you could leverage stability and balance to control the user experience and create a positive environment for your product.

Baroque

The Baroque period followed the Renaissance and peaked around the 17th century. In stark contrast to the Renaissance, it was marked by dynamic, active and highly dramatic images. Many paintings from this period appear to capture an active moment and feel very much alive, as if they could move at any second. The Baroque period continued the realism that began in the Renaissance, but it brought a drama and sense of motion that had not been done.

Some of the most important artists among the countless during this period are Caravaggio, Rubens and Bernini. Many of the most dramatic icons of certain European cities were created in this era. For example, the Trevi Fountain in Rome was designed by Bernini and is a prime example of Baroque sculpture.

We can relate the three most common characteristics of art from this period to modern design: drama, rich color, and intense dark and light contrast. Let’s look at Caravaggio’s Calling of St. Matthew:

Stark contrast

The characteristic Baroque quality of intense contrast between light and dark is clearly visible here. This fundamental principle of design is taught in our introductory design classes, so the topic certainly isn’t new to anyone. Still, let’s consider its role in this painting.

Most of all, it highlights the most critical elements. The individuals’ faces stand out boldly against the shadowy background, effectively focusing the viewer on the subject matter and minimizing the distraction of the environment. The technique is a way to ensure that the story in the painting is easily understood.

These are all qualities we want on the web. We want our designs to be easy to understand and, by extension, easy to use. We also want the critical elements — what we might call action items — to stand out. I’ve found a website that exhibits just these qualities:

On Cleatskins, we find many design elements that recall the Baroque period: the sharp contrast of black on white, the bold color palette of the products, and the action items. All of these focus you on the product itself, making for a website that is easy to use, easy to understand and highly effective.

Notice also that the images of the products have a sense of action to them. The photographic style captures a moment in time, and you feel as though movement is in progress, which is different from the style found in Renaissance art.

Drama

For a sense of drama, we turn to Golden Gopher. Everything about this design screams drama: the highly active main photograph, the rich colors and strong contrast, even the diagonal lines that add texture and motion. All of these add up to a sense of major performance, which is very much like football itself. This design embraces ideals in Baroque art and perfectly suits the topic at hand.

Rococo

The Rococo period followed the Baroque in the 18th century. During this period, artists shifted to lighter topics, focusing on things like aristocratic life and romance.

Art from this time is characterized by elaborate ornamentation and light graceful imagery. Some of the most influential artists of this period were Jean-Honore Fragonard, Watteau and Boucher. One of the most notable landmarks from this period is the Gardens of Versailles.

The ceiling painting and architecture of Wies Church, shown above, is a fantastic specimen of this period. Let’s see how the principles it embodies can be applied to modern design.

Ornamentation

To say that the ceiling is ornamental would be an understatement. It pushes the very limit of ornamentation. This is a signature of Rococo art. Ornamentation was used in unprecedented ways, adding flair and elegance like never before.

Let’s turn to the portfolio of Nathan Love. The ornamentation here defines the website, much as it would in a work from the 18th century. Of course, it has a modern flair, too, and incorporates some early-1900s elements, but the style is dominated by the aesthetic of the Rococo period.

Nathan has created a distinctive portfolio that represents his work beautifully. I particularly love the little illustrations dispersed throughout the website that give us a sense of his personality, but without interfering with the usability. The navigation and interaction are clear, despite the unusual approach.

Playful scene

The subject of many paintings from this period form an interesting contrast to the regality of the ornamentation. For example, The Swing by Jean-Honore Fragonard presents a lighthearted and trivial scene. But combined with the extreme ornamentation, it creates some internal tension.

Turning again to Nathan’s website, it has a rather serious style, and yet it is infused with some rather playful elements. The small animated figures, silly videos and lightheartedness of the content form a counterpoint to the overall seriousness of the aesthetic. These show the human behind the website, someone with personality and humor but who understands how to make a product look fabulous and serve its function.

This combination is exactly what a business owner wants when hiring a designer. As such, his website is a fantastic example of how Rococo principles can be adapted with clear intent. Of course, Nathan probably wasn’t thinking of the Rococo style when he was creating his website, but we see how it applies nonetheless.

Neoclassical

As usually happens in art, one generation rejects the previous and goes in the completely opposite direction. In the Neoclassical period, artists rejected the trends of the Rococo period, regarding them as over the top and trivial. They reverted to classical approaches, including those of the Renaissance and Classical Greek and Roman art.

The Neoclassicists embraced what they viewed as ideal standards to produce optimal results. This meant embracing the most notable artists, works of art and methods of these ideal periods.

The movement covered the mid-18th and early-19th centuries, giving us such artists as Jacques-Louis David, Rembrandt Peale and Antonio Canova, to name but a few. These artists adopted styles and subject matter from earlier eras. It’s easy for us to overlook that a painting such as Jacques Louis-David’s period-defining Oath of the Horatii would have been considered “classical” at the time.

Some of the defining characteristics of this period are simplicity, order, stability and classical subject matter. Let’s see how these could be applied to modern design, using David’s piece from this period.

Historical

David’s painting is above all a historical reference. It depicts a scene from a work of Classical Roman historian Livy. David was in effect recalling an era long past.

At first glance, you would be hard pressed to relate the Thread’s Not Dead website to this period in art history. But consider the design’s semi-retro style. The worn look adds age to the website, making it feel like the product of a bygone age. And yet it fits the modern web just fine. Thematically, it looks to the past, but topically, it is very relevant.

This could just as well describe Oath of the Horatii. The subject matter is historical, but it evokes the modern age (the soldiers on the left) embracing the past (the forefather on the right). This is exactly what artists were doing.

The Thread’s Not Dead website conveys quality and experience through its connection to the past, a kind of “been there, done that” mentality. And guess what? The author has been there and done that. The theme fits the subject matter brilliantly.

Romanticism

The Romantic period in art history began in the middle of the 18th century and was strongest in Europe.

Despite its name, it wasn’t concerned with what you would consider typical Romantic matter. Instead, artists sought to imbue their works with strong emotion, including shock, fear, uncertainty and, of course, love. Some of the most prominent artists of the time were Francisco Goya, Eugene Delacroix and Thomas Cole.

The objective of generating an emotional response from a design is almost a given. Most often, the intention of a website is to elicit a physical response from the user: getting them to click on something, buy something, read something or the like. Playing on emotion can be a powerful way to accomplish this.

Emotion

A painting such as this wears its emotions on its sleeve. One need not understand its particular historical reference to fully appreciate it. The painting oozes with emotion, and the subject matter is clear when you know the title, The Voyage of Life, and especially considering it as one of the four paintings in a series. A painting like this is meant to be thought-provoking, to generate an emotional response, to awaken the viewer.

One need not look far to find a website design that elicits an emotional response. In the world of advertising, this seems to be the number one approach. On the Charleston Family Fun website, we see a clear attempt to generate such a response. The nostalgic photograph crosses barriers and presents us with a timeless sense of peace. The kids are getting along, sipping on Cokes, munching on peanuts, evoking an age gone by, as if in a parental dream. Everything here is an attempt to make parents want to go to Charleston.

While the website certainly doesn’t look like a painting from the Romantic period, it does make a strong emotional response its primary goal. There are many ways to sell a product, and appealing to raw emotion is one of the most powerful.

It is not hard to imagine how these principles could be applied to modern design; after all, we are already doing it. Still, as with most things, exploring the roots of the approach is worthwhile. When you dig into a technique like this one, you often find very practical reasons for why it came to be and, therefore, a greater understanding of how it can be leveraged.

Apparently I am not the first to observe this. Aaron Walter is writing a book titled Designing for Emotion, due to be released this summer. I doubt he will connect his theory to the Romantic period, but my point stands nonetheless.

Conclusion

The notion of looking to the past for inspiration and understanding is not new. It is the reason every creative-related educational program includes a load of art history courses. As a former student of such courses, I can attest that they often bore and frustrate many students. But with an open mind, we can find timeless ideas that apply to our daily work.

Of course, this article merely skims the surface of these periods in art history. But I hope the dots are starting to connect for you. Embrace our rich history, and draw inspiration and techniques from it. You will be amazed by what you can learn and use in your own work.

This brings us up to the beginning of the 20th century, which I will cover in another article.

Patrick McNeil is a freelance writer, developer and designer. In particular, he loves to write about web design, train people in web development and build websites. Patrick’s passion for web design trends and patterns can be found in his books on TheWebDesignersIdeaBook.com. Follow Patrick on Twitter @designmeltdown.

Do you see any other elements in these periods of art history that we can apply to modern websites?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: s2MX9m

Landing Page Kit for Better Conversions – only $47

Source

Go to Source

As requested, here are some of the best photo-manipulation tutorials online. These tutorials are great, not just because the final products are good, but because you can use one or more of the theories you’ll learn from them to create your very own masterpieces. It is not often that you can actually mix and match certain techniques on Photoshop, but we’re pretty sure you’ll find a few here that you can make use of any day.

So here they are, some of the most helpful photo-manipulation tutorials to aid you in learning Photoshop further. Enjoy trying them all out!

How to Create a Steampunk Style Illustration in Photoshop

Make an awesome steampunk photomanipulation in Photoshop. Tutorial by James Davies on PSD Tuts+.

View Tutorial

Money Style Illustration in Photoshop

Create money-styled illustrations out of your own photo. Check out how Fabio Sasso, Abduzeedo’s talented founder, created this illusion in 12 or 13 steps. (The 13th step is optional on your end.)
View Tutorial

Spirit Dove

Manipulate photos to create the illusion of a dove bursting out from a female’s body.
View Tutorial

Painting Liquid Figures

See how Jennifer Cirpici transformed a lady into water in 12 steps.
View Tutorial

Create an Intricate Mythological Statue

Learn how to turn simple photographs of a woman into a stoned angel. Tutorial by Joe Moore.

View Tutorial

Create a Surreal Photo Manipulation

Let your imagination flow. Literally. Learn how Loredana Papp created this illusion.

View Tutorial

The Dancer – Dynamic Liquid Splash Effect

You might have seen this before, but perhaps some of you are still wondering how to make splatters seamlessly connect to other images.

View Tutorial

Trap Your Friends in a Jar Using Photoshop

Trap people inside jars, if at least on a photo. Learn how Scott Pelham did it  in 10steps.

View Tutorial

Create a Burning Effect

Create an illusion of burning charcoal in few steps.

View Tutorial

The Fourth Kind

Make a surrealistic  scene of men being abducted by UFO’s.

View Tutorial

Photo Manipulate a Falling Angel

Edit stock photos to create a falling angel  photo manipulation.

View Tutorial

Create a Divine Angel Montage in Photoshop

Learn how to manipulate stock photos to create an angel.

View Tutorial

Making of a Sexy Humanoid

Learn the basic steps in transforming an ordinary picture of a woman (or a man, if you so prefer) into that of a humanoid.

View Tutorial

Water Effect Photo Montage

Learn another technique in turning man into liquid on Photoshop.

View Tutorial

Checkmate

See how Eric Vasquez created this stylish photo manipulation on Photoshop.

View Tutorial

Create a Cosmic Love Goddess With Photoshop CS5

Find out how to turn raw images into an awesome, surrealistic artwork.

View Tutorial

Create an Incredible Fantasy Photo Manipulation

One of our faves. Learn how this fantasy scene has been created from raw images into such a wonderful piece.

View Tutorial

Design a Spectral Photo Manipulation

Create how to create a seemingly scary but touching scene using Photoshop.

View Tutorial

Creating a Smoke Fading Effect

Create the illusion of images fading into smoke with this easy to follow tutorial.

View Tutorial

Create a Funky Perspective of a Model Riding Digital Volume

Learn how to create the above shown image on Photoshop.

View Tutorial

Grunge Stone Woman Photo Manipulation in Photoshop

View Tutorial

Transforming the Image of a Girl into a Milk Figure

Learn the basic steps of turning any man or woman into a body of milk on Photoshop.

View Tutorial

Creating a Sexy Mechanical Pin-Up Girl

Another beautiful pin-up girl…with a twist. Learn the technique on how to turn anyone into a mechanical figure.

View Tutorial

Create a Face Paint Dripping Effect

Somewhat basic but definitely useful for many design concepts.

View Tutorial

Deserted

Another surrealistic piece. Learn how to create this effect on Photoshop.

View Tutorial

Create a Nebula Cosmolady in Photoshop

Create a wonderful photo montage of a cosmic lady using several stock images in several, fun steps.

View Tutorial

Go to Source

Nothing says branding more than your very own logo. Corporations, organizations, groups and teams all have their own emblems, symbolizing the very ideals and vision that they stand up for. From the purely graphic to the wordy, you too can establish your very own brand with your own logo!

Represent and be recognized through these fierce animal-inspired logo designs. In as much as the inspiration for these designs are strong, regal, and the leaders of the pack, then so too are the companies and organizations that they characterize.

Xerxes

Black Sparrow

Mosquito

Church of the Hills

Fox

Istocna Cuda

Cinqleo

Pacific Shore Capital

Serpent Studios

Artopus

Sprintfox

Flamin Fish Taco

Stallion Construction

Hedgehog

Asgardia

Elk

Collaborative Conservation Network

Slugshot

Profis Bud

Fundrival

Red Lions

Ecodeer

Fox Burrow

Fire Officers Association

Powerplant

Silver Squid

Orange Cat

Vangaard

Bison, Vancouver

Flaming Eagles

Humberstone

Tuatara

Unimedia

Ken L Gazelle

Icarus

Taurus

Go to Source

Cuteness can easily disarm even the most heartless of persons…at least sometimes. It can certainly make the more soft-hearted smile broadly at a cute kitteh battling with all his might to conquer a pack of pasta or a strawberry gold fish about to be swallowed whole by a shark. (Wait, that doesn’t sound right, does it?) It is remarkable to see how well cuteness can be rendered through digital paintings and it made it difficult, on our end, not to share. For today, at least, we’ve decided to slim it down to cute and cuddly animals.

So here they are, some of the most adorable digital paintings of animals (and other cute creatures: real, living, or otherwise) that we were able to find. We’re certain that there are lots left out there, but we’re pretty sure these 40 samples will not disappoint.  If there are any cute digital art you’ve discovered and want to share, or any awesome stuff you’ve created yourself, feel free to share your links below. After all, we do love hearing from you. No harsh words please. Today, if just for today, we shall settle only for cuteness.

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

Go to Source

Business cards bear significant business information about a company or individual and they are really a good way to promote yourself or your business. These days a professional business card will sometimes include one or more aspects of striking visual design. In this article we have compiled some amazing vector illustrated  business cards for inspiration.

MARCA Marketing & Advertising

View Source

Mogibo Business Card

View Source

Wokomon Card

View Source

Great Circle

View Source

Squared Eye Business Card Flat

View Source

Love Money

View Source

Dirty Addiction

View Source

sticky stuff

View source

bombina studios

View Source

san gretti´s

View Source

Film InFest Identity Card

View Source

splendid wife

View Source

Greg Christman

View Source

Cabotins

View Source

Graffiti Media

View Source

Popcorn

View Source

Lady BonBon

View Source

Amplio Cards

View Source

Bigode Ideias

View Source

Hay Guy!

View Source

Mode Design Business Cards

View Source

HUNDREDEYES

View Source

Diseño de tarjetas de presentación de Gooru Interactiva

View Source

Culinary Culture

View Source

Sailors And Mermaids Business Cards

View source

Black Rooster

View Source

For Social Beasts

View Source

STELLAandHODGE

View Source

Munchausen Collective

View Source

Francesco Gavello

View Source

good apples

View Source

Secret Agent Man

View Source

St. John’s Ink Business Cards

View Source

card

View Source

Cereal Box Business Card

View Source

Them Bones BBQ

View Source

designus

View Source

chef burger

View Source

Cinch Creative

View Source

BroHouse

View Source

Poker Faces

View Source

Buzul

View Source

Designerfoo

View Source

Box Office

View Source

Dawn Toner

View Source

Gracie Lou

View Source

Whitney Shaw

View Source

Go to Source

Great designers always find new ways to express their thoughts and creativity. Photo Manipulation is one art genre most designers practice because of the limitless possibilities in terms of technique and abstract style of creating digital art. It’s also a combination of photography and graphic design as we know, where the essence of the artwork focuses on telling a story or figure of speech. Photo manipulation seems to be simple but combining images to create one kickass artwork requires great skill.

This post shows an amazing round up of Amazing Portrait Photo Manipulations. We’re sure you’ll discover something interesting to boost your creativity.

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

View Source

Go to Source

In today’s world, advertisements play a very important role for the success of a product or company. They must deliver powerful messages which attract people’s attention. For print, designers have to be very creative and imaginative, be able to write a powerful copy, and be mindful of the target audience. Minimal ads are always popular for their simplicity, single image, one- or two-word catchy slogan, strong message, and few colors. In this showcase we have presented 56 amazing minimalist print advertisements for inspiration.

Nori: Japanese Food from 11AM

View Source

The Star Café: Menu

View Source

Gazeteport: Chain

View Source

Coca-Cola Light: Lemon Peel

View Source

Little brick

View Source

Heineken: Social Networking since 1873

View Source

Sensodyne toothpaste: Hard hat

View Source

Pringles Rice Infusions: Sushi

View Source

Open Source Festival: Minimal sounds

View source

WWF: Crocodile

View Source

WWF: Calf

View Source

WWF: Shark

View Source

Taag Linhas Aéreas De Angola: Paris

View Source

DQ LED Torches: Non cooperation with non violence

View Source

Fabercastell Truecolours: Shark

View Source

Bic: Eiffel Tower

View Source

Coimbra Door Closers: Crossdressing

View Source

Balloon

View source

Colgate Floss: Brain

View Source

LA Bicycle: Folding bike

View Source

Jeternel beauty clinic: Mouth

View Source

Google Android: iPhone Alarm Gate

View Source

Mr. Clean: Shining floor, Toilet paper

View Source

Bayer Aspirin & Cafiaspirin: Teenage daughter’s boyfriend

View Source

Condor Travel: Eiffel Tower

View Source

Publicis Life Brands Resolute: OCD

View Source

Steggles Chicken: Egg

View Source

Heinz: Tomato

View Source

X Lotto: Wheels

View Source

The Green Ant: Minimalism

View Source

Calgary Farmers’ Market: Tomatoes

View Source

University of Gent: Chick

View Source

Alka Seltzer: Piglhouette

View Source

tappening.com: Bill

View Source

Bic: Matrix

View Source

Wilkinson Quattro: Bikini

View Source

Danacol: Bacon

View Source

Veet: Soap

View Source

Venezia Cafe: Soda

View Source

XPC Sandisk: Ship

View Source

FedEx: Statue of Sugarloaf

View Source

Nestlé KitKat: Vuvuzela

View Source

Hut Weber: Hitler vs. Chaplin

View Source

Mass Education: Russian doll

View Source

PUMA

View Source

Lego: Periscope

View Source

Oral-B Dental Floss: Chicken

View Source

Listerine: Garlic

View Source

One foot can change someone´s life. Remember Cinderella?

View Source

Alka Seltzer: Mafia

View Source

Olay: Undo

View Source

Levis: One

View Source

Snickers: Blind Man

View source

Citroën C-Zero: 100% Electric

View Source

Hakle: See you later

View Source

Hospital San José: Irene

View Source

Go to Source

Our friends at UCreative have something new in store for us! They have upgraded their old Gallery into a more exciting platform. You’ll definitely find some cool stuff on this site and some are listed below.

What is UCreative and what should I expect?

UCreative is a new social network designed for artists and designers. It offers a wide range of tools you can use to interact with fellow designers.

UCreative Forums

First off, the site has a forum where you can freely share your ideas and in return, learn from other creative professionals. This is a great way to learn other designers’ best practices and share your own, or to simply just meet others in the community. You can either join an existing forum thread or create your own discussions. You can even leave a message on other members’ profile pages, just like what you do on Facebook.

UCreative Gallery

UCreative allows upload of your own content and artwork. You can post your own blog articles and inform fellow members of fresh design news. It’s an easy way to share your knowledge with the community. Likewise, you’ll also have the opportunity to read other people’s ideas.

Your artworks, on the other hand, can be uploaded on the site with ease. There are even options to add photos from your Flickr account, or even through your mobile phone. UCreative also features outstanding works on the homepage, which means you get a shot to be featured there, too.

Your Own Profile

You can do a lot of awesome stuff on your profile page. Customize My Page by adding different applications. Poke friends, comment on others’ walls, you can even update your friends by leaving a 140-character status message. Make sure to add the app for chatting with everybody else!

To be able to enjoy all these things, be sure to create your own account on the site! Visit and join UCreative now and meet more creative professionals, showcase your own craft and learn from fellow designers!

Go to Source