background preloader

How to Create a Clean Web 2.0 Style Web Design in Photoshop

How to Create a Clean Web 2.0 Style Web Design in Photoshop
In this Photoshop web design tutorial, you’ll learn, step-by-step, how to create a stunning and clean web layout. You’ll be using some basic to intermediate-level techniques to build your very own sleek "Web 2.0" style web design that uses the 960 Grid System. This is a two-part series that will teach you how to create the layout in Photoshop, and then how to convert it to a standards-compliant (X)HTML web design. Final Result Clicking on the image below will take you to the full-scale version of the web layout that we’ll be designing in this tutorial. Setting up the document 1 Create a new document in Photoshop with the dimensions 1200px x 1050px. Creating the background 2 Now, we will be creating the background. Placing the Grid System into the document 3 On a new layer, create a 960px wide grid – 12 bars, each bar at 60px wide. Making containers for the logo and navigation items 4 We will now be creating the containers for the logo and the navigation items. 9 Duplicate the separator.

http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-clean-web-20-style-web-design-in-photoshop/

How to Create a “Worn Paper” Web Layout Using Photoshop In this tutorial, you’ll learn how to create a textured "worn paper" web design theme using some basic Photoshop techniques. The design incorporates some free stock images to let you create a beautiful layout in a jiffy. Final Result Click on the image to view the full-scale final result. Downloads

Create a Simple Vibrant Light Effect in Photoshop This post was originally published in 2009 The tips and techniques explained may be outdated. Starting away from the computer, we’ll use a few household objects to create some photographic resources. Then follow this Adobe Photoshop tutorial to manipulate the images with various tools and techiques to produce a vibrant design made up of intense light streams effect. My previous How to Create Intense Light Streaks in Photoshop article turned out to become the most popular tutorial here on Blog.SpoonGraphics, so it seems to be quite a hot topic!

Design a Modern and Sleek Web Design Mockup in Photoshop plus a In this tutorial you’ll be learning several techniques on how to design a modern and stylish web design mock-up ready to be coded into xHTML. The purpose of the mock-up is aimed at a company or individual who offer services, such as a designer or photographer. There is plenty of nice, clean space to present your content, followed by a smooth scroller to present some of your latest work.

30 Brilliant Photoshop Lighting Effects Tutorials A current trend in design is adding lighting effects to enhance your digital art. In this article, you’ll find 30 dazzling lighting techniques that you can use to add a bit of sparkle into your work. Expressive lighting effects

Design a Clean Portfolio Site in Photoshop Get the FlatPix UI Kit for only $7 - Learn More or Buy Now Today we will be working through the process of designing a portfolio site layout in Photoshop. The tutorial will break down each step of the process, and you can download the PSD file from Folio Focus if you are interested. The End Result:

40 Useful Photoshop Web Layout Tutorials Adobe Photoshop is the industry-standard when it comes to creating web page layouts. Photoshop’s versatility, robust set of tools, and excellent workflow management make it the web designer’s preferred application when creating designs for the web. In this collection, you’ll find 40 high-quality tutorials on creating web layouts from scratch using Photoshop. This article contains a copious variety of tutorials to help you learn and master the various techniques involved in creating beautiful web layouts. 1.

Create a Winter Theme Web Design in Photoshop In this web design tutorial, you will learn how to create a winter blog layout in Photoshop. We will use a photo of a forest for the background and then blur areas of that photo to create other elements like the logo and the navigation bar. Preview Click on image to see full size. Tutorial info 9 Photoshop Editing Tips Web Developers Should Know There are quite a few reasons why having basic Photoshop skills beyond slicing PSD’s to XHTML/CSS is essential to any web developer. I have discussed some of those reasons in this article on my blog, but to make a long story short, there are times when you just need to do minor image editing tasks but don’t want to hassle your web designer for it. Here are common tasks and processes that web developers often need to deal with when working on a web design/web interface using Photoshop. 1. Changing the background color of an icon As a web developer, one of the most common tasks I encounter is changing the background color of an icon or making its background transparent.

Create a Slick and Minimalist Web Layout in Photoshop In this Photoshop web design tutorial, we’re going to learn how to create a slick and minimal-looking website layout. We will use the 960 Grid System as a template to make it easy to align the design elements on the layout. Preview Here’s a preview of what we’ll be creating together, click the image to enlarge. Create a new Photoshop document 1 We’ll be using the 960 Grid System (download it at as a starting template.

Tech Hosting Layout Hello Today i will create Tutorial Number 146 from 500 Tutorial Marathon I will show you how to create another layout for your hosting business. First let's start with a new document, with the following sizes: 760x770 pixels, and with the following color : #cdc8c2 Best Practices for Hints and Validation in Web Forms Our instinctive dislike for forms originates from having to fill out seemingly endless paper forms, many of which require a Master’s degree in Form Content Filling to understand and fill out correctly the first time. Unfortunately, in the offline world, getting some answer wrong would mean having to fill out the form in full and sending it again, usually days apart. Online, we have the opportunity to not only resubmit forms countless times, but also as web developers, we can provide people with much more relevant feedback at various stages of using a web form. Through hints and validation, we can create forms that are a lot more user-friendly than their offline counterparts. And in some cases, we can make forms that people might even enjoy filling out. Hints in Web Forms

How to Turn a Texture into a Seamlessly Tiled Background Tiled backgrounds are great for both website backgrounds and in all kinds of Photoshop work. They are particularly useful when working with textures where you need a larger overall background than the small image you have to work with. In this quick tutorial I'll take you through taking a texture and turning it into a background image ready for seamless tiling. Designing User Interfaces For Business Web Applications - Smashi Advertisement Business Web application design is too often neglected. I see a lot of applications that don’t meet the needs of either businesses or users and thus contribute to a loss of profit and poor user experience. It even happens that designers are not involved in the process of creating applications at all, putting all of the responsibility on the shoulders of developers. This is a tough task for developers, who may have plenty of back-end and front-end development experience but limited knowledge of design.

Related: