Ngayxanh Web Design Resources » tutorial

How To Create A Simple Portfolio Site Running On Surreal CMS

Jon Phillips — Thu, 13 Aug 2009 00:27:21 +0000

I always enjoy working on new things and learn about new CMS and how they work and all. I recently connected with Cory at Surreal CMS, and I decided to write a tutorial on how to create a portfolio site and run it with Surreal CMS.

It’s pretty simple actually. In this tutorial I’ll show you how I came up with the basic design, we’ll also go through coding that layout (markup and CSS) and I’ll show you how to integrate Surreal CMS and how it can be used to run your site and your client’s sites. We’ll also go through the process of branding the CMS so that your clients see your own logo instead of the Surreal CMS logo.

Now let’s get started!

First We Need A Design

I used Adobe Fireworks to create the basic layout and graphics. You can check it out below – This is what we’ll slice, code and use to run Surreal CMS with. It’s a rather basic layout, but it’ll be perfect for the purpose of this tutorial.

Here’s the layout:

Quick Overview Of The Layout Design

I created a new document in Adobe Fireworks and set the width and height to something I’m comfortable working with. In this case I went with 1200×1000px. And I chose #EEEEEE as the background color.

In the first layer I created a rectangle and gave it a height of 130px and a width of 1200px. The rectangle has a linear gradient that goes from #70A033 to #48761C (the green rectangle at the top – which we’ll use as our body background image).

I then created the logo using Century Gothic and the nav menu is set in Helvetica. I made it uppercase and put a -1px letter spacing. Then I created a main content box and set the color to #FFFFFF (so it contrasts a bit with the #EEEEEE in the background)

Then it was just a matter of figuring out what to put in those content boxes. I figured it’d be cool to have some thumbnails of recent projects (that would open in a lightbox when clicked) and a little ‘about us‘ blurb. I used some cool free icons from Function.

And then at the bottom there’s the usual footer with a Copyright notice and all.

Slicing Up The Images

I grabbed a 1×130px sample of my green gradient box. This will become our body background image and it will repeat horizontally.

I also saved the logo and tagline as a transparent PNG file.

And then I just sliced the icons.

Coding The Layout

Our portfolio site will have 4 pages:

Home
About
Work
Contact

First of all we’re going to have to create the following files:

nav.php
footer.php
index.php
style.css

We’re going to need more PHP files for the about, work and contact pages, but for now let’s focus on writing the markup and CSS for the homepage.

Let’s Start With The Header

You’ll notice that I use a class=”editable” on many divs and paragraphs. This is because Surreal CMS will look for those regions and make them editable via the CMS admin panel. Make sure you never use a class=”editable” for anything else than what you want to show up in the CMS.

So, we’ll need to declare the DOCTYPE and then we can start coding away. Here’s the first part of the website:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





Simple Portfolio Site Running On Surreal CMS

Then the logo and navigation:


	
		
			home
			about
			work
			contact

We’ll come back to the header section later, but that’s a start.

As you can see I gave my header an ID of ‘header‘, and I gave the unordered list a class of ‘menu‘. Obvious, right?

And Then The Main Index

We’ll start the main index file with the header we just did and then do a php include to grab the nav.php file, like this:

< ?php include('nav.php'); ?>

And then we’ll need a main div (maincontent) that will hold all of our content. Right before that maincontent div I put a paragraph and gave it a class of ‘message‘. This is the box that’s between the header and the content on the homepage.

	Hello there! Welcome to surreal portfolio. This site is an example of what you can do with  Surreal CMS - an easy to use and powerful CMS that can make your life as a designer much easier! (oh hey, and this section is easy to edit via the Surreal CMS admin panel)

And of course we close this file with another php include, our footer file:

< ?php include('footer.php'); ?>

A Simple Footer

The footer is pretty simple, just a paragraph inside a div. Then we end the document with the closing body and html tags.


	Copyright 2009 - Jon Phillips & SpyreStudios - Powered by Surreal CMS.

We’re Getting Somewhere

Now we have a somewhat functional homepage (though it’s butt ugly since we didn’t write any CSS yet) Here’s what our homepage should look like now:

Here’s the homepage markup in it’s entirety (we’ll add some content and javascript soon):

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





Simple Portfolio Site Running On Surreal CMS




< ?php include('nav.php'); ?>

	Hello there! Welcome to surreal portfolio. This site is an example of what you can do with  Surreal CMS - an easy to use and powerful CMS that can make your life as a designer much easier! (oh hey, and this section is easy to edit via the Surreal CMS admin panel)


	

< ?php include('footer.php'); ?>

Now We Need Content

So, before we write any CSS, let’s add some content. Let’s take the ‘maincontent’ div and add some stuff in there:

We have 2 sections:

Latest From The Portfolio
About Our Company

Since the first section to come up is the ‘Latest From The Portfolio‘, let’s create a div and add some images:

	
		
		Latest From The Portfolio

See, I also added rel=”lightbox” to my image links. We’ll need to go back in the header.php and add the JS file for this to work. I used Lightbox 2 and you can download it here and instructions are also available on the website.

Let’s go back to our header and add the JS files and the Lightbox 2 CSS file in there. Like this:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





Simple Portfolio Site Running On Surreal CMS

Now let’s do the ‘About Our Company‘ section. Another div and 2 paragraphs inside it. You’ll notice I’ve also put H2 headings for each section.

	
		
		Latest From The Portfolio
			
			
			
			
			
		
		
		About Our Company
			We're a small, yet highly focussed, team of designers and developers from Montreal, Canada. We build websites for clients from all over the world and we love what we do!
			This website is our home on the web - please take a minute to have a look around or click here to learn more about us...

Now The CSS!

I don’t think it’s necessary for me to explain the whole CSS file. Everything is pretty self explanatory: maincontent div for the main content, content1 div for the first block of content, same for the second block of content, unordered list with a class of menu for the navigation menu. Pretty easy, right? (you can always leave a comment and I’ll try my best to answer your questions)

Here’s the CSS in it’s entirety:


body {
background:#eee url(images/bodybg.jpg) repeat-x;
color:#444;
width:900px;
font-size:14px;
font-family:helvetica, arial, sans-serif;
margin:0 auto;
padding:0;
}

#header {
margin:0;
padding:0 0 15px;
}

h1 {
float:left;
width:397px;
margin:0;
padding:30px 0 20px;
}

h2 {
font:bold 26px helvetica, arial, sans-serif;
color:#000;
letter-spacing:-1px;
margin:0;
padding:0 0 20px;
}

h2.computer {
background:url(images/computericon.jpg) no-repeat;
font:bold 18px helvetica, arial, sans-serif;
color:#000;
letter-spacing:-1px;
margin:0;
padding:8px 0 30px 56px;
}

h2.coffeecup {
background:url(images/coffeeicon.jpg) no-repeat;
font:bold 18px helvetica, arial, sans-serif;
color:#000;
letter-spacing:-1px;
margin:0;
padding:12px 0 30px 50px;
}

h3 {
font:normal 22px georgia, serif;
color:#000;
margin:0;
padding:25px 0 12px;
}

img.right {
float:right;
background:#eee;
border:1px solid #ccc;
margin:0 0 15px 20px;
padding:10px;
}

img.left {
float:left;
background:#eee;
border:1px solid #ccc;
margin:0 20px 15px 0;
padding:10px;
}

ul.menu {
text-transform:uppercase;
float:right;
margin:0;
padding:50px 0 0;
}

ul.menu li {
font-size:18px;
font-weight:700;
letter-spacing:-1px;
display:inline;
margin:0;
padding:0 8px;
}

ul.menu li a,ul.menu li a:visited {
border:none;
background:transparent;
color:#fff;
display:inline;
margin:0;
padding:0;
}

ul.menu li a:hover,ul.menu li a:visited:hover {
background:transparent;
border:none;
color:#000;
display:inline;
margin:0;
padding:0;
}

p.message {
clear:both;
font:normal 24px helvetica, arial, sans-serif;
background:#fff;
letter-spacing:-1px;
color:#313F4C;
line-height:30px;
margin:0 0 30px;
padding:30px;
}

p.message span {
font:18px normal georgia, 'Time New Romans', serif;
color:#888;
font-style:italic;
margin:0;
padding:0 0 0 10px;
}

#maincontent {
float:left;
width:840px;
font:14px normal helvetica, arial, sans-serif;
background:#fff;
color:#313F4C;
line-height:34px;
margin:0 0 10px;
padding:30px;
}

#maincontent p {
line-height:28px;
}

ul {
line-height:18px;
list-style-type:none;
display:block;
margin:0;
padding:0;
}

ul li {
list-style-type:none;
display:block;
margin:0;
padding:0 0 8px;
}

ul li a {
list-style-type:none;
color:#556D84;
display:block;
margin:0;
padding:10px;
}

ul li a:hover {
list-style-type:none;
display:block;
color:#000;
margin:0;
padding:10px;
}

#maincontent img {
border:1px solid #ccc;
background:#eee;
margin:0 3px;
padding:8px;
}

#maincontent img:hover {
border:1px solid #bbb;
background:#ddd;
margin:0 3px;
padding:8px;
}

a,a:visited {
text-decoration:none;
color:#48771E;
}

a:hover,a:hover:visited {
text-decoration:none;
color:#000;
}

.footer {
float:left;
font-size:12px;
width:900px;
color:#999;
padding:10px 0 40px;
}

.content1,.content2 {
width:840px;
font:16px normal helvetica, arial, sans-serif;
background:#fff;
color:#333;
margin:0 0 30px;
padding:0;
}

Creating The Other PHP Files

Now that we’re done with the header, navigation, main index, footer and CSS, let’s create our work, about and contact pages.

This is actually very easy: Simply duplicate the index.php file 3 times, rename to about.php, work.php and contact.php and you’re almost done. Open up those 3 new files in your favorite editor and remove the ‘message’ paragraph and insert some lorem ipsum in the maincontainer div. (at the end of the tutorial you have a download link so you can grab all the files from this tutorial)

Creating Your Surreal CMS Account – PROMO CODE!

We’ve partnered with Surreal CMS to give you guys and gals a little something. You can create a free account with Surreal CMS but there are some restrictions. With the upgraded account you’d be able to manage an unlimited number of websites, use your own custom logo and color scheme (clients will love this), and access the CMS via your own domain at cms.yourdomain.com instead of via surrealcms.com. Those features are not available with free accounts.

The Designer/upgraded account costs $25 per month, but Cory agreed to give the first month free to readers and visitors of SpyreStudios. You can read more about it and grab the promo code by visiting this page (this offer is valid up till September 31st).

Integrating Surreal CMS To Our Design

Now that we have a working website, let’s work on the fun (and actually pretty easy) stuff

Surreal CMS really is a simple, no-fuss CMS. All you have to do to make a region editable (I mentioned this earlier) via the CMS is to add a class=”editable” to an element. It’s that easy! You can also add a title=”something here” to elements, though if an element already has an ID, you won’t need to add the title attribute.

Step By Step

1- Go to Surreal CMS and signup. Once you’re done with the signup process, login with your email and password. You’ll be on the ‘My Websites’ page. Click on ‘Add a Website’ and enter your FTP information, test the connection and browse to your website root. The website root is where you will upload your website files, in most cases that’s the main folder, also called ‘root directory’.

Click ‘Save Changes‘ when you’re done.

2- Click on the website URL and then on ‘Enable Pages‘. Then select the pages you’d like to enable. Make sure you actually upload those files manually to your website root directory. For this tutorial I uploaded all my php files, my css file, the js folder that contains the lightbox script, a css folder that contains the lightbox css, and my images folder. When you’re done, you’ll be able to change the display name of the file so it’s easier to work with in the CMS.

3- Since we put the class=”editable” to many of our divs and paragraphs, we’ll be able to edit those regions via the admin panel. Next to each of the file names you’ll see an ‘Edit‘ link, click on the one next to the index.php. It’ll load the Editor. There you will see the content regions you defined as ‘editable’, you’ll also have a ‘publish to web’ button which, when clicked, will update your html or php file. And you can also edit your markup by clicking on the ‘Edit Content Regions’ button. What that means is once you’ve uploaded your files, you don’t have to re-upload anything, you can manage everything via Surreal CMS.

That’s basically it. You can manage your whole site from within the Surreal CMS admin. Want to add a new editable region? Easy! Just load up the ‘Content Region Editor‘ and add the class=”editable” to the element you want to edit with Surreal CMS.

The class=”editable” can be added to a number of html tags (more than this list – those are some of the most popular ones anyway):

blockquote
div
h1 — h6
img
ol, ul
p
pre
span
table, td, th

4- You can even change the title and meta description and keywords via Surreal CMS. Just click on ‘Properties‘

Adding Editors

This feature is pretty cool. Say you’re building websites for clients and you want them to be able to edit their site themselves (that’s the whole point right?) Simply add an editor, edit the welcome message, and voila! You’re done! Your client will be able to easily edit the content of the pages the same way you would via the Surreal CMS admin.

Use Surreal CMS With Your Own Domain

That part is pretty straight forward. This is if you would like to be able to access the CMS via your own domain instead of the default edit-content.com website.

Login to your web hosting account
Navigate to the DNS (or Name Server) Management section
Select a domain/sub-domain that you want to use to access the CMS
Create a CNAME record that points to edit-content.com

Branding Surreal CMS With Your Own Logo And Color Scheme

Of course if you use Surreal CMS to build websites for your clients you’ll want them to see your logo and color scheme instead of the default colors and logo. Click on the ‘My Account tab at the top, upload your logo and change the color scheme. It’s that easy. You can also change your contact information and password via this page.

Here’s the default design of the Surreal CMS admin:

Here’s my own:

It’s A Wrap!

That concludes our tutorial on creating a portfolio site running on Surreal CMS. I hope you liked it! Here’s our final result: Surreal Portfolio.

You can download the files from this tutorial here (downloaded 83 times already!).

If you would like to try out Surreal CMS, remember that you can get a Designer Account for the first month for free (the offer is valid up till September 31st). The Designer/Upgraded account enables features that are not available with the free account!

Cheers!

40 (NEW) High Quality Adobe Photoshop Tutorials

Noupe — Thu, 06 Aug 2009 03:02:11 +0000

Adobe Photoshop is probably one of the most popular graphic editing program used extensively. There is one simple reason for that. Photoshop is easy to learn and offer a variety of advanced tools to optimize and emphasize some impressive results.

In today’s post, you’ll find an assortment of new & high quality Photoshop tutorials that others have freely contributed to the design community for making your next photoshop effect.

How to Create a 3D Leaf from a Texture Photograph

In this beginners level tutorial, you will learn how to create a vibrant 3D leaf compilation from a single 2D photograph. You will be able to manipulate the object however you prefer.

Firefish Photoshop Tutorial

In this Photoshop Tutorial, you’ll learn how to design a mascot based on the Firefox logo, and mimic the fire effect using the pen tool and gradients.

Advanced Tutorial: Creating ‘Broken Link’

David Cousens explains how to create a stunningly professional work of art, in this advanced tutorial.

Fantastic Digital Painting Image in Photoshop and Corel Painter

Jill will show us how to create an amazing digital painting design using Photoshop and Corel Painter.

Creating an Abstract Watercolor Wallpaper

There are plenty of ways to create a Watercolor Effect in Photoshop. Some are very cheesy and you can easily tell that a simple filter has been used. In this tutorial, we will be using Layer Masking. It is one of the most fascinating and powerful Photoshop method, to use layer masks in your designs.

Create Smoke Effect on Grungy Wallpaper

This tutorial will teach you how to create simple smoke effect against a grungy background by using the Smudge and Warp tools.

Create a 3D Text Scene Using Photoshop

This tutorial will teach you how tocreate a realistic 3D text scene using Photoshop with a little help from Illustrator for the 3D text.

How to Create a Photo Manipulation of a Flooded City Scene

In this tutorial, we will learn how to manipulate a simple photo into a flooding torrent of a scene. You’ll use some relatively simple techniques to give this image a semi-realistic, stylized feel.

Colorful Spirograph Poster

In this great tutorial we will be learning how to create a Spirograph effect in Photoshop. Then we’ll learn how to use the effect to create a very stylish poster design with some smart typography and wait for it… rainbow gradients! So give it a try and I’m sure you’ll learn a bit.

80’s Style Design Using Photoshop

The 80’s have always had an iconic impact on Pop Culture. So, here’s a simple tutorial inspired by the 80’s.

Create a Furious Pink Panther Poster

How to create a poster of this new and improved pink panther using some great online resources, from Bittbox and the Go Media Arsenal.

Creating a Space-Helmeted Future Retro Illustration

I don’t know about you guys but I’m loving the work of Electrik Suicide and Sakke Soini at the moment. I’m going to call it Future Retro for the sake of this tutorial. I employed my take on the style in pitching a poster and overall look for a night at a local club. This tutorial goes over the meat and potatoes of it’s creation!

Create Smoke Text

A big thing that you see in graphic design at the moment is the use of smoke stphotography, these photos look really good but look a lot better when you mess about with them in Photoshop. Here we’ll be mixing type and a smoke image to create a really nice abstract wallpaper. This is just a quick tutorial but hopefully you’ll learn some new techniques so give it a go.

Horror Theme Text Effect

Design a Golden Flame Text Effect

In this tutorial, we will learn the process involved in creating this amazing golden flame text effect with soft smoke texture in Photoshop.

Create a Realistic Grunge Peeling Sticker

In this Photoshop tutorial, we will learn how to create a grunge peeling sticker effect in Photoshop. You will also be learning some basic to intermediate techniques which you can make use of in your future designs!

Create scorching Photoshop effects

Fake an image of a burning man in Photoshop with these flaming brilliant techniques from Fabio Sasso.

Design a Super Sleek Text Effect with Water Drop Texture

The steps in this tutorial to create a Super Sleek, eye-catching text effect with Water Drop Texture. This effect is simple but effective, and would be suitable for any water/rainy/ocean themed designs you’re creating.

Create A Retro Cosmic Design

This tutorial will teach you how to recreate the Retro Cosmic designs made popular by James White of Signalnoise. All you need is a copy of Photoshop and some time on your hands. In this particular example we’re going to create a retro cosmic rainbow but the techniques explained can be used in combination with any shape and colour.

How to Make a Dark, Post-Apocalyptic City Illustration

In this tutorial, we’ll change a full of sunshine, ordinary photograph into a gloomy image of the world after destruction of mankind. Using simple tools, we’ll turn lively streets into abandoned ruins overgrown with weeds. A number of stock images and a few little tricks will let us optimize our work and make this job more interesting and spectacular.

Letterpress Text Effect

A mini tutorial outlining how to create this effect in your own designs.

How To Create a Retro Apple Wallpaper

Follow these simple steps in Photoshop to create a homage to Apple, combining the retro striped Apple logo with a range of soft grungy textures to produce a detailed design with subtle touches of colour and tone.

How To Setup A Layout Grid In Photoshop

The Grid feature in Photoshop is a great tool to assist you with your layout designs, whether its design for the web or print. Adding a “Snap” lets you align objects very precisely along the lines of the grid. And rather than make a new grid each time you’re designing, you can set up grid preference that can be reused.

How To Correctly Use Bevels & Drop Shadows

People say it all the time, ‘If you want to be taken seriously as a designer, you cannot use the Bevel or Drop Shadow tools in Photoshop’. What most of these advice givers really mean to say, is that you should not use the default settings for these tools. Here I am going to show you a side-by-side comparison of the default settings and some custom settings after taking you through the tutorials to achieve the desired effects.

How to Make an Old Western Wanted Poster

In this graphic design tutorial, you’ll learn how to create a stylish Old Western themed Wanted poster using some excellent Photoshop techniques such as how to weather paper, how to create realistic nail heads, and more.

Create a Deep Grunge Text Effect

In this Tutorial we will learn how to create a deep grunge and cracked Text effect. We will also come across how to use textures for creating certain inspiring results in less than 10 steps!.

Making of Points of View

You Will Stand Alone Photomanipulation

In the tutorial you’ll learn to create a dark and creepy effect by blending various images together and adjusting several settings.

How to Create a Piece of Heaven in Photoshop

Learn how to create a piece of Heaven in Photoshop. This photo manipulation is inspired by the Metuzalem website.

Nice glow/fume effect coming from a cup

Learn how to make an awesome glowing light effect (along with sparkly bits) coming out of a cup.

Super Cool Watercolor Effect in 10 steps

Learn how to create another Watercolor effect using Masks and Watercolor brushes

Creating a Typographic Wallpaper

Learn how to create a stunning typographic wallpaper.

Give a Car Photo Super Slick Lighting Effects

Learn how to combine photos and brush strokes to give a car photo slick dusky lighting effects.

Create A Simple And Effective Retro Logo With a Soft Grunge Background

A super-simple way to create a nice retro logo with an appropriate background.

2 Ways To Create Realistic “Depth of Field”

In this tutorial we are going to learn how to create realistic “Depth of Field” in Photoshop. We are going to look at two different ways of doing it depending on what kind of picture you want to modify.

Digital Painting a High Tech Deer Scene

Creating A Customized Product And Label

I recently finished a brochure for a client where I had to take a vector piece of stock art and customize the look and feel to match that of the company identity as well as the brochure’s monochromatic style. This tutorial is based on the process used to achieve the final result.

Create a wood background

In this Photoshop tutorial, we are going to create a wood background. We are going to create the wood from scratch and turn it into a pattern. Then we will finish it off by adding some lighting and texture effects.

Create Vintage Style Photos

How to keep the good qualities of vintage-effects and throw in some beautiful clouds of color by utilizing the adjustment layers in CS4.

Tutorial: How to Draw an Amazing Vector Twitter Bird

Marla — Fri, 24 Jul 2009 14:16:03 +0000

Hey Guys! Welcome to our first Exclusive Illustrator Tutorial!

Today we are delivering a FREE high quality tutorial on how to draw a Vectorial Twitter Bird using Adobe Illustrator simple techniques. Actually we are just going to use 3 tools:
ellipse tool, direct selection and pen tool.

How to Create a Realistic “Neon” Sign Text Effect

Twinster — Fri, 29 May 2009 20:31:11 +0000

In this tutorial I will be teaching you how to create a realistic “Neon” sign text effect in Photoshop. In just a few steps we’ll be learning lots of tricks how to make this Neon sign look not only realistic but visibly stunning as well. The skills for being able to finish up this tutorial is just the knowledge of how to use the most basic tools in Photoshop. Everything else will be explained in detail so even if you are a beginner you are more then likely to be able to follow this tutorial through and accomplish the very same result as we have at the end of this tutorial.

It’s somewhat easy to use textures and other Masking techniques to create a truly realistic result. This time I want to take you through the process without any of those trick and really show you the true power of Photoshop. The tools and features that Photoshop packs is more then powerful so why not use them to it’s full extent.

Step 1

We will start by creating a work area that measures: Width: 500 and Height: 350. make the background Black (#000000). Create a new layer above the “Background” layer and name it “Panel“. In this layer we will create a panel for our neon sign to be attached to.

Now, create a rectangle using the “Rectangular Marquee Tool” with the measures Width: 400 and Height: 150. Fill the rectangle using the “Paint Bucket Tool” and use the color Dark Gray/Blue (#17181c).

Center the whole thing vertically and horizontally using the “Layer” -> “Align Layers To Selection” – “Vertical Centers” & “Horizontal Centers“. Later we will be adding some reflection to the surface of this panel but for now we are only going to add a little bit more detail to it.

Right click the “Panel” layer and select “Blending Options…” In the menu to your left choose “Bevel and Emboss” and insert the following settings:

Our panel is done for now. As said we are going to add a little more details to it later in the process. You should now have something looking like this:

Step 2

Alright, let’s add the text. Pick the “Type Tool” and select “Harlow Solid Italic” font and type whatever you like. Use the font size 100px. Also use the color Neon Blue (#00b4ff). Just make sure you are staying at least 20 pixel inside the panel on each side.

Position your text in the dead center of the Panel. Now, select your newly created “Text” layer and right click it. In the list select “Blending Options…” In the menu to your left again select “Bevel and Emboss” and insert the following settings:

We also need to add some other effects so go ahead and select “Drop Shadow” in the left menu and add the following settings:

We also need to add some inner shadowing to the whole thing. Pick “Inner Shadow” in the left menu and insert the following settings:

Now let’s create the little glow around the text before we continue. In the list to your left select “Outer Glow” and insert the following settings:

Ok, so our text is now complete and we can concentrate on making up the details to make it look more realistic. If all your settings are correctly setup you should now have something looking like this:

Step 3

Let’s create the attachment points for the Neon tube now. Create a new layer underneath the “Text” layer and name it “Attachments“. With the “Elliptical Marquee Tool” create circles measuring Width: 13 and Height: 13. Fill the circle using the “Paint Bucket Tool” and use the color Black (#000000).

Put the attachments where you would feel the Neon Tube would need to be attached to the “Panel“. This will require you to repeat the step several times.

When you are done positioning your attachment points select all of them and right click the “Attachments” layer at the bottom and select “Merge Visible“. All your attachment points should now reside in one single layer.

Time to add some effects to the “Attachments” layer. Right click the layer and select “Blending Options…” In the list to your left select “Bevel and Emboss” and add the following settings:

We also need to add some shadowing to these attachments. In the menu to your left go ahead and click “Drop Shadow” and insert the following settings:

Now, with all your settings in place you should now have something looking like this:

There, we are now done with the mounting of the Neon text. Time to move on to the detailing of the panel behind it.

Step 4

First thing we are going to do is to add some reflections to our panel. For this we need to go through a rather complex process. Not so much technically, just for the beginners to understand. I’ll walk you through it.

Ok, create a layer underneath the “Text” layer. No need to name it for now. Select the “Text” layer above it and choose “Layer” -> “Merge Down“. With all our effects now fixated in one layer (our new layer) select the whole work area and copy the contents of the new layer by pressing “CTRL” and “c“.

Now, we have our fixated layer all in our clipboard so we can go ahead and undo our layer merge by pressing “CTRL“, “ALT” and “z” twice. There, our “Text” layer is now back with all it’s effects intact and editable.

Now, select our newly created (now again empty) layer and press “CTRL” and “v“. Kaching! Our copied merged layer is now present in our new layer underneath the text layer. name the layer “Reflection“.

We now need to position the “Reflection” a bit underneath the real Neon text. First, move the “Reflection” layer underneath the “Attachments” layer. When you have done that choose the “Move Tool” and by using the arrow keys move the “Reflection” 6 pixels vertically underneath the real neon text.

After moving it you should have something looking like this:

We need to work a little with the “Opacity” of our “Reflection” layer so go ahead and change it to “16%“.

We also need to fix some outer glow on the reflection to simulate a nice light effect on the panel. Right click the “Reflection” layer and select “Blending Options…” In the menu to your left select “Outer Glow” and insert the following settings:

With that done we also need to make sure that the glow doesn’t exceed the outer rim of the “Panel“. So, go ahead and right click the “Reflection” layer and select “Create Clipping Mask“. This makes our reflection layer only show its content where the panel is. With all of these settings inserted and the Clipping Mask in place you should now have something looking like this:

Alright, all done with the reflection. However we also need some reflection on the actual panel and that is what we will be doing next.

Step 5

We need to fixate the “Panel” layer to be able to add a little bit more detailing to it. Create a new layer underneath the “Panel” layer. Right click the “Reflection” layer and select “Release Clipping Mask” for now (If we don’t the “Reflection” layer will be merged with the “Panel” layer). With the “Panel” layer selected choose “Layer” -> “Merge Down“. Our “Panel” layer is fixated. Go ahead and name the new layer “Panel” once again.

Now, go ahead and right click the “Reflection” layer once again and choose “Create Clipping Mask“. All back to normal again.

Select the “Panel” layer and right click it. Choose “Blending Option…” and then click “Bevel and Emboss” in the menu to your left and insert the following settings:

We also need to add some shine to the sides and bottom edges of the panel so go ahead and click the “Stroke” option in the left menu and insert the following settings:

With all the settings in place you should now have something that looks like this:

Round Up

OK, so we are done with our “Neon” sign text effect and it only took as some easy 5 steps to get it done. There is a myriad of different ways to create a believable “Neon” text and this is just one of them. However, without believable details not many of them will come through as realistic and eye catching.

Some creativity from yourself and I am sure you can come up with some clever and really interesting designs for this tutorial. Color and design is quite important in this tutorial. You don’t necessarily have to use a font to utilize this tutorial. Create a symbol or a logo with it and there you go. Something unique and interesting.

I hope you have enjoyed this tutorial as much as I did creating it. I am off to write a new one and I am hoping to see you around here often. If you have any requests for a tutorial please feel free to send them to my using the contact form here in Minervity.com

Thanks!

How to Create a Realistic 3D “Stone” Text Effect

Twinster — Fri, 22 May 2009 04:18:59 +0000

In this tutorial we will be learning how to create a realistic “Stone” text effect. There are plenty of stone text effects out on the Internet but what I miss is the details in them. Wouldn’t it be cool of you could some how create a realistically detailed stone text with just a few steps of Photoshop wonder? That’s what we are going to do right here.

The skill level for this tutorial is quite low. The basic knowledge of how to use the most common tools in basic is required and if you still wouldn’t be that experienced you can just follow this tutorial step by step as I will be commenting everything. It would be quite easy just following what I do.

Oh, and don’t be thrown off by the text. I wanted it to be something else instead of “Stone” as that would have been affecting your mindset to much.

Enjoy!

Step 1

Let’s start by creating our workspace area. Make it Width: 550 and Height: 300 and set the background to Black (#000000) for now.

In the middle of the work area type “STONE (or whatever you prefer) using the “Type Tool“. I am using “Arial Black” and size “130” to make sure I get the best detailing in to it.

Step 2

We are now going to add the realistic texture to it. However, we aren’t going to do it the conventional way. When I usually create designs I want to have as much creative freedom as I can get so we are going to use “Masking” instead to make it easier for us to get the best result possible.

We are going to use a texture which we are going to size several times and you can download it right here “Stone Texture“.

Open your newly downloaded texture file and copy the whole thing. Paste it (when you choose paste it will automatically create a new layer for you) in a new layer on top of our “STONE” text layer and name it “Texture“.

Before we do anything to the layer we need to re-size it a little bit. Choose “Edit” -> “Transform” -> “Scale” and size it so it’s just a little bigger then the text.

Alright go ahead and “Apply” the new size by clicking the “Move Tool“. This should fixate the new size for the texture. Let’s make sure we can really see the details in the texture as well.

With the “Texture” layer selected choose “Filter” -> “Sharpen” -> “Sharpen More“. As you can see the details pop out quite a bit more and we can go ahead and fit the texture to the text.

With the “Texture” layer still selected right click it and select “Create Clipping Mask“. The text is now textured and as you can see, it already give us a realistic feeling. What we have now is a way to manipulate the texture in itself without having to worry about the text. If our texture would have stayed bigger we could have moved around our texture until we would have felt satisfied with its positioning.

Step 3

Let’s add even more realism to the text before we go ahead and do some really cool effects to it. Right click the “Texture” layer and select “Blending Options…” In the left menu select “Gradient Overlay” and insert the following settings:

Step 4

Let’s continue to transform our text into 3D. Select the “STONE” layer and the “Texture” layer by holding down the “Shift” key and clicking on both layers. When selected right click the top layer and choose “Merge Layers“. Name the new layer “STONE“.

With our new merged layer selected choose “Edit” -> “Transform” -> “Perspective” and drag the top right dot inwards “45” degrees.

Step 5

Now we have our perspective set and it’s time to add the 3D looking realism to the text. Copy the “Stone” layer and past a new copy of it underneath the “Stone” layer.

Move the new layer down using the “Move Tool” 20 pixels and also set its “Opacity” to “30%“. We are only going to use this layer as a guide so no need naming it.

We now need to fit the text with the sides. We’ll do it in two groups as we need to have control of the “Bottoms” and the “Sides” of the text for effect settings later on.

Create a new layer underneath the “Stone” layer and above our guide layer. Name it “Bottoms“.

Create rectangles between the top text and the darker bottom text using the “Rectangular Marquee Tool” and the color White (#000000). Don’t worry about how it looks. Once done we will fit the white rectangles with textures just like we did with the “Stone” text.

With those done, let’s create the sides as well. Create a new layer underneath the “Bottoms” layer and call it “Sides“. This time we need to use the “Polygonal Lasso Tool” to create the sides. Drag straight lines following the edges of the “Stone” text and the guide text and then again fill them using the “Paint Bucket Tool” with white color.

All done creating the sides for our 3D Stonetext. Time to fit them with some textures.

Step 6

Before we continue now we can go ahead and delete the guide layer we’ve been using to make sure our sides are correctly located.

Now, copy the texture we used for the text again and copy it to a layer above the “Bottoms” layer. We again need to re-size this one to fit the text texture so select the layer and again choose “Edit” -> “Transform” -> “Scale” and re-size it so it’s just a little bigger then the “Stone” text itself.

With it re-sized and still selected right click it and choose “Create Clipping Mask“. It pops right in there.

Choose “Filter” -> “Sharpen” -> “Sharpen More” to make its details pop out just like the “StoneText“.

We also need to work a little with the “Brightness” and “Contrast” to make sure it fits to be on the bottom of the text.

With the new texture layer selected choose “Image” -> “Adjustments” -> “Brightness/Contrast…” and insert the following settings:

We also need to fix a little gradient on these bottom textures to make it more realistic. Right click the texture layer and select “Blending Options…” In the menu to the left select “Gradient Overlay” and insert the following settings:

You might have to work a little with the gradient itself. Just click “ON” the gradient and another window will open where you can adjust it to look like mine. You should now have something looking like this:

Alright, time to fix the “Sides” as well. But first, select the new texture layer and the “Bottoms” layer and right click the texture layer and choose “Merge Layers“. name the new layer “Bottoms” again. We just fixated the layer and can now move on to the sides.

Let’s copy the texture again and paste it in a new layer above the “Sides” layer. Again re-size it by selecting the new texture layer and choose “Edit” -> “Transform” -> “Scale” and make it just a little bigger then the text itself. Fixate the new size by clicking on the “Move Tool” when you are done.

Select the layer (if not already selected) and right click it and choose “Create Clipping Mask”. It pops right in there just like the other textures.

As you can see we need to make some adjustments to the texture in order for it to look really believable. First off (with the texture layer selected) choose “Filter” -> “Sharpen” -> “Sharpen More“.

We also should set the “Brightness/Contrast” for the texture. Choose “Image” -> “Adjustments” -> “Brightness/Contrast…” and insert the following settings:

And again we need to add some gradient to it so go ahead and right click the new texture layer and choose “Blending Options…” In the left menu select “Gradient Overlay” and insert the following settings:

Again you might have to fiddle a little with the gradient itself to make it look like mine but it should be that hard I think. After you are done with it you should now have something looking like this:

Step 7

Our text looks more like stone right now but we will fix that in the coming steps. Now, let’s fixate the “Sides” by selecting the new texture layer and the “Sides” layer. Right click the texture layer and choose “Merge Layers“.

Let’s add some edge reflections to the text. Select the “Stone” layer and right click it. Select “Blending Options…“. Select “Bevel and Emboss” in the menu to your left and insert the following settings:

Also click the “Contour” option right underneath the “Bevel and Emboss“. leave the settings as they are.

Now select the “Bottoms” layer and right click it and select “Blending Options…” Again choose “Bevel and Emboss” and insert the following settings:

Again click “Contour” to activate it. No need to set anything in this area.

Finally select the “Sides” layer. Right click it and select “Blending Options…” In the menu to your left again select “Bevel and Emboss” and insert the following settings (don’t forget to click the “Contour” option underneath it again):

When everything is setup you should now have something looking like this:

Result

With these few steps done the result is quite realistic. You can add exactly whatever you want to this text. I’ve gone ahead and created reflection floor version as the result.

Round Up

Well, there we go. All done and in just a few steps. You can go ahead and use any textures you want with this technique and the result will come out just as realistic as this one if you just put a little time in to it and work out those details. I hope you have enjoyed this tutorial as much as I have creating it. There is always things to learn from tutorials whether it is a technique or just a particular angle and usage of a tool that you never thought of before.

If you have used this tutorial and use your creation on the Internet or otherwise I would love to check out what you have created. Comment with a link down below and I will as soon as time permits. For me, I am on to my next tutorial.

Thank you!

Mastering “Bevel and Emboss” – From Beginner to Pro

Twinster — Sat, 16 May 2009 18:13:25 +0000

Those of you that’s been following my tutorials here on Minervity.com know that I like to make things look real when using Photoshop to create visuals for either user interfaces, web graphics or just plain design or icons. I have received a ton of questions regarding my technique to make things shine with that extra realism to the design. The secret can’t be described in just a sentence or a tool but rather a link of design processes that will give your design that little extra edge to it.

In this micro tutorial I will teach you how to get the very best out of the “Bevel and Emboss” tool that Photoshop has to offer to make your designs look ultra realistic. Before we get going there are some pointers that need to be expressed. A design can be ultra correct and still not have that realistic look to it. This is usually due to three different factors.

1. Detail – Everything we see around us is not flawless. Everything has its scratches, dirt and distortions. It’s the small bits of imperfect details that makes it real to us.

2. Time – It’s important to spend a lot of time on your realistic designs. Time is what will teach you what will look real and what will not. Just slabbing something together to be time efficient will always set you back when it comes to realism.

3. Creativity – It’s an obvious one but oh so important. Nothing makes up the quality of your designs as much as creativity. Try thinking out of the box. Try using the tools in a non conventional way and you’ll see you will take a huge leap forward raising the quality bar quite a lot.

Alright, let’s get to business. Time to take a look at how we can raise the realism in our designs with a few short tips and tricks. So, in Photoshop we have the option of adding some beveling to any created object in Photoshop. We can do so by right clicking the layer in which the object is located that we want to create a bevel to. Right click the layer and choose “Blending Options…”

A whole bunch of different choices come up in a new window. In the list you can find “Bevel and Emboss“. Click it and you will be taken to it’s settings which we will be playing with.

The trick is really just to try and capture the realism and true angle of things when adding the bevel. It’s really important to study and do some research on how things truly are and how they look. Just adding a bevel to an edge won’t make it look raised or lowered just like that. It is equally important to look at the shadowing of the bevel itself and the angle the light is projected at the bevel.

The object in itself always has a source of light being pointed at it from a direction. It’s important to remember to make the light source come from the same direction consistently. However, not using the exact same settings as light also illuminates itself off of other things around it. This making it even more complex. But, we’ll be talking a little about it in a short bit.

First, let’s take a look at the usual way a novice would add “Bevel” to an object and how we, with just a few carefully set settings, can add much more realism to the object. In this case we’ve just created a rectangle measuring Width: 150 and Height: 150.

Novice Settings and Beveling

As you can see we are here using the very basic settings to create a bevel. This is usually the way a beginner setup their beveling. However, ultimately incorrect if we are trying recreate some kind of realism in the design itself. A cleaner and much more efficient way to put the tool to its ultimate use is to first try and create a realistic surface to the object and then add beveling and shadowing to is. This will enable the viewer to look at the object in a whole different way.

Let us setup the “pro” way of beveling and surfacing the object. As you will see there is a few more steps to the process. However, not too many and not to complicated.

Pro Settings and Beveling

Now we have created the surface for our object and it now incorporates a clear light source from the top left corner. Time to add some beveling to it before we add some shadowing to it.

We need to “Fixate” the layer to be able to add new layer blending on the layer. Create a new layer underneath the object layer and (still having the object layer selected) choose “Layer” -> “Merge Down“. We have now fixated out layer and the surface effects.

We have now created the beveling itself and we only have two more step to make it look quite realistically believable. We need to add some shadowing to the object to give it more “time and room“. Realism is all about capturing the imperfect noise around any real objects. With shadowing we can achieve a lot of this noise in a simple yet effective way.

As you can see the shadowing adds quite a lot of realism to the object and it makes it easier to create details that match the reality. Lastly we will add some noise to the object to incorporate the imperfect surface that creates the realism in the object itself.

To add noise to it choose “Filter” -> “Noise” -> “Add Noise…” and add the following settings.

There! The object now visions a more realistic illusion and is more likely to catch the viewers attention in a more positive way. Playing around with the settings will quickly make you a pro at incorporating the realistic light sources and noise. This process you can add to just about any surface or object you want in order to make it look more realistic. Just be creative and play around with it.

That’s how you add beveling to an object. But, there is a few other things you can create with the “Bevel and Emboss” tool. One of those are to create perfect orbs that looks stunningly real and you can create great icons with these.

I will take you through the simple steps of how to create an orb and during the process also show you some great tricks to create realistic reflection and gloss.

I just created a new work document and made it Width:250 and Height: 250. Also added a circle with the measures: Width: 120 and Height: 120 in the middle of the work area.

Novice Orb Settings and Beveling

As you can see it is not quite there and this is the mistake that beginners usually do when trying to create an orb using the “Bevel and Emboss” tool in Photoshop. There is a more efficient way to create an orb and far more realistic then the novice way of doing it. Again, it will require a bit more steps. However, the result will be a stunningly effective orb that will catch just about any viewers attention.

Pro Orb Settings and Beveling

As you can see we’ve found a way more believable way to create an orb. However we are not done yet. The simple orb is there but there are still a couple of things we can do to create that ultra realistic look and feel.

Add a new layer above the orb layer. Create a elliptical orb just at the top of the orb using the “Elliptical Marquee Tool“. We’re going to use the “Gradient Tool” to make a little gloss on the orb. Make sure its set to “Foreground to Transparent“, “Linear Gradient” (you set it at the top of the screen) and use white color (#FFFFFF).

So we just made our orb look a little more realistic. Now, as usual, we should add some shadowing to the orb in order for it to really come across as being right there in 3D in front of us.

Create a new layer underneath the orb layer and create a circle measuring Width: 90 and Height: 90. We are going to use the “Gradient Tool” again but this time use the “Radial Gradient” and use Black as the color “#000000“.

Now we need to do some modifications to the shadow so go ahead and choose “Edit” -> “Transform…” -> “Distort” and then distort the shadow like I’ve done underneath.

We need to make the shadow layer a bit more transparent to make it more realistic so go ahead and change its “Opacity” to “25%“. This should make it just a bit more smooth and believable.

There! Our orb is done and looking quite realistic. You have again the option of adding noise to the orb but that depends on if you want it to have a more rough surface or a more glossy shiny surface.

Round Up

There are millions of ways you can use the “Bevel and Emboss” tool to make things look realistic and believable. It is all up to you what you can come up with. Your creativity is the limit.

I hope you have enjoyed this micro tutorial on how to master “Bevel and Emboss” and that it has taught you a few bits and pieces of how to create more realistic designs. Practising this over and over in different ways is the best progression to becoming a really unique and professional designer in Photoshop.

On to the next tutorial.

Thanks!

How to Create a Realistic iPhone

Twinster — Sat, 02 May 2009 23:55:59 +0000

In this tutorial we are going to learn how to create a realistic iPhone image in Photoshop.The only necessary skills to get through this tutorial is the basic knowledge of how to use the most common tools in Photoshop. In just a few steps we are going to create a truly eye catching iPhone ready to be used in any way you want and can think of. When using this tutorial you will be able to create and showcase the colored iPhone that fits your personality before anyone else. Your imagination sets the limit for what you can add to it.

I truly hope you will find this tutorial useful and inspiring.

Enjoy!

Step 1

When you have launched Photoshop and are ready to start working create a new work area by selecting “File” -> “New…” Name the new document “Realistic iPhone” and set the work area size to: Width: 500 and Height: 500. Click “OK“. We now have our work area all set up. However, let’s set the background color to black to make the image more appealing as the iPhone is usually white or black (however you can as said use any color you want for your iPhone). Select the “Paint Bucket Tool” and make sure that the color you are using is Black (#000000). Use the paint bucket tool on the background layer making it our black background.

Step 2

We are now going to create the chrome rim of the iPhone so go ahead and create a new layer and call it “iPhone Chrome Rim“. Select the “Rectangular Marquee Tool” and create a rectangle measuring Width: 220 and Height: 410 at the center of the work area. Go to “Select” -> “Refine Edge…” and insert the following settings. Click “OK“.

Now select the “Paint Bucket Tool” again and change the color to a medium Gray (#8C8C8C). Fill the newly created feathered rectangle. We now have the shape of our iPhone but we need to hollow it out to make sure we have the chrome area all freed up for us to work with and put effects on.

We need to make sure the iPhone shape is dead center of our work area before we start messing around with it for easier work flow so go ahead and select the whole work area using the “Rectangular Marquee Tool“. After selecting the entire work area select the “Move Tool” and use the align buttons on the top of the screen to align the iPhone shape to the center of the work area. You do so by clicking “Align Vertical Centers” and “Align Horizontal Centers“. Our iPhone is now dead center of the work area.

Now select the iPhone shape and got to “Select” -> “Transform Selection…” In the input fields on top of the screen use the following settings: W: 92% and H:96%. Click the “Move Tool” to fix the selection (a window will come up saying “Apply the transformation?“, just click “Apply“.)

Now, delete the selection in the “iPhone Chrome Rim” layer giving us this:

Now we have our rim to work with. We are going to add a few effects to make it look more like a chrome rim so go ahead and right click the “iPhone Chrome Rim” layer and select “Blending Options…”

We are first going to add some bevel to the rim so go ahead and click “Bevel and Emboss” in the left menu of the “Blending Options..” left menu. After doing so add these settings:

Now continue to select the “Contour” option to the left and insert these settings:

We also need to add a “Color Overlay” to the chrome to get that realistic and natural shine of the material itself. Go ahead and click the “Color Overlay” option on the left side of the “Blending Options…” menu and insert these settings:

The color we are using is a light blue:ish color (#E9EEF0) for the natural shine.

The last effect we are going to add is a “Gradient Overlay” to mimic the shine streaks and the light reflections. Go ahead and select the “Gradient Overlay” in the left menu of the “Blending Options…” menu and insert these settings:

The color we are using for the gradient is pure white which you can set by clicking the preview of the gradient called “Gradient“. When you have the window open make sure you have the color to transparent gradient selected and make sure it starts from white by clicking the bottom rectangle color box presented underneath the gradient preview to the left.

Now we are done with the effects for our Chrome rim for our iPhone. Click “OK” to see your result. You should now have something looking like this:

Step 3

It’s time to add that shiny black touch surface that has become synonymous with the iPhone. We need to have a reflection image to use to enhance the realism of the image itself so go ahead and download this image before we start.

Select the “iPhone Chrome Rim” layer and then pick the “Magic Wand Tool” and select the inner void of the iPhone Chrome Rim.

OK, now select the “Background” layer and create a new layer above it. Call it “Touch Surface“.

With it selected and your selection still intact use the “Paint Bucket Tool” on your selection. Use pure Black (#000000) for color.

Now, with the “Touch Surface” layer still selected right click it and select “Blending Options…” Pick the “Bevel and Emboss” option in the menu to the left. Add these settings:

We need to create a little black outline of the surface to make it have the illusion of a real surface. Create another layer underneath the newly created “Touch Surface” layer name it “Touch Surface” as well. With the old “Touch Surface” layer selected go to “Layer” -> “Merge Down“. Our layer is now all fixated and we can add a few more effects to it.

With our new “Touch Surface” layer selected once again right click the layer and choose “Blending Options…” Select the “Stroke” option in the menu and add these settings:

Now we have a nice outer black line that encapsulates the touch surface giving the illusion that it’s mounted inside the chrome rim. You should now have something looking like this:

Step 4

Time to add that little touch window where all the action is happening. The illusion of a surface over the actual screen is captured by making the viewer believe the work window is underneath the black touch surface that makes up the front of the iPhone.

What we need to do is to first fixate the “Touch Surface” layer and cut a hole out in the middle of it to fit our “Touch Area” inside and underneath it. Create a new layer underneath the “Touch Surface” layer and again name it “Touch Surface“. Select the old “Touch Surface” and choose “Layer” -> “Merge Down“.

Now, with the new “Touch Surface” selected use the “Rectangular Marquee Toll” and create a rectangle right in the center of the iPhone “Touch Surface” with the following measures. Width: 180 and Height: 284. Delete the contents of your selected area.

Create a new layer underneath the “Touch Surface” and call it “Work Area“. We’re going to place a screenshot from the iPhone right in that opening so go ahead and download it and open it in Photoshop.

Copy the entire downloaded image and paste it into the “Work Area” layer and place it right in the center of the hole we just cut out from the “Touch Surface” layer.

Select the “Touch Surface” layer and right click it. Choose “Blending Options…” and from the menu click the “Drop Shadow” and add these settings:

We now have our work area in place and we are ready to go ahead and add more of the details to the iPhone itself. You should by now have something looking like this:

Step 5

It’s time to insert the all important “Home” button on our iPhone. It’s the one most important feature on the iPhone so let’s try and pay some extra attention to detail when we incorporate it.

Create a new layer above the “Touch Surface” layer for our “Home” button and call it simply “Home Button“. With the “Home Button” layer selected and at the bottom and in the horizontal center of the iPhone create a circle using the “Elliptical Marquee Tool” with the measure: Width: 35 and Height: 35.

Fill the selected circle using the “Paint Bucket Tool” with the color Black (#000000).

We now have our home button (even though we can’t see it yet) and we need to add some effects to it to make it really realistic.

With the “Home Button” layer selected right click it and choose “Blending Options…” In the menu to the left click “Bevel and Emboss” and insert the following settings:

We need to accentuate the button so it’s easy to see where the edges are so we need to add a little outline. Select the “Stroke” option in the menu and add the following settings:

Our button is done for now but we are still missing the little icon square that symbolizes home on the iPhone.

Create a new layer above the “Home Button” layer and call it “Home Icon“. Choose the “Rectangular Marquee Tool” and create a square measuring: Width: 13 and Height: 13.

Choose “Select” -> “Modify” -> “Smooth…” and set it to “1” and click “OK“.

Choose “Select” -> “Modify” -> “Feather…” and set it to “0,4” and click “OK“.

Now when we have our smooth, feathered selection we can go ahead and fill it with pure White color (#FFFFFF) using the “Paint Bucket Tool“.

With the selection intact choose “Select” -> “Transform Selection” and set the measures at the top of the screen to: Width: 80% and Height: 80%. Click the “Move Tool” and click “Apply“. With the intact selection delete the content inside it leaving only a round edged square icon. Position the square icon in the middle of the home button.

We now have our home button all completed and we can move on to the next detail on the iPhone. You should now have something looking like this:

Step 6

Let’s create the speaker at the top of the iPhone next. We want it to look as realistic as possible and for every little extra effort we put in to the details of this iPhone the more realistic it will look.

Create a new layer above the “Home Icon” layer and call it “Speaker Hollow“. Pick the “Rectangular Marquee Tool” and create a rectangle at the to top center of the iPhone using the measure: Width: 34 and Height: 6.

Choose “Select” -> “Modify” -> “Smooth…” and insert “1” and click “OK“.

Choose “Select” -> “Modify” -> “Border…” and insert “2” and click “OK“.

Choose “Select” -> “Modify” -> “Feather…” and insert “0,4” and click “OK“.

Now when we have our little feathered square ready go ahead and pick the “Paint Bucket Tool“. Select the color Black “#000000” and fill the selection.

Let’s add some effects to our newly created feathered rectangle. With the “Speaker Hollow” layer selected right click it and choose “Blending Options…” In the menu click “Bevel and Emboss” and insert these settings:

Now we need to add that little speaker “Net” that is present in the speaker hollow on the iPhone. We can get that from the picture we used for the “Work Area“, the iPhone Screenshot.

Load the iPhone Screenshot again if you have closed it already. Now, copy a piece of the “Net” from the iPhone “Dock” panel. Pick the upper top of the panel to get the a great piece. Make the piece: Width: 32 and Height: 6.

Create a new layer underneath the “Speaker Hollow” layer and name it “Speaker Net“. Paste the piece of net into our new layer and place the piece of the “Net” directly underneath the “Speaker Hollow“.

Let’s add some shadowing to our hollow to make it even more realistic. With the “Speaker Net” layer still selected set the layer’s “Opacity” to “50%“. This should make our “Net” appear a little more indent.

We now have our speaker all mad and we are ready to move along to the next little detail. You should now have something looking like this:

Step 7

We still have a few more details we need to take care of before we add the finishing touches to our new iPhone. There are three buttons on the left side of the iPhone and one on top of the iPhone. We are going to start with the “Volume” buttons on the left side of the iPhone.

Create a new layer underneath the “iPhone Chrome Rim” and name it “Left Buttons“. At the side of the iPhone, using the “Rectangular Marquee Tool“, create a rectangle using these measures: Width: 5 and Height: 30.

Using the “Paint Bucket Tool” fill the rectangle with a light Gray color (#8C8C8C).

Pick the “Elliptical Marquee Tool” and create a circle with the measures: Width: 25 and Height: 100. Position the circle like this and delete the contents of it:

Now we have the upper volume button done but we need the bottom one as well so go ahead and select the upper button using the “Rectangular Marquee Tool” and copy and paste it into a new layer.

Select the new layer that is named “Layer 1” and choose “Edit” -> “Transform” -> “Flip Vertical“.

Now move the new layer (”Layer 1“) and align it just underneath the upper button. Now choose “Layer” -> “Merge Down“. We now have our volume buttons all created. We now need to add some effects to it to make it look realistic.

Now pick the “Move Tool” and move the buttons four (4) pixels underneath the side of the Chrome Rim.

Go ahead and right click the “iPhone Chrome Rim” layer and choose “Copy Layer Style“. Select the “Left Buttons” layer and right click it and choose “Paste Layer Style“. There, now our buttons are made out of chrome as well.

Let’s add the “Vibrate/Mute” button before we take a look at what we have and move along to the top button.

Create a new layer above the “Left Buttons” layer. Pick the “Rectangular Marquee Tool” again and create a rectangle on the left side and above the volume buttons measuring: Width: 5 and Height: 10.

Fill it just like with the other buttons using the same Gray color we used for the “Volume” buttons.

When finished position it about ten (10) pixels above the top volume button. and again four (4) pixels in to the iPhone chrome rim.

With the new layer selected choose “Layer” -> “Merge Down” to fuse it with the “Left Buttons” layer.

Our left buttons are done and you should now have something looking like this:

Step 8

Now we only have the upper “Sleep” button left to create before we add the finishing touches to our iPhone.

Create another new layer above the “Left Buttons” layer and call it “Top Button“. With the “Rectangular Marquee Tool” create a rectangle on top of the iPhone to the right with the following measures: Width: 35 and Height: 6.

Again fill it, with the Gray color we used for all the other buttons, using the “Paint Bucket Tool“.

Position it five (5) pixels in under the chrome rim and about twenty (20) pixels in from the right edge of the iPhone.

With the layer still selected choose “Layer” -> “Merge Down“.

Select the “Left Buttons” layer and right click it. Choose “Copy Layer Style” then select the “Top Button” and right click it and choose “Paste Layer Style“.

We need to do some modifications to it in order to make it look good as the settings are meant for the side buttons.

Right click the “Top Button” layer and choose “Blending Options…” Click the “Bevel and Emboss” option in the menu. Now, change the angle of the shading to the following settings:

There, we are now all done with the details for the iPhone and all that’s left to do is to add the finishing touches to it. You should now have something looking like this:

Step 9

All we have to do now is to add a little shine to the thing and we are all done with our new iPhone.

Create a new layer on top of everything and call it “iPhone Shine“. Select the “iPhone Chrome Rim” layer and pick the “Magic Wand Tool“. Select the insides of the chrome rim and then pick the “Elliptical Marquee Tool“. With the “Elliptical Marquee Tool” hold down the “Alt” tool and start selecting as far as you can get at the bottom of the screen approximately 4/6th from the left edge of the iPhone.

Drag till you are about 4/6th from the top of the iPhone and drag it out to the right. You might have to do it a couple of times in order to achieve the right feel to it.

When you feel are done you should have a selection looking something like this:

Now, let’s add some shine shall we? Click the “Paint Bucket Tool” and hold down the button until you get to choose the “Gradient Tool“. With the tool selected make sure you have the “Color to Transparent” gradient in the list on top of the screen selected along with pure White (#000000) color.

Start using the “Gradient Tool” approximately about “50” pixels out on top of the selection and drag down (still holding down the mouse button) to approximately “100” pixels out under the selection and now release the mouse button.

After you’ve done adding the “Gradient Tool” to the selection you should have something looking like this:

The shine is still a little bit too overtaking so we need to quiet it down a bit for the really realistic look before we add THE final touch.

So, with the “iPhone Shine” layer selected change it’s “Opacity” to “30%“.

Step 10

It is finally time for the final step of this tutorial. It’s time to add some reflections to the iPhone for the ultra realistic effect.

Load your downloaded “Reflection Image” image and copy the entire image and paste it into a new layer underneath the “iPhone Shine” layer. Call the new layer “iPhone Reflection“. Position it where you think the image’s details would benefit the iPhone reflection.

Select the “iPhone Chrome Rim” layer and again, using the “Magic Wand Tool“, select the inside of the chrome rim.

Again select the “iPhone Reflection” layer (still having the “inside chrome rim” selection intact) and copy the content of the selection.

In a new layer (call it “iPhone Reflection” as well) paste the copied piece of the reflection image.

With the “iPhone Reflection” layer selected we need to change the “Opacity” of it to make it believable. Change it’s “Opacity” to “8%” which should give the iPhone a nice and realistic reflection of the surrounding room.

There! Our iPhone is finally finished and the result should look something like this with either Black or White background:

Note that I have adjusted the “Speaker Hollow” for a more vertical centration at the top of the iPhone. I had missed it during the creation and saw it now when I created the finishing images. Should be quite easy for you to do as well using the “Move Tool“.

Round Up

Well, that’s that ladies and gentlemen. The result is presented and the tutorial has come ti it’s end. I hope you all have enjoyed the this tutorial as much as I have enjoyed creating it. I find it soothing and inspirational working with graphics and I hope that it shows in the dedication of this tutorial.

As you can see there are no limits to what you can do with Photoshop and the trick is really only to set your mind to it and open up your imagination. As you can imagine you can now add any color to your iPhone and still have it looking quite realistic. Why not create a pink one and send the image to your friend as a joke saying you have the only pink one ever made. If you do, please send me the reaction and the response. I would very much like to hear it.

More tutorials will come shortly. Stay tuned!

Thank you!

52 Professional Website User Interface Photoshop Tutorials

Twinster — Tue, 28 Apr 2009 12:32:46 +0000

Are you struggling with the thought of designing your own website user interface? Are you thinking your designs are not up to the standards graphically? Well, no worries! It can sometimes be quite hard to find that bit of extra edge to add to the visitors experience to keep him/her coming back again and again. Here are a few professional looking website user interface Photoshop tutorials that can really put a positivie dent in your inspiration. Even though you might not follow them through entirely they can sure bring some input and curve you into the right direction.

Just as a pointer. WordPress Themes are usually free (except the premium ones) and allow you to freely modify and enhance the look and feel of it. This can sometimes be a good way to profile yourself among the other sites using the same theme as you. With some easy steps you can change it to what you feel is representing you. Maybe some of these tutorials will give you some ideas for that as well.

Enjoy!

Sleek And Textured Web Layout

A full web layout that sports a really nice design explained in this really simple and straight forward Photoshop tutorial. You have every chance to incorporate your own graphics to make this truly a useful and user friendly user interface design for your website.

Design Studio Header

A nice and clean design studio header user interface tutorial. Simple and with a great result. Tweaking this to whatever color or pattern you want is sure to make your design stand out in a professional way. Add some icons and you logo and you have a full design already.

3D Design Effect

Simple, stylish and certainly an eye catcher for your visitors. This simple tutorial will help you create a nice enclosed web design user interface for your website. Of course, as always, you have the possibility to style, add/remove and tweak this design to fit your needs.

Unique Header

This somewhat simple website user interface header is a nice start when designing your first website. The simple and straight forward tutorial makes it simple to follow and leaves quite a lot of room for you to decided yourself where you want to take it in terms of color and style.

Watercolor Menu

A really nice and inspiring watercolor website header that sports a lot of creativity. In this short (only 7 steps including the final one) but powerful tutorial you’ll be creating this quite interesting watercolor effect. This header could complement your site in a really professional way.

Advanced Game Interface

One of the most advanced and comprehensive user interface website layout tutorials in the bunch. The design is huge and take in every aspect of the site in detail. A great way to learn the depth of how to create a truly professional user interface website design.

Navigation Panel

A really simple and straight forward navigation panel user interface tutorial. Might not pack that creative punch you are looking for but certainly will give you some great pointers to blend your inspiration.

CSS Menu With Icons

A great and stylish CSS Menu with icons which is quite easy to accomplish and follow. The result is stunning and the ways you can tweak this tutorial will surely make your design look both professional and unique.

Column User Interface

A rather simple but effective user interface tutorial that with a few tweaks and modifications really can make your website design stand out. This is somewhat for the novice of the web designers however it presents some great pointers and tips.

Beer Bar User Interface

A really nice and simple user interface tutorial that leaves a lot of creativity for you to pick up. This straight forward tutorial gives you tons of pointers in how to create and design your own food orientated website.

Web 2.0 Tab

A really nice and current tutorial on how to create a stunningly simple but great design for a Web 2.0 tab. Again with a few tweaks such as adding your own icons and color changes on the tabs will sure make this tutorial a great asset for your website user interface design.

Vista Menu

A stunningly beautiful Vista menu user interface that keeps you in the clear of the up to date effects now seen on most websites around the Internet. Simple to follow and really well formulated. Again you can tweak it to fit icons and logos and it’s really up to you where you want to take it.

Grungy Web Layout

A full website design tutorial that will take you from scratch to finish withing a few simple steps. The result is a stunningly professional and user friendly website design layout that instantly speaks to the visitor. Fully customizable to your needs and taste.

Sleek And High End

A simple and nice looking website design layout. In a few steps you have this entire user interface all wrapped up and ready to go. The tutorial will take you though all the necessary steps to create this “theme” for you to use. Only your imagination and taste decides where you want to take it.

Grungy Interface

A beautifully rough and grungy website user interface that is truly on the edge. In just 29 steps this tutorial will take you through the process of creating this out of the box edgy “theme” design. Some really nice ideas and pointers is sure to catch the visitors interest.

Band Interface

Ever wanted to create a website for your band? Well, here is a simple yet quite powerful tutorial on how to create that grungy but still sleek look. This user interface design is simple and leaves a lot of room for your own creativity to speak it’s language.

Dark Interface

A dark and grungy website user interface with plenty of ways to tweak it your way. Looking at the original tutorials final result it can come across quite cluttered and dark but it fast becomes clear that it has huge possibilities. Add your own touch to it and you’ll have a sure eye catcher.

Volkswagen Navigation

Car brand websites has always sported some really nice designs through out the course of the Internet. Volkswagen has their own navigation panel for their website and here is a tutorial for you to create your own Volkswagen inspired navigation panel for your website.

CSS Based Interface

This playful CSS based user interface is quite a nice addition to this collection of tutorials. The tutorial is super extensive and describes every step in the most detailed ways. All the CSS code is carefully explained and this design will sure give you some inspiration.

Professional Header

This user interface tutorial will take you through the steps on how to create this hybrid tabbed professional header design. With a bit of tweaking you can create quite a huge variety of different styles sure to fit your own taste and needs.

Sleek & Simple Footer

Any website could use a footer to type out the usual copyright declaration and possibly some user agreement rules or a link to a site map. This tutorial will take you through the process of creating a really stylish and professional footer for you new website.

Slick Blue Navigation

A truly stylish and useful navigation header for any professional website design. This tutorial sports a simple and straight forward way of creating this minimalistic website header. Bigger icons will sure make this navigation panel look quite different and would bring some eyes your way.

Latest Tweets Box

I bet there’s not anyone out there still that haven’t head of the huge impact Twitter has had on the social networking of Web 2.0. This simple and stylish “Latest Tweets Box” will preview all your latest tweets right on your website for your visitors to see. Great and simple tutorial.

Unique Bookmark Box

Social bookmarking has become a huge success and a great way to keep track of your favorite websites and resources. This tutorial will take you through the process of creating a really neat and useful social bookmark box. The design is entirely up to your imagination if you want to tweak it.

Sounds System Studio Layout

A blue:ish and stylish user interface design that is quite original in it’s creation. This tutorial will teach you some nice and useful website design effects that will promote your website in your visitors eyes quite well. The tutorial is quite extensive and goes into the depth of things.

Hero Header

PSHero incorporates a really nice and edgy header user interface on their tutorial website. They have created a nice tutorial explaining how to create one just like it. The tutorial is really easy to follow and it makes great sense to change and tweak it a little for your own website.

Modern Web Layout

This tutorial is one of my favorite. It doesn’t only teach you how to create a really nice user interface website design, it also teaches you how to create this really nice metal/plastic look and feel. A truly eye catching results makes this tutorial one of the top rated ones.

Design Studio Web Layout

A really modern and fun user interface website design tutorial that takes you through the process of creating this stunningly fresh and useful design in 6 pages. A little bit of customization and you will have a design that can stand the test of the modern progressive design evolution.

Header Backgrounds

Usually headers sports some nice backgrounds to make them more eye catching and appealing. This tutorial helps you create a really fresh and modern header background that you can really use in your design. Stylish and vibrant colors make this header quite interesting.

Content Box

A 3D content box that handle navigation in quite a stylish way. This tutorial will take you through the process of creating this very useful navigation panel. I would personally liked it a bit more “smoother” but its uses can be many and it’s up to you to make the changes best suited for you.

Design Studio Layout

A simple but bulky design that reminds me of Steve Wozniak (probably due to the business card used in the tutorial). Maybe even the idea for the site comes from Steve Wozniak’s own site. No matter what, this tutorial will teach you how to create a dark, nice and simple user interface.

Glossy Carbon Fibre Navigation

I have always like the look of the glossy icons or the carbon fibre layouts. This tutorial will teach you how to create a minimalistic glossy carbon fibre navigation menu that will enhance your website in the best of ways. Tweak it a little and the result could be stunningly beautiful.

Green Content Box

There are a million ways to design and create a really useful content box for you website user interface. This one feels fresh and creative and this tutorial teaches you in surprisingly few steps how to create it. The tweaking is up to your imagination as always.

Nature Inspired Painted Background

User interface backgrounds are always great to look at if they are carefully planned and creatively produced and this one is a great example of that. The soothing feeling in this design is eye catching and enjoyable. This tutorial will teach you how to accomplish just that in only 7 steps.

Viget Inspire Background

This hybrid watercolor/grunge background user interface design is stunningly beautiful. This tutorial will teach you how to accomplish this effect in just a few simple steps. The design is soothing and creates an urge to come back for more. It’s a sure visitor eye catcher

Tutzor Web 2.0 Design

A really effective still really simple way of accomplishing a nice and clean website user interface design. In 26 steps this tutorial will take you from nothing to a really stylish and scalable website “theme” that you can keep adding to long after you’re through with this tutorial.

Business Website Page

A really unique and comprehensive approach to a business website page that you are sure to get some nice comments about. Even though I have been opposed to the tabbed dottings of any website design this one is appealing and simple. Great tutorial to create a unique and fresh user interface design.

Real Estate Theme

If you ever thought of starting your real estate company or maybe you’re already a realtor and need a nice “theme:ed” website. This tutorial will teach you how to create that really nice user interface design for you realtor needs. Vibrant colors and great layout.

Stylish Black Layout

A neat and unique look makes this user interface intriguing and bold in every way. Either you love it or you don’t. Even if you don’t this tutorial will teach you some invaluable techniques and pointers that will sure inspire you to create a great and useful website user interface design.

Professional Web Template

A vibrant colored and appealing website user interface design. This tutorial teaches you how to create this stunningly bright and colorful breed of website design in just a few steps (2 pages, real simple). Coloring your website differently will make a huge difference if you don’t like the yellow and blueish feel to it.

Portfolio Web Layout

A fun and playfully designed user interface that captures the visitor and viewer in the best of ways. This tutorial takes you through the process of how to create this detailed and tender website design. In just 18 steps you’ll have a fully compressed website user interface all wrapped up.

Flickr Box

We all love Flickr to some extent. Design websites usually have a Flickr box all set up to preview new work or their visitors work. This tutorial teaches you how to create a stylish and fresh Flickr box that will sure put your or your visitors pictures in the center of attention.

Interior Design Layout

This captivating and seamless user interface design is perfect for your interior design website project. This tutorial takes you through a number of steps creating it however it maybe be quite hard to follow so I suggest you download the accompanied files instead to understand the tutorial better.

Vista Style NavBar

This clean and freshly styled navigation bar a’la Vista style is a great way to create a professional navigation solution for your user interface design. This tutorial takes you through the simple steps of creating this really nice bar. Plenty of tweaking possibilities here.

Chopper Layout

A one of a kind user interface that has that little extra bling to it. This tutorial will take you through the process of creating this simple yet useful and blingy user interface website design. Complete with photo spots and great layout this is a sure bet for any car/bike enthusiasts.

Modern Portfolio Layout

A creative and modern way to create a really nice user interface. This tutorial, consisting of 7 pages, will teach you how to accomplish this appealing design. It has many pointers and tips worth checking out and should inspire you to be creative.

Design Studio Theme

Simple but really nice looking website user interface with vibrant colors and great easy to use layout. This tutorial will take you through the process of creating this really nice website template in just 6 pages of instructions.

Web 2.0 Content Box

Again, content boxes have become a great design aspect when it comes to user interface design. Blogs and website use them to style their posts or ad boxes to make them more appealing to the visitor. This tutorial will teach you how to create a really clean and useful Web 2.0 content box.

Cool Photography Layout

Stunningly simple but effective website user interface design. In just 14 steps we’ll learn how to create this appealing website template. You can go ahead and do all the modifications you want and it’s only up to your inspiration and imagination where you want and need to take it.

Royal Interface

This tutorial handles a quite pristine user interface that is sure to catch the visitors eyes in the best of ways. However, I wouldn’t really call this one a website user interface, instead a theme design with that little extra to it. In 10 pages we will learn how to create this nice theme.

Design Theme Layout

This nice and clean design theme layout is somewhat flash inspired in my opinion. It feels fresh but still dated in a way but this tutorial is sure to help you create a nice and clean website user interface. 13 pages and you will be set to add your content.

Professional Blog Layout

This comprehensive and well designed layout is a sure bet if you want your blog user interface to look clean and appealing. This tutorial will take you through the steps of creating this quite stylish yet modifiable professional blog layout. Let your imagination flow.