Creating a blog layout isn’t that hard, the only thing you need is what kind of layout do you want. It maybe two column, three column and the list goes on. Keep in mind however that most themes have multiple page templates today e.g. blog index, archive page, contact page, front page (for CMS style sites where the blog is just an element). Today we will create a blog layout (the blog index page) in Photoshop, and convert it onto HTML / CSS (on the next series) and finally on a convert it again on a WordPress Theme. I hope you are ready because everything will be from scratch.

Our first part is to create the layout in Photoshop, and we are using a two column layout for our blog.

I suggest you subscribe to our RSS because this will be a series of tutorials and you don’t want to be left behind!

Advertisement

Blog Layout

Let’s begin!

Create a new file as shown below.

Open your canvas and set the sizes to 1000px for width and 1300 for height.

Fill your background with #f9faf9 and go to filter > noise > add noise, set the amount to 1%.

Create a new layer name header, grab your Marquee Tool (M) and select 100px on top, fill it with #404040.

We will now create a logo, select the color #ff6f17 and use the font Eras Bold ITC 53PT.

Select Blending Options > Drop Shadow and set the color to #dbdbdb, the rest is default.

On Inner Glow, set the color to #fbfbfb and size to 1px.

In Gradient, follow this colors and hit OK.

Follow the Gradient Settings above.

In Stroke, set the color to #fcc19f and size to 1px.

You should have something like this.

For the “Magazine” word, select drop shadow color #000000, size and distance to 1px.

Here is your logo.

We will create the navigation, use Arial Regular 28pt color #fff except on “Home” which is color #000000.

Grab your Rounded Rectangle Tool (U) radius 8px, and create the shape under home layer.

Select Marquee Tool (M) and delete the lower part of the current layer.

Your navigation should look like this.

Now on the content. Grab your Rounded Rectangle Tool (U) raduis 3px and select the left side of the canvas.

Still on content layer, go to blending options > drop shadow, use the color #dfdfdf. Blending Mode to normal, and the rest are defaults.

In stroke, color is #dcdcdc and set the size to 1px.

Grab Marquee Tool (M) and select a rectangular shape inside content layer.

Drag ‘n drop the image and right click > create clipping mask. The image will be inside the selected box.

On our image layer, select inner glow  and set the blending mode to normal, the rest are defaults.

Stroke color is #959595 and set the size to 1px, Opacity to 40%.

Check out the border of the image. I also added some text, for the title I use Bebas 32pt color #505050 and the exceprt is Arial 28pt color is #888888 Regular.

Duplicate the layers and post different pictures so it’ll look more alive.

Now we will work on the sidebar, grab Rounded Rectangular Tool (U) and set the radius to 3px.

Blending Option > Drop Shadow, set your foreground to #818181 and distance to 1px.

Inner Glow, change blending mode to normal and size to 1px.

Copy the gradient color settings above.

In stroke, color is #b1b1b1 size is 1px, Opacity 100%.

You should have the same image as above, I also added some text. I use Bebas 28pt color #8f8f8f. Next is to sunken the text!

For our sunken text, in drop shadow color #ffffff, blending mode normal and distance & size are 1px.

Inner shadow color is #f2f2f2 and distance and size is 1px.

This is our title sidebar, compare the one you have above

Now we will create an advertisement holder, select Marquee Tool (M) and draw a 125px by 125px on the sidebar. Fill with #5f5f5f.

In gradient, follow the settings above.

Now we have these ads holder. Next is to add some text.

I added some text, I use Arial 19pt Regular color is #fffff. And then I added some dropshadow set the color to #00000, size and distance to 1px. Duplicate the layer and display 2 in a row.

For sidebar title just duplicate the one that we created above. Create some text for random post section, I use Bebas 24pt color #505050.

Grab your Elliptical Marquee Tool (M) and draw a line under the title of the post. Create a new layer and fill the first one with #d9d5d7, create a new layer again (for the second one) and fill it with #ffffff. I use brush for filling the lines with colors

Now, press your down arrow keys once to drop 1px and show the first layer of line. See the sunken line effect on close up.

Duplicate the layer and fill in those left titles. You can compare your work now

For footer, select Marquee Tool (M) and fill it with #404040. For the text I use Arial 12pt color #8f8f8f with a little bit of drop shadow.

There you have it! You see creating a blog layout on Photoshop isn’t that hard, and we are just getting started. The next part is converting this into HTML and CSS, remember we will convert this into a full working WordPress Theme so I suggest to subscribe on RSS so you’ll know when will be the next part. See you on the next series

Download the free PSD file here.

• Creating a Clean and Elegant Blog Design with Photoshop, Part 1
• How to Create a Blog Layout Part 2 [PSD to HTML]
• Creating a Clean and Elegant Blog Design with Photoshop, Part 3

I’ve been thinking to put a search box on my site lately, and while doodling in Photoshop for some design I finally had something. So while I am still waiting to decide on where on my site I should put it – I wanted to show you how I created it in detailed steps.

Again, all of my tutorials are fairly easy to do. No special technique has been used, if you got lost on the steps please do ask me in the comments below.

Final Result

Advertisement

Let’s begin!

Open your canvas, use width 400px and height 200px.

Grab your Rounded Rectangle Tool (U) and set the radius to 5px. Draw the same shape like above.

In Blending Options > Drop Shadow set your foreground to #818181 and Distance 1px and Size 5px.

Select Inner Glow and set the Foreground to #FFFFF and change the size to 1px.

On Gradient Overlay, set this colors.

Follow the Gradient Settings above.

In Stroke, change the color to #b1b1b1 and set the size to 1px, Opacity to 100%.

You should have the same box like the one above.

We will create another one, this will be our input field (when doing HTML). Same as the first step, Rounded Rectangle Tool – radius is set to 5px.

On Drop Shadow, change the Foreground to #FFFFF and Distance and Size to 2px.

Now select Inner Shadow, Foreground color #b6b6b6 and Angle to 90, Distance 1px and Size to 5px.

Inner Glow, Foreground color #FFFFF change the Size to 1px and hit OK.

Now select Stroke and set the size to 1px. Change your color to #9d9d9d.

Here is our form field, it’s coming out pretty well.

Now, we will create the search button. Create a new layer and select Marquee Tool (M), draw a square shape like the one above. Fill it with #5d8f27.

Now, while still highlighting the search button layer click the input field layer and press CTRL + SHIFT + I and hit delete. Result should be the same above.

On search button layer, Blending Options > Drop Shadow set the Distance to 1px, Size 2px.

In Gradient > follow the color settings above and hit OK.

To create a left border on the button, we will add a line. On Single Row Marquee Tool (M) and fill in the color with #76a934.

Here is our search button, I also added some text. I use Bebas 16pt #5b8c26.

Next is to create some detail to our text. Drop Shadow > set the color to #fffff and Distance and Size to 1px also angle to 90.

In Inner Shadow, Foreground is #538224 and Distance, Size 1px.

Here is the text, someone is looking for a job! Font is Bebas 16pt #6f6f6f.

On text that we just put in, select Blending Options > Drop Shadow and follow the settings above.

Inner Shadow use #00000, and Distance, Size 1px.

Here it is! Almost done, now to add some background patterns so it’ll look good.

Ta-da! Here it is, finally. As you’ve noticed we didn’t use any new or advance technique to create this search bar UI. What we used a lot is blending options for layers and a few gradients which gives us a greater detail. You can download the PSD here for free.

The question now is, can you turn this into a working HTML / CSS search bar form? So I can finally use it on my website

Author : Sanjay Khemlani

Sanjay is a Web Designer from Philippines, he is dedicated to clean coding and effective design. He also writes tutorials about Web IU and Web Design on his blog.

• How to Create a Clean Login Form in Photoshop
• How to Create your Own Chat Window UI in Photoshop
• How to Create a Blog Layout in Photoshop

A calendar is a system of organizing days for social, religious, commercial, or administrative purposes. This is done by giving names to periods of time, typically days,weeks, months, and years. A calendar is also a physical device. This is the most common usage of the word. Other similar types of calendars can include computerized systems, which can be set to remind the user of upcoming events and appointments.

As the year 2012 is fast approaching! Some of you cross your fingers for a peaceful and productive year ahead, it would be a good idea to have your 2012 calendars printed as early as now. Calendars can help you start the year right as you can use them to mark goals and important dates for 2012. Furthermore, they can serve as excellent decoration especially if you design them yourself.

With 2012 creeping just around the corner, each person is gearing up to welcoming it with open arms! In this article, I have gathered some awesome and creative 2012 calendar designs that will surely inspire you. Feel free to comment if I missed out some creative calendar designs, or you may share your designs as well. Enjoy!

Advertisement

1. The Brown Boat

2. Letterpess calendar 2012

3. Landscape

4. 2012 petit calendar

5. 2012 Letterpress calendar

6. Inherit: 2012 Wall Calendar

7. Perin Rahmbia

8. The Design & Designers 2011 letterpress calendar

9. Bold and Noble

10. KKN Calendar 2012

11. Memory of Dreams

12. Fantasy Art Calendar

13. 2012 Calendar of Silly Holidays

14. Calendar 2012 – Type Experiments

15. Szani Mezaros

16. Trebleseven TwentyTwelve calendar

17. Avril Loreti

18. Verlag Hermann Schmidt Time Cube Desk Calendar 2012

19. Cats Let Nothing Darken Their Roar

20. Accordion Calendar

21. Bubble Calendar

22. Surge Calendar

23. Vertical

24. Blue Ant Studio

25. Wall Calendar

26. Petit Paperie

27. Jumping Point Calendar

28. Year Of Type calendar

29. To-Do List Pad calendar

30. Typodarium

31. Faerie Folk

32. Every Child Deserves A Fairy Tale

33. From Pigment to Pantone • 2012 Calendar

34. 2012 Calendar Century Typeface Study

35. inspirational and memorable

Author : Dustin Betonio

Dustin Betonio is a Translation Management graduate at University of Mindanao. His earlier career was devoted on customer service outside the information highway. Currently studying Law in the same University.

• 30 Awesome and Creative Calendar Designs for 2011
• 30 Superb Happy New Year 2012 Wallpapers
• 30 Creative and Superb Happy New Year 2011 Wallpaper Designs

In this tutorial we will create a clean login form that you can use on your own web design projects, the techniques used will be pretty basic and explained as we proceed. If you’re a newbie on Photoshop, you should read along as you might find new Photoshop tricks. This tutorials has been inspired by a great login form design created by Jan Losert @ 365psd.

Advertisement

End Result

Let’s Begin!

Open your canvas, set the width to 450px and height to 400px.

Grab Rounded Rectangle Tool (U) set radius to 5px, and draw the rectangular shape same as above. Name this one as body.

In body layer, right click > Blending Options > Drop shadow set the angle to 90, distance and size to 1px.

Next is Stroke, set the size to 1px and Opacity to 100%.

After that duplicate your body layer, press arrow key up 2 times so it’ll move 2px above. Do this for the rest of the duplicate.

Write the welcome text above, I use Arial Bold 15pt color #c8c8c8.

Select your Rounded Rectangle Tool (U) same radius as before (5px) and draw the input form field.

In Blending Options > Gradient Overlay set the colors as above.

Follow the Gradient settings above.

In Stroke, set the size to 1px Opacity to 35px and color #d0cfcf.

Here is what your input form should look like.

Duplicate the input form by pressing CTRL + J and move the form below.

I also inserted the text for the input form, I use Arial Bold 15pt #dddddd. Now we will work on the button, Grab Rounded Rectangle Tool (U) and draw the shape same as above, set the radius to 5px. Background color is #0570a7.

In button layer, right click > Blending Options > Drop Shadow set the distance and size to 1px.

Inner Shadow set the foreground to #fbfbfb and size to 1px.

Follow the color settings above.

Here is the Gradient Overlay settings.

In Stroke, set the size to 1px and Opacity to 100%.

Here is our button, yours should look like the one above.

Add some text on the button, I used Arial 15pt Bold #ffffff.

To add some effect on our text, we will add drop shadow. Set the distance and size to 1px and fill in the color.

Under our button, we will add a checkbox. Every Login form uses a “Keep me login” feature. For that, grab your Rectangle Tool (U) and create a small square shape just below the button.

In checkbox layer, Blending Options > Gradient Overlay and fill in these colors.

In Stroke, set the size to 1px and use the foreground color #cacccd.

Here is the form, the text I added was Arial Bold 11pt #d7d5d5.

We will some text, I use Arial Bold 15pt and fill those colors above. The highlighted one is the link.

Another text was added, same color just change your font size to 12pt and you’re good to go.

We are done! As you can see, we used clean layout with basic tricks mainly on blending options. Keeping it clean and simple is one of the best layout we could offer to our clients. You can download the Freebie PSD here.

If you came up with different versions or you have other tutorial suggestions, feel free to do so in the comments below. I am eager to see what you guys have!

Author : Sanjay Khemlani

Sanjay is a Web Designer from Philippines, he is dedicated to clean coding and effective design. He also writes tutorials about Web IU and Web Design on his blog.

• How to Create a Seach Bar in Photoshop
• How to Create your Own Chat Window UI in Photoshop
• Creating a Clean and Elegant Blog Design with Photoshop, Part 1

Recently I was talking to a friend on Facebook, during the conversation I noticed the chat window UI and though to my self “what if I design my own chat window”? Well that’s the inspiration for today’s tutorial, we will create our very own chat window in Photoshop. Although the techniques that we will use are basic, I do hope that you’ll learn something here.

Advertisement

This tutorial is aimed for newbies, but if you’re a rockstar in Photoshop and you want to share a few tricks of your own, feel free to follow.

Final Product

Let’s Begin

Open your Photoshop and set the size to 450px width, 300px height.

Now, fill our canvas using Paint Bucket Tool (G) and select the color #e9e8e8.

Name this layer as Body, grab your Rounded Rectangular Tool (U), set your radius to 3px and draw a square like shape. Now we will create another shape, hold Shift and draw another rectangular shape. This time radius was set to 0.

In Body layer, right click the layer and select Blending Options > Drop Shadow and set your color to #bab6b6.

Now on Gradient Overlay, follow the settings above.

In Gradient Overlay Settings, make sure that angle is set to 90 and Opacity is at 100%.

Next is Stroke, set the Size to 1px, Opacity to 100% and follow the given color hex.

You should have something like this one, notice the shadow and stoke that we did.

Create a new layer and name it header, grab your Marquee Tool (M) and draw the shape same as above. Fill it with #2998ed.

While still selecting the header layer, hold CTRL + Click on the body layer and hit CTRL +Shift + I and delete. The excess of the header will be removed. You should have the same header layer as the one above.

On header layer, Right Click > Blending Options and select Inner Shadow, set your angle to 90 and Size is 2.

Now on Gradient Overlay, set this colors and hit OK.

In Stroke, set the size to 1px and use the color #2576b4 hit Ok.

Here is our header layer should look like, now we will add some text.

Add your name on the layer, we used Arial Regular 13pt color #FFFFFF.

We will add some detail to our text to make it “POP”. In Blending Options > Drop Shadow set Distance and Size to 1px, Change the Blend More to Normal and Angle to 90.

After that we will create the exit button on the right side, just type in the “x” character on the right side same as above.

In Blending Options > Drop Shadow set the Distance to 1px and Opacity to 38%.

Now on Inner Shadow, set your Distance and Size to 1px and angle is 90.

Our header should look like this. Now let’s move on to the chat conversation!

Bring in some photo (we will use mine) and set the size 40px by 40px.

On image layer, go to Blending Options and set Drop Shadow Distance and Size to 5px, angle 90.

In stroke, set the size to 1px and color #FFFFFF

After that we will add some text, for the name text I used Arial Regular 13pt #1e6daa. For the conversation text Arial Regular 13pt #8e8e8f, for the date Arial Regular 8pt #a2a2a2.

We will just replicate the conversation, and add another image to make it more realistic.

Between those conversation text there will be a line, grab Single Row Marquee Tool (M) and draw the line same as above.

Use the color #f3f3f3 for the lines and set the opacity to 82%, delete the excess on the both sides.

Now we will work on the icons, on Custom Shape Tool (U) select the speech balloons shape (grab here) and draw one facing left. Use the color #b5b5b5.

Duplicate the first one, and press CTRL + T and select Flip Horizontal. In Blending Options > Stroke and set the color to #FFFFF and size to 1px.

I added another name text at the bottom of the chat window, on the right part we will put a status icon name this one status. Select Ellipse Tool (U) and hold Shift, draw a small circle.

Blending Options > Gradient Overlay follow the color settings above.

In Stroke, set your size to 1px and use the color #83a659.

Final Product

And we are done! I hope you learned a few tricks by following this tutorial, some of the things that you should take note is the detail on the header, shadow on the body and of course our clean chat window UI.

If you came up with different versions of your own, feel free to post your work in the comments below. I want to see what you guys have! Also if you have questions or stuck on some of the steps, feel free to ask in the comments.

>> You can download the layerd PSD here showing how I structured it <<

• How to Create a Seach Bar in Photoshop
• How to Create a Clean Login Form in Photoshop
• How to Create a Blog Layout in Photoshop

Designing websites is a creative process and it isn’t easy at all to get started if your don’t have the right ideas, inspiration and tools available. There are several different ways you can approach the design process and depending on what type of design task you’re facing some have pros and some have cons. If you’re designing a lot of pages for a complex application for a customer that requires to approve the usability and easy of use early an ongoing it may be a good idea to start with a mock-up (simple html page hierarchy with minimal design to start with). If on the other hand you’re designing a blog theme with a very sophisticated layout containing many textures and images it may be much better to start the design process in an application like Photoshop. This is the approach this article covers end to end by presenting you with more than 160 high quality Web Design Tutorial showcase that guides you step by step in building up a web interface all the way from scratch. The article will take some time to download because of the many images!

• Web development toturials
• Business Websites Designs
• Blog Designs
• Portfolio Designs
• Grunge and Texture Designs
• Photoshop Tutorials for designing Website Elements

Actually I don’t think that most people will have to be attend design courses or Photoshop training any more to learn the basics; most people can be self-taught thanks to the many generous experts willing to share their tricks in free online tutorials. Instead of designing from ground up it is also an option to use e.g. cute tumblr themes or some of the best wordpress themes. Both publishing platforms are easy to use, free and very popular.

Advertisement

The Web Design Tutorial Collection

Web development tutorials

Object-Oriented Programming in PHP

This web design tutorial helps you understand object oriented programming – being well aware that it is hard!

This is a set massive video series separated into three parts. If you want to dig into Object Oriented Programming, and, not only understand the concepts, but also understand WHEN and HOW you would actually use these techniques – then check this out.

 CSS: Noob to Ninja

This training video series will take you from being an absolute CSS “noob,” all the way up to ninja-status, capable of wrangling even the most obnoxious of browsers into place. The web design tutorial series begins with the basics: the syntax, properties, etc. However, each new video expands upon the previous, as you work your way up and improve your skills.

If you’re switching over from a graphic design career, or are hoping to finally dig into CSS from scratch, this will be the series for you. And even if you have a modest level of experience and want to take your skills to the next level, learning the latest CSS3 techniques, the latter part of this series will surely quench that thirst!

The Beginner’s Guide to Web Design

Throughout this three-part series, you will learn how to create a website using the latest in web design techniques (HTML5 & CSS3 ).

No previous web design experience is required – you will start at the beginning, learning the basics of HTML and CSS , and working up your skills until we have a functioning website.

How to Build a Newspaper Website with a Grid

In this Premium web design tutorial, you’ll learn how to use a grid to create a simple newspaper-like website from scratch. Along the way, you’ll learn helpful techniques:

• Create the layout of a website from scratch.
• Easy ways to target IE7 and IE6 with only a single character
• Learn how to use the 960 grid system
• Take advantage of new CSS3 to create multiple columns!

How to Code a Gorgeous Watercolor Website

This web design tutorial is a useful guide for both expert and noob designers/developers who wants to learn more about how to convert complex designs to standards-compliant websites. We’ll learn the basics of slicing a PSD design, how to convert it into a 100% functional HTML +CSS+JavaScript mockup, and more.

Professional Web Design

This eBook web design tutorial presents guidelines for professional Web development, including communicating with clients, creating a road map to a successful portfolio, rules for professional networking and tips on designing user interfaces for business Web applications. The book shares expert advice, and it also helps you learn how to respond effectively to design criticism, use storytelling for a better user experience and apply color theory to your professional designs.

Business Websites Designs

Web 2.0 Business Layout

Create a web 2.0 business layout with a lot of empty spaces with this web design tutorial.

Corporate Business Layout

Make a clean corporate style layout for your business with this web design tutorial.

Simple Clean Business Layout

In this web design tutorial, it shows you how to make a really simple clean business layout.

Real Estate Web Site Design

This real estate web design tutorial will take you through a step by step process if you offer web design services to your agents/realtors.

Business PSD Layout

Create a business PSD layout in less than 10 minutes with this web design tutorial.

Trendy Business and Finance Layout

Whether you are a single entrepreneur involved in financing and accounting or a member of school of business, you will definitely love the following layout.

Web Design Layout

Dark Corporate Layout

This website design tutorial will show you how to create a sleek corporate layout and you can use this layout also for any internet business you want.

Clean Business Layout

Create a simple and professional website design, a business-themed website template.

Dark Web Hosting Layout website design tutorial

This web design tutorial will show you how to create a layout for a web hosting company using Adobe Photoshop.

Corporate WordPress Style Layout

In this web design tutorial you will learn how to create a corporate wordpress styled layout.

Business WordPress PSD Layout

Create a nice business WordPress layout which can be used also for a corporate layout.

WordPress Theme Design in Photoshop

This web design tutorial takes you through all the details of designing a Winter Theme Template in Photoshop.

Awesome Software Layout

This web design tutorial will show you how to create your own software PSD layout.

Sleek Professional Looking Business Layout website design tutorial

Create a sleek professional looking business layout with this web design tutorial.

Sleek Business Layout

Make a sleek business layout with this web design tutorial.

Computer Store Web Layout

Web design tutorial on how to create a Web Layout for Computer Store.

Professional Business Layout

Web design tutorial – Create a sleek business layout from scratch.

Creating Business Style Template Design

There are a lot of resources that provide free website templates in Internet. One of them – FreeTemplatesOnline.com Here you can download plenty of free and premium templates. However, if this is a free (or premium) template, somebody else can also download it, and use it for his website. That’s why I’ve made up my mind to make a web design tutorial with the detailed description of creating a template from the very beginning. I hope it allows you to create your own templates in future, or to make some changes in the existing ones.

Arhitecture Bureau Layout

This web design tutorial will show you how to design such a layout from scratch.

Create Real Estate template

How to make nice looking web template for Real Estate site.

Interior Design Layout

Professional Web Template website design tutorial

Design a nice an professional web template in Photoshop

ECommerce Web Layout

In this web design tutorial you will create a spare parts ecommerce layout. It can be used for magento, oscommerce, or any e-commerce cms you want.

Web 20 style blog

Several new techniques are covered in this web design tutorial, such as interesting use of the drop shadow element. We’ll also cover creating a see-through navigation bar, as well as creating our own unique icons for this layout!

Modern Web Layout

This Photoshop tutorial will show you how to create a portfolio Layout.

Web 2.0 Layout

In this web design tutorial, you’ll learn how to create a very fancy “Web 2.0? website layout in Adobe Photoshop using beginners skills.

Clean Web 2.0 Style Design

In this Photoshop web design tutorial, you’ll learn, step-by-step, how to create a stunning and clean web layout.

Modern Web 2.0 Layout

This web design tutorial is going to teach you how to create a modern web 2.0 styled web layout from scratch.

Real Estate Web Design

Create a clean and contemporary website design for a real estate related website.

Create Chopper Layout

Creating a Professional Business Layout

Web design tutorial on how to Create a unique business layout using Adobe Photoshop

Business Web Page

How to create a web layout for your Business Website

Cool Photography Layout

How to design a simple blue layout with Photoshop by combining shapes and layer styles.

Clean Business Layout website design tutorial

Dark and Sleek Web Layout

In this Photoshop web design tutorial, you are going to create a beautiful, dark, and sleek website mock-up centered on an elegant navigation menu that lends itself easily to CSS background sprites.

Two Color Website Layout

Web design tutorialon how to create a clean website layout using only a few colors.

iPhone Related Website

This web design tutorial will show you how to create a website for a iPhone business.

Awesome Colorful Layout

This web design tutorial i will show you how to create another web 2.0 layout for your creative portfolio.

Typography Layout

This web design tutorial will show you how create a nice typography layout.
These types of layouts will help you to effectively and accurately transmit the message.

Create a Jewelry Web Template

Learn how to Create a Jewelry Web Template with this very easy to follow tutorial.

Beauty Web Layout

This web design tutorial will show you how to create a layout for a beauty salon in 10 simple steps.

Creative Unusual Layout

This web design tutorial will show you how to manipulate some simple shapes, to obtain a wonderful layout.

Creative Studio Web Page

Dark Style Web Layout

This web design tutorial will show you how to create a sleek dark style layout.

Futuristic Web Layout

Coding a Layout with XHTML and CSS

This is a web design tutorial done by erracticwisdom. They do a good job explaining the tutorial, but its forwarded more towards users with a little more experience.

Simple and Clean Portfolio Layout Coding

This is a great tutorial done by hv-designs describing how to code a simple portfolio layout.

Clean black and green webdesign

Product Sales Page

Grunge and Texture Designs

Design A Grungy Website Design In Photoshop

Grunge Photographer Layout

This web design tutorial will show you how to create a grunge layout for a photographer. This layout can be used also for a portfolio layout.

Grunge-Themed Web Layout

In this step-by-step web design tutorial, you will learn how to craft a beautiful and eye-grabbing grunge-themed web layout using Photoshop.

Cartoon Grunge Web Site Layout

Learn how to add a worn look that works well with cartoon-style graphics.

Clean Grunge Blog Design

This tutorial will cover the steps of designing the Clean Grunge blog design from scratch. It also discusses the techniques and styles of this kind of web design.

Create an extreme sports layout

Create a PSD layout for a extreme sport website with this step-by-step-tutorial

Create a dvd movie shop layout

Learn how to create a sleek looking dvd shop layout with this step-by-step tutorial.

Realistic Website Layout

This website design tutorial will show you one more time how powerful are stock images and textures.

Sleek and Textured Web Layout

In this Photoshop web design tutorial, you’ll learn how to create a full web page layout that combines the sleek and textured look-and-feel using a combination of beginning to intermediate Adobe Photoshop techniques.

Grunge Web Design

This web design tutorial will show you how to create a complete grunge home page design.

The Ultimate Grunge Design Tutorial

This tutorial will discuss how to create a fantastic grunge layout in Photoshop. It uses some techniques that are fairly common, and a couple that I’ve not seen discussed elsewhere before.

Funky Web Design Layout website design tutorial

Unique Desktop Layout

How to make a unique desktop style layer, using common work desk objects.

Nature Portfolio Layout

If you want to start working as a freelancer i suggest you to create an eye catching layout to start properly in your business.

RocknRolla Blog Design

Great looking portfolio style design with a rough look.

Paper Texture and Grungy Web Design

Web design tutorial on creating a simple paper texture from scratch in Photoshop then marrying it with a web layout to create a neat design.

Grunge Vector Layout

This tutorial will show you how to create a vector style layout with a nice grunge effect.

Graphic Design Studio Web Layout

A simple and professional design studio layout.

The Design Lab: PSD Conversion

First they provide you with an excellent tutorial on creating a design lab layout. Then they take it to the next step and give you a step by step directions on how to convert your newly created PSD into a fully functional web design.

Worn Paper Web Layout

In this web design tutorial, you’ll learn how to create a textured “worn paper” web design theme using some basic Photoshop techniques.

Amazing Textured Layout

This tutorial will show you how to create an amazing layout using a simple texture, and some layer styles.

Create a Agriculture layout

Learn how to create a Agriculture layout with this very easy to follow tutorial.

Create a Nature Inspired Painted Background in Photoshop

In this web design tutorial, I will you show you my own technique for creating this type of background.

Build a Sleek Portfolio Site from Scratch

With PSDTUTS providing a great file to start off with, NETTUTS delivers yet another great tutorial on coverting a PSD to HTML for your own Portfolio website design.

Dark Themed Web Design

This tutorial covers the key areas to focus on when creating a Web site design.

Magic Night Themed Web Design

A web design tutorial on artistic web design depicting a “Magic Night” concept.

Rock Band Music Layout

This will show you how to create a rock band layout ( music layout )

Game Magazines

The Most Advance Game Layout

Clan Layout

In this website design tutorial you will learn how to create a nice looking game layout, or a clan layout.

Gaming Layout

Web design tutorial on how to create stylish web2.0 style gaming layout from scratch using photoshop CS3.

GameSpots Website Layout

This tutorial will be showing you how to create a web layout much similar to the famous gamespot.com design in Adobe Photoshop.

Gaming Layout

In this web design tutorial you ’ll be making a quick, small, unique looking gaming layout, right lets get started.

Gaming Layout

Learn how to create a fantastically looking gaming layout, you wont be disapointed.

Warcraft 3 gaming template

Learn how to create a unique and dark template, perfect for gaming or clan websites. In this tutorial we will work extensively with layer styles to enhance certain parts of our layout to give it that gaming feel. We’ll also work with the path tool to create special shapes as well as using the brush tool to blend in images.

Photoshop Tutorials for designing Website Elements

Creating Navigation in Photoshop

Design a Glossy Navigation Interface for Media Sites in Photoshop.

Design a Web 2.0 tab with Photoshop

Create a website header using Photoshop

This web design tutorial is part of a 4 page tutorial on how to create a simple web site using Photoshop and Dreamweaver.

How To: Make the Viget Inspire Background

An overview of how we put the Viget Inspire background together. The driving philosophy behind real-texture stuff like this is to fake as little as possible. No matter how many brushes you have or how good you are in Illustrator, there’s a quality of unpredictability in real photographs and real, physical elements that adds great subtle qualities to any design.

Professional header design for your website

How to make a nice-looking and professional header for your website easily.

Web 2.0 clean layout

How to make a clean style layout with some basic tools with Photoshop.

Easily Create a Beautiful, Unique Website Header

Stylish Dark Navigation Menu

In this web design tutorial, I’ll be teaching you some tricks with the rounded rectangle tool and how to use the rectangular marquee tool to make a stylish navigation box for a web design.

How To Create a Stunning Vista Inspired Menu

How to make a semi-transparent Vista-inspired menu using gradients, shadows, and blurring to produce a stunning modern effect.

Sleek Photoshop Header Design

11 step website design tutorial that shows you how to design a Sleek Header for you Website.

Sleek Banner Tutorial

In this tutorial you will be shown how to design a website banner like this one here:

How To Create a Stunning Vista Inspired Menu

How to make a semi-transparent Vista-inspired menu using gradients, shadows, and blurring to produce a stunning modern effect.

WebHost company header template

Modern Web 2.0 Header

In this tutorial, I’m going to be teaching you how to make the web header I used for this site. It’s fairly straight forward, so if you’re just starting web design, this will be a good tutorial to read.

Clean White Navigation Bar

Simplicity is the key to beautiful web layouts. Learn how to draw a beautiful navigation bar in Photoshop.

Modern Web Search Bar

How to create a modern web search bar with a drop down menu.

Green Navigation

How to make a stylish looking green navigation with a shine effect.

High-Detailed Plastic Navigation Bar

Navigation menus can vary from ordinary text links to the most complicated dropdown menus. This tutorial is describing detailed process of creation of “plastic” navigation bar.

Wii Web Header

How to design the Wii header found at Nintendo.com.

Create a Professional Gaming Header

How to create a professional gaming header design.

Volkswagen Inspired Navigation

This tutorial assumes that you know your way around Photoshop enough not to need too much hand-holding. You should know your way around the Layers palette and know how to add Layer Styles, use Custom Shapes and Clipping Masks without much explanation.

Design a Unique Bookmark Box

How to create a unique, and professional-styled bookmark/promote box for your personal Blog, or maybe even your website.

Vista Style Nav Bar

Create a navigation bar with a unique Vista Style

Slick Blue Navigation

In this tutorial, you will be shown how to design something like this:

Metallic Header Design

This tutorial shows you how to create a rough Metallic style Website Header

Web 2.0 Header Design

Photoshop tutorial design classy header in photoshop

Modernistic Navigation Module

How simple shapes and gradients can create elegant designs.

Dark Navigation Box

How to make a more advanced styled navigation box using some more effects and tools.

Clean Blue Navigation Box

This tutorial is going to go over how to use some tools and effects to make a navigation box for a web layout which you can apply the same techniques to make content boxes etc.

Elegant Navigation Box

Learn to use some basic photoshop techniques to create an elegant navigation box for your website.

Slice Your web graphic properly

This tutorial will teach You how to slice Your web graphic with future xHTML and CSS in mind.

Blue Poll Box

In this tutorial I am going to be teaching you how to make a stylish looking box for a poll box.

Designing Nature Theme Header for Web Site

This tutorial takes you through 17 pages of detailed instructions of Photoshop techniques to create the Website Header.

Source files: design-nature-theme-header-for-web-site.zip

Silhouette Website Header

Use Adobe Photoshop to create a moonlit silhouette, for use as a website header.

Photoshop Tutorial: Girly Web 2.0 Header

With this tutorial, we’ll go through the process of creating a very trendy, abstract header design used on many girl-oriented websites. It doesn’t mean you can’t use this tutorial for other kind of sites. All you’ll need to do is tweak the colors.

Curled Corner

Learn how to create a sleek content box that features a curled corner to give it a more dimensional approach. This effect could be put to good use on business websites, such as hosting sites, product sales pages, portfolios, and more.

How to Create a Simple & Sleek Web 2.0 Site Footer

How to produce a sleek looking site footer in

Professional web design studio logo

Learn how to create a professional web design logo.
We’ll show you several ways of working with text in this tutorial.
The outcome from this tutorial could also go well with our Product Sales Page tutorial, as a proper logo wasn’t really made for it.

Concept Web Logo Design

Website design tutorial that takes you through the steps of Concept Web Logo Design in Photoshop.

Once your design is finished you need to get it sliced up and converted into web markup. This is where it gets though for people that are not programmers and professional web designers. These articles may help you in that phase so check them out:

• Essential Web Designers Guide on PSD to HTML/CSS
• 20+ Photoshop Tutorials PSD to HTML/CSS, 35+ Online Services

• 50 Fresh And Amazing Free Photoshop Tutorial Roundup
• 40 Excellent Web Design Tutorials for Busy Web Designers
• Hand Picked Photoshop Web Design Tutorials to Sharpen Your Skills

The use of character illustration in web design is a great and easy way to increase the amount of visual appeal your website has. Not only does it brighten things up and make your site a bit more captivating, but it also, if pulled off well, helps your visitors remember your design. Although your website’s content is extremely important, a beautiful and engaging design helps to bring everything together.

In today’s post, i will showcase beautiful and stunning websites that are using character inspiration.

Advertisement

1. Meomi

2. Francesco Mugnai

3. Octwelve

4. VG Design

5. SketchBlog

6. Benilyn

7. Photoshop Lady

8. Tom Cash

9. Twisted Maestro

10. Piipeonline

11. Justin Bird

12. Blog What? Design

13. Veboo Labs

14. iwit

15. Old Loft

16. Nybble Tech

17. Gertis PC-Tipps

18. Lionite Internet Ventures

19. Haafe

20. Think Orange

21. Small White Bear

22. Carbonmade

23. i Avion

24. Agencia Mobi

25. CreamScoop

26. BlackMoon Design

27. MplusZ

28. FreelanceSwitch

29. Studio E-space

30. TestLab2

31. Storific

32. Smack a Gopher

33. The Great Bearded Reef

34. Portfolio de Guillaume

35. Moshi Monsters

36. Silverback

37. Toctoc

38. Matt Hamm

39. Formee

40. Stone Skipper

41. Late Night with Jimmy’s Intern

42. Cornerd

43. Lady In Green

44. Haunted Cathouse

45. McMillers Sweets

46. Barber Shop

47. Cheeky Monkey Media

48. HTML5 Lab

49. Inspiredology

50. sr28

 

Author : Dustin 

Betonio

Dustin Betonio is a Translation Management graduate at University of Mindanao. His earlier career was devoted on customer service outside the information highway. Currently studying Law in the same University.

• 10 Useful jQuery Techniques to Improve Your Code
• 35 Awesome and Beautiful Examples of Horizontal scrolling websites
• 40 Delicious and Beautiful Coffee Websites

Adobe InDesign is a software application produced by Adobe Systems. It can be used to create works such as posters, flyers, brochures, magazines, newspapers and books. In conjunction with Adobe Digital Publishing Suite InDesign can publish content suitable for tablet devices. InDesign is the perfect choice for making any document that needs some creative layout, from posters to newspapers. It offers all kinds of features to modify your text and images, which can work together in interesting ways to create a unique and professional design.

Designers and graphics production artists are the principal users, creating and laying out periodical publications, posters, and print media. It also supports export to EPUB and SWF formats to create digital publications, and content suitable for consumption on tablet computer devices. In this post, I will share with you an Adobe InDesign Tutorial roundup that will surely inspire you. Enjoy!

Advertisement

InDesign Tutorial Compilation

1. Design a Coffee Shop Menu Layout from Scratch with InDesign

2. InDesign Tutorial – Create a Grid Based Resume/CV Layout in InDesign

3. How-to-guide for making a business card in Adobe InDesign

4. InDesign Tutorial – Create Numbered Tickets the Easy Way in InDesign

5. Design a Print-ready Ad in Adobe InDesign

6. How to Create a Music Magazine Cover in InDesign

7. Create and Print a Brochure with Photoshop, InDesign and UPrinting.com Part I and Part II

8. InDesign Tutorial – How to Create a Coupon in InDesign

9. Magazine Cover Design

10. Creating iBooks Using Adobe InDesign

11. How to Create a Flag Graphic with Type in InDesign

12. Formatting Typography and the Use of Styles in Adobe InDesign

13. How to Use Multi-Layered Illustrator Artwork in InDesign

14. Design Business Cards in Adobe InDesign

15. Creating Percentage-Based Styles

16. An In Design Tutorial for Good Typography in InDesign – Setting Up a Baseline Grid

17. Creating a Table of Contents Part I and Part II

18. Mastering Running Titles in InDesign

19. Creative Uses for Paragraph Rules in InDesign Part I

20. Creative Uses for Paragraph Rules in InDesign Part II

21. Setting Up Live Captions in InDesign CS5

22. Creating PDF Forms in InDesign

23. Changing Defaults in InDesign

24. Using and Sharing Files With the InDesign Library

25. Using Live Preflight

26. Give Your Tables Some Style!

27. How to Use Character Styles and Paragraph Styles in Adobe InDesign

28. Using InDesign to Publish Your iPad Magazine

29. How to Make Tables With Rounded Corners in InDesign

30. Fast Layout in Adobe InDesign CS4

31. Creating an interactive portfolio with InDesign CS3

32. Animating in InDesign

33. Tab-Topped Text Frames

34. Adding Bleed to a Document

35. Bleed and Layering Master Pages

36. Type Reflection

37. Preparing InDesign Files for your Print Service

38. Importing Multiple Graphics using InDesign CS5

39. How to Batch Replace Characters and Glyphs

40. Using Object Styles in InDesign

41. How to add Crop Marks to a Layout in InDesign CS4 in a Snap

42. The InDesign New Document Window Explained

43. Quick Masking with the Pen Tool in InDesign

44. InDesign Project — Setting Up Master Pages and Styles

45. Formatting a List Using Tabs

46. Conditional Text and InDesign CS4

Video Tutorials:

47. Creating Drop Shadows in InDesign CS3

48. InDesign Type Tips

49. Using InDesign Drag and Drop Text

50. Using GREP Styles in InDesign

51. Turn Your InDesign Documents into Interactive Flash Content

52. Using Camera Raw with InDesign

53. Step Repeat in InDesign CS4

54. Custom Underlines in InDesign

55. Headline Style Using Effects in InDesign

56. Working with the Effects Panel in InDesign

57. Automate Your Designs with Nested Styles in Adobe InDesign

58. Having Fun with Frames in InDesign

59. Tips on Using Guides in InDesign

60. Designing a Photobook in Adobe InDesign

61. Create Smart Contact Sheets in Adobe InDesign

62. InDesign CS4 Link Panel

63. InDesign CS4 Smart Guides

64. InDesign CS4 Exporting to Flash

65. InDesign CS3, In Good Form

66. Paragraph Rules in InDesign CS3

• 50 Fresh And Amazing Free Photoshop Tutorial Roundup
• 40 Top Flash Game Tutorial Roundup
• 10 Useful jQuery Techniques to Improve Your Code

The color orange occurs between red and yellow in the visible spectrum at a wavelength of about 585–620 nm, and has a hue of 30° in HSV color space. It is numerically halfway between red and yellow in a gamma-compressed RGB colour space, the expression of which is the RGB color wheel. The complementary color of orange is blue. Orange pigments are largely in the ochre or cadmium families, and absorb mostly blue light.

Orange of different shades is a good choice in web design because it could give a stylish touch to your website and highlight the important elements of your design. Specifically speaking, orange connotes warmth, enthusiasm, attraction, encouragement and stimulation. Here is a showcase of vibrant and juicy orange inspired websites that will help you gain ideas on what has been done and start to think on using this color on your next design project. If you considering to create a minimalistic web design you could add colours without breaking the concept however most simple wordpress themes are white or featuring very few colours. Enjoy!

Advertisement

1. Leftsin

2. Aurigaspa

3. AZtek

4. Sausage stand

5. Sapient

6. Bambibus

7. Spaksu

8. Dustin Curtis

9. Skyrocket

10. Thrive Solo

11. WebDesign Karlsruhe

12. Web Design Conference

13. Snapplr

14. Vtldesign

15. Adpartner

16. Truskawka

17. Fox Classics

18. Acmikan

19. Happy comb

20. Allsaints

21. Babyboom

22. Getconcentrating

23. Abrigo

24. Egomedia

25. Staatsloterij

26. Panelfly

27. Designbysenso

28. Gnsegroup

29. Saturized

30. Nineliondesign

31. Colourpixel

32. Haloagency

33. Cliquestudios

34. Cubeclub-chemnitz

35. Stickermule

36. Safarista

37. Gruntdesign

38. Eighty8four

39. Rockettheme

40. Zippercms

We like to showcase and inspire you with nice things like this  beautiful Epiphone Les Paul vintage Sunburst. Have a look.

Author : Dustin Betonio

Dustin Betonio is a Translation Management graduate at University of Mindanao. His earlier career was devoted on customer service outside the information highway. Currently studying Law in the same University.

• 10 Useful jQuery Techniques to Improve Your Code
• 25+ Examples of Best Single page websites
• 35 Awesome and Beautiful Examples of Horizontal scrolling websites

If you want to promote a product, a cause, or an idea, one of the best ways to do it, is to put up an advertisement poster or billboard. This is because advertisement posters have the ability to reach a great number of people wherever they are and whatever they do, in an economical and efficient manner. Whether you are driving, or taking a walk in an alley, or surfing the web, advertisement banners or posters are so commonplace that it is impossible for you not to find one if you are travelling or simply tinkering your computer. This amazing charm is due to the creative visual imagery found on these promotional platforms.

But making effective campaign ads is not easy. As a designer, you must be able to come up with a powerful poster design that does not only evoke a specific emotional response from the audience, but most of all, actuates them into action. This is a real challenge since, our poster design must achieve all these during a short period of time when our audience cast their eyes on our ads.

In this article, we are showcasing some of the best poster designs which are catchy, ridiculously creative, and simply powerful giving their audience a sense of awareness or enlightenment about their advocacy. These are the ads that nail down their points straight to the human senses both with respect to their artistry and the gravity of their issue.

While this showcase is a very good source of inspiration, at the heart of it, is an issue of global warming that threatens our survival. We have already felt its adverse effects and it is time for us to take concrete steps to help address this problem. This collection of Global Warming Poster Designs therefore is like a blaring siren that loudly broadcasts its earth saving call for all of us. We need to take all sorts of measures to halt this downhill slide into the dark pit of oblivion. We need to drive environment-friendly cars, generate clean and renewable energy, conserve water, use recycled materials and minimize the dumping of toxic wastes. By doing this earth-saving measures, we also save ourselves. Still if you need to get the posters in a non-digital format Poster Printing will be needed.

We hope that you will find this article enlightening and useful. If you do, please help us enlighten others by sharing this article. You can tweet it, like it on Facebook, Digg it, or share this in any way you find comfortable. If there is anything you find missing and as such, must be included here, please don’t hesitate to write a comment. We will surely appreciate any suggestion or addition. Enjoy while sharing!

Advertisement

Creative Global Warming Poster Designs for Inspiration

1. Diesel: Global Warming, New York

2. Global Warming Poster by Victor van Gaasbeek

3. Bye bye, global warming is coming by Alejo Giraldo

4. Global Warming by dreamorphosis

5. Global Warming by Narm

6. Stop It Now by Hoodaya

7. Stop Global Warming

8. Global Warming by dgheban

9. Global Warming by EckenUndKanten

10. Stop Global Warming

11. Save the Earth 3 by Joe-Antcliff

12. Climate Change by Ben Downard

13. Global Warming – Evolution 2 by Pepey

14. Stop Global Warming

15. Global Warming by Andycap

16. Help Stop Global Warming Ad by Pepey

17. Global Warming2 by Hany4go10

18. The Global Flooding of 2010 by Fstrano

19. Global Warming Awareness Poster by Spudfx

20. Help Stop Global Warming Ad by Pepey

21. Anti Global Warming Campaign 2 by Shawkash

22. Global Warming Ad by Phantom Roses

23. White Flag by Karim Poster Design

24. Global Warming by Body4int

25. Global Warming Poster Design II by Karim Design

26. Human Trash by Stewartestagroovy

27. Flood by Nukieu

28. Save the Rainforests Campaign by Deeyman

29. Global Warming Poster Design by Crooklyn2108

30. Atlas Holding Our World by KarimDesign

We are grateful for your visit and we have more great articles for you. If you use Joomla 1.6 you also need a good Joomla 1.6 Template so we have gathered a list of great themes.

Author : Sonny Day

Sonny M. Day is a passionate SEO and web design enthusiast who loves photography, mountain climbing, snorkeling and dirt bike riding.

• 40 Beautiful and Artistic Examples of Poster Designs
• Uprinting Giveaway of 18×24 Poster Print to Five Winners
• 50 Creative and Hilarious Print Ads for Inspiration