Preview
Live Demo
We have also provided a working XHTML web template as a proof of concept for this web design including an animated slider handcrafted using jQuery just for this tutorial. Click below to see the
demo.
You can download the web page template below and study the code as we will not be covering the working template in this tutorial.
Tutorial Resources
* Font: dafont.com via Gnuolane
* Brushes: Grunge metal stripes by WeGraphics
* Font: Monika fonts by Catrina
* Icons: Social Network Icon Pack by Komodo Media
* Font: Diavlo by Jos Buivenga
* The Brushes: Subtle textured grunge Photoshop brushes by WeFunction
Introduction to Web Design ProcessThe web portfolio is the best way to catch new customers. In today's market, it represents the most powerful way of getting hired for new projects and also as a way for you to make a successful brand on the web.That's why every designer should attach great importance to the way his website is structured. It is important to all graphic elements in strategic positions so you can get the most out of visiting a potential customer.To create a web page is never easy. Generally, I start drawing on CSS galleries. When I visit other sites, two things caught my attention in particular.Structure / OrganizationBe careful where to place your parts portfolio and how to improve them so that they are visually appealing. Think about where to place your contact form and information so that it is easily visible to potential customers.A practical approach to the visual hierarchy is to interact with the site you admire. For example, if you came across a site and you will quickly find how to navigate the portfolio of the author, this means that there is something to learn from him.If you spend much time trying to locate the contact page link, for example, this means there is a gap in the site's usability. You can also learn from these types of layout "bugs". If the contact link is difficult to find a site you visited, perhaps you can think of ways to solve this problem so you can avoid it in your own design.DesignThe core portfolio is web gallery where you show your projects. In addition, site design and theme can say a lot about you too. It is all about the feeling you want to convey to your visitors. If you are an illustrator who loves to use swirls of color vector in your work, put some of these brands in your website design. If your style is modern, the design of your online portfolio as such. If you like creating grunge designs - then go with a grunge theme in the web presentation of your Web portfolio.Finding a balance between aesthetics and usability of the site, they do not exclude each other. Usability and visual appeal can go hand in hand if you are aware of what you are trying to achieve.Now that you know a little about my philosophy of web design, we begin.First, I sketched the site structure on paper. This gives me a general idea of the layout that I create in Photoshop.
Step 1: Download and Open the 960 Grid System
Download the
960 grid Photoshop template. It will help you create a well-structured and well-aligned site that is 960px wide. Open the 16 columns template.
Step 2: Create the pattern of background noise
The idea behind the design is to create a structured layout and intricately detailed. Let's start with the background: We will create a model to fill it cultivable. The reason we want a repeating pattern is to preserve bandwidth: The user will only need to download a single small image that we can repeat using CSS instead of loading large heavy textures. This reduces page load time, and in turn improves the user experience.
vintage wedding dresses
Create a new document 50 × 50px in Photoshop (Ctrl / Cmd + N) and fill the background layer with a soft gray (# eaeaea). You can do this by setting your foreground color to the soft gray color, then using the Fill command (Shift + F5) with Use Value foreground color.
Apply a Noise Filter
Create a new layer in the 50×50px document and fill it with black.
Add a noise effect (Filter > Noise > Add Noise) setting
Uniform as the Distribution option and
90% as the Amount.
Switch the layer’s Blend Mode to Screen and reduce its Opacity a little bit to make the noise softer.
Apply a Note Paper Filter
Create another layer on top of the Noise filter layer. Also fill this new layer with black.
Choose Filter > Sketch > Note Paper. Use the default options for the filter. Next, set the layer’s Blend Mode to Overlay with the Opacity reduced to about 30%.
The background pattern is now complete. Go to Edit > Define Pattern to save it.
Step 3: Apply the Background Noise Pattern
Switch to our main Photoshop document. Select the Background layer in the Layers Panel and go to Edit > Fill (Shift + F5). Here, set the Use option to
Pattern and in the Custom Pattern dropdown menu, find the pattern you just created.
Perfect! The background is now complete. You can save the model is 50 × 50px PSD to HTML conversion / CSS in our web design (if you want).
Step 4: Create the model vintage flower-head
For the header, I want to use another model. Now I will guide you through the process of creating a simple flower vintage-looking in that we will import Illustrator into Photoshop to create a second pattern. For those who want to skip the creation of this vector, it is available in the source file download below.
Creating the Flower in Illustrator
Create a new document in Illustrator. The size of the artboard does not matter.
Once the new illustrator document is ready, put your black fill color to None and diseases.
Take the Ellipse tool (L) from the Tools panel and draw a black circle (hold down Shift to draw a perfect circle).
Draw another ellipse underneath it — this is going to become the first petal of our flower. With the Direct Selection Tool (A), select the two anchor points on the left and right side of the ellipse and drag them towards the bottom.
Choose the Rotate Tool to move the center of the rotation so that it will coincide with the center of the first circle.
Hold down Alt/Option + Shift and move the petal to duplicate and rotate it.
Note: Alt/Option is often used to duplicate objects; this is why we press it down during the rotation. We simultaneously press Shift with Alt/Option to rotate the petals precisely at 45
o increments.
Now a useful Illustrator trick: Press Ctrl/Cmd + D to apply the same transformation. Click Ctrl/Cmd + D repeatedly until the flower is complete.
Create the Pattern in Photoshop
Create a new 70×70px document in Photoshop and fill its background with a subtle beige (#e6d9bb).
As we made with the first pattern, create a new black layer and apply the Note Paper filter to it. Afterwards, switch the layer’s Blend Mode to Overlay and reduce its Opacity to 50%.
In Illustrator, select the flower vectors, copy them (Ctrl/Cmd + C), and then paste them (Ctrl/Cmd + V) in Photoshop as a smart object.
Make sure that the flower layer in the Layers Panel is your active layer. Press Ctrl/Cmd + J to duplicate the flower layer and move the duplicated one on the top-left corner of the 70×70px canvas.
Duplicate the flower 3 more times to cover the remaining 3 corners of the canvas.
In the Layers Panel, select all the layers containing the flowers and merge them (Ctrl/Cmd + E) into just one layer. Switch the layer’s Blend Mode to Overlay and reduce the Opacity to 30%.
You can now save the vintage flower pattern by going to Edit > Define.
Step 5: Apply the Vintage Flower Pattern to the Header
Make a new layer group by pressing the
Create new group icon at the bottom of the Layers Panel. Make sure that the layer group is above the Background layer. Keep our PSD organized by naming the layer group as "Header". While working with web layouts in Photoshop, organization of your layers will help you code a web design more quickly and with less prevalence of errors.
Create a layer inside the "Header" layer group, grab the Rectangular Marquee Tool (M) and make a selection of around 200px height that spans the entire canvas; this is the area you want to fill with the pattern.
Go to Edit > Fill, set the Use option to
Pattern and find your vintage flower in the Custom Pattern option’s dropdown menu.
Step 6: Add the Ripped Paper Effect to the Header
To create the ripped paper effect, grab the Lasso Tool (L) and make an irregular selection at the bottom of the header area.
Simply press Delete to remove the selection.
To style the torn paper effect, add a soft drop shadow effect layer by right clicking on its layer in the Layers panel, choose Blending Options from the menu and then clicking on Shadow on the left of the dialog layer style that appears. 
Step 7: Create the top bar Red
The topmost red bar in our web page layout is a simple visual flourish that may provide some originality of our work and enhance the color palette (red) with our theme. Create a new layer and use the Marquee tool to make a selection 10px high which extends over the entire canvas. Fill the selection with a red color (# bc1515).
1px horizontal lines to give depth
The clever use of lines 1px can give the illusion of depth to your drawings. In this case, create a new layer and place a selection at the bottom of the top bar red with the single line Marquee tool.
Set the Foreground color to a light red (#d74343), then hit Alt/Option + Delete to fill the selection. Move this line immediately below the red bar using the Move Tool (V).
Using the same process, create a second line that’s a darker red color (#a40a0a).
Create the Top Bar Pattern
It’s time for another pattern (that is provided in the source files if you are feeling lazy). If you want to create it by yourself — Great! — just follow the process that follows.
Create a new 5×5px document in Photoshop. Since we will create some diagonal white lines, fill the background with red (temporarily) so we can visualize the lines.
With the Line Tool (U), create two diagonal lines (press Shift while drawing the lines to keep them straight).
Hide the visibility of the red background and save the pattern (you know the drill by now).
Switch to our main canvas and create a new layer above the top red bar’s layer.
Ctrl/Cmd + click on the top red bar’s thumbnail in the Layer’s Panel to make a selection around it, then go to Edit > Fill, choosing our diagonal pattern for the fill.
Then, reduce the Opacity of the layer to about 20%.
The top red bar now looks nice, doesn’t it?
Step 8: Designing The Site Slogan
The slogan is a cornerstone of a wallet in my opinion. There should be a brief and concise description of who you are and what you do. This makes for the first time visitors immediately know they are in the right place so they can be encouraged to explore your site further. Keep in mind that the slogan is often the first thing that catches the attention of the user in a layout like ours: to make a copy of your great slogan! Make clear the slogan, but not excessive because it distracts the user experience as it passes through your site.
In my case, I used the police Gnuolane introduce myself to visitors. I gave you the text layer a gradient overlay from a dark red (# bc1515) for a lighter (# e03636).
To embellish the text, duplicate it (Ctrl/Cmd + J) and move the duplicated layer to the bottom of the original text layer.
Remove the Gradient Overlay and replace it with a white Color Overlay. Now click the Down arrow key once, and then click the Right arrow key once too to offset the text a bit. Voila! A quick and easy solid drop shadow that gives the text some more depth.
To create a visual separation between the tagline and the slideshow gallery (that we have yet to create), I have added 2 horizontal lines (2px height) and a swirl in the center (you can find this swirl element in the source files).
Step 9: Design Gallery Slideshow
This is the most important area of a portfolio. Customers want to see what you're capable of. Do not hide your work - put them in a prominent position. For my preference, I do not like the complicated Flash galleries that you see often in the personal website of a creator. When I go looking for talented designers to hire for my company, WeGraphics, I'm more comfortable with simple portfolio galleries that show a good amount of work per page instead of portfolios that mask the shallowness of a portfolio with animation effects Whiz-Bang.
With that in mind, let's make a simple sliding gallery. No fancy 3D effects and convoluted user interfaces that you can interact with using the special key combinations - we will also have a button on the left and right. The co-founder of the design Ask Jacob Gube, you provided a jQuery script in the source files. If you're curious to see how this works, examine its code.
Alright, back to the task at hand. Take the Rectangle tool and, with the help of the grid (press Ctrl / Cmd +, if you do not see the guides), draw the first box, which will be the container for thumbnail images of your works.
Style Box
Right-click on the layer of the box in the Layers panel and select Blending Options, which should open the Layer Style dialog. Style of the box with HTML / CSS in mind: Do not use tons of effects complex layer that will be hard / impossible for the person coding the layout later to convert it to a Web model .
For our boxes, I've drawn with a Color Overlay, stroke and a drop shadow.
Complete the Gallery
Now you can paste in the first thumbnail image of your work. Leave some room on each side of the thumbnail image.
Just duplicate the box and move them to create a grid. Here is the completed gallery:
Step 10: Draw the slideshow navigation
Another important feature is to provide an easy way to allow visitors to navigate through the gallery. There is nothing more functional and ubiquitous as a user interface left / right which has only two possible actions: move left or right.
Use the Ellipse tool (U) to create a small circle that will form the core of our left / right buttons. Give the circle a color effect red Gradient Overlay layer.
Also give the now-red circle a Stroke layer effect.
Use an Inner Shadow layer effect to give it a defined look.
Finally, to match our thumbnail boxes and the overall theme of the layout, also give our red circle shape a Drop Shadow.
Create a white triangle using the Polygon Tool (U); in the Options Bar, set Sides to 3 to make a triangle. Put the triangle inside the red circle. Add a drop shadow to the triangle shape, changing the color to the same red color (#bd1515) as the Stroke layer effect above.
Use the same method to create the right arrow. Or you could duplicate the layers of the right arrow, and then flip the layers horizontally (Edit > Transform > Flip Horizontal).
Move your arrows to the bottom of the gallery, making sure to give them enough space. Center them and align them using Photoshop’s various
Align Layers To Selection commands (Layers > Align Layers To Selection).
Step 11: Create the foot of the background
Create a new layer group to the foot of the website design to keep our work organized. From there, any layer associated with the foot of the layout should be placed in the heart of this layer.
Set the foreground color to dark blue (# 043148), then use the Rectangle Tool (U) to draw a large rectangle at the bottom of the canvas that covers the entire width of the canvas.
Create Textured Effect of foot
Duplicate (Ctrl / Cmd + J), the subgrade blue rectangle.
On the subgrade in duplicate (which should be above the original blue rectangle), apply a filter by selecting Filter> Sketch Book> Note. Use the default options of the filter. After the filter has been applied, set the layer blending mode to Overlay with opacity to about 20%.
Apply Grunge Brushes
Create a new layer to the grunge accents. We will use the free WeGraphics Scratches metal brushes to create some grunge effects. Download the shape library and install it. Apply a few strokes with the brush tool (B) using metal brushes scratch. Once done, reduce the opacity layer to make the effect more gentle: from 5% to 15% would be a good setting
Step 12: Create the foot of Red Bar
Create a red (# c82222) bar that spans the width of the canvas and put it in the top of the footer area. We will use it as a navigation bar footer that displays categories (such as Logo, Print, and so on).
Add a 1px red (# 930a0a) race to the top and bottom of the red bar.
Use the same technique we used for the blue footer for texture: Duplicate, go to Filter> Sketch Book> Note, then reduce the layer opacity to 20% and change the blending mode toOverlay.
As we made at the beginning with the top menu bar, use 1px lines to give the footer’s red bar some depth.
You can now add categories using the Horizontal Type Tool (T). I’ve used Helvetica, bold, 16pt.
I gave the text a Drop Shadow layer effect (which can be replicated in the HTML/CSS template using CSS3’s text-shadow property), as well as a Color Overlay.
Step 13: Fill footer with useful information
At this point, you can fill the footer provides important information like links to your social profiles, contact form and update Twitter (a Twitter follower could become a client). This part, I'll let you.
Some guidelines to help you complete the footer:
* The network layout guides (enable or disable it by pressing Ctrl / Cmd +;) can help you organize and arrange the content of footer in the best way possible.
* For items, I used Helvetica, Regular, 20pt.
* The font used to write handwritten "thank you" on the right side of the footer is Monika.
* For the icons you see on the right of setting footer, I used the Social Network Icon Pack.
* The input fields of the contact form was created using the Rounded Rectangle tool (U).
* The effect of each recessed input box is made using a combination of Chroma, Drop Shadow, Inner Shadow and.
* The submit button has the same layer style as the red buttons left / right to the gallery. Instead of the Ellipse tool, use the Rounded Rectangle tool to draw it and then copy the layer style from the left / right buttons.
Here are the effects for the entry boxes.
color Overlay
Drop Shadow
Inner Shadow
Footer Finished
Step 14: Create the site logo
Normally, you see most Photoshop tutorials web design that make the footer that the last phase. I'm switching to this trend. The last part will create the logo that is placed centrally over the web layout. We have already created a header that the general cleaning his background to complete.
I added my personal logo - in fact, you will see the symbol can be interpreted as an "S" or a "G", the initials of my name (Sebastiano Guerriero).
You can place your own logo here, but in case you want to create something similar to mine, I used the police to write "design" is Diavlo, created by the font designer talent, Jos Buivenga.
The effect of the dry paint is created ave
Tutorial Summary
We covered a lot of professional techniques in web design this tutorial to produce a usable Web layout and Web-ready mock-up. We've also provided the source file with HTML / CSS and PSD for you to be able to study and analyze the layout. I hope you bought some the most useful techniques for creating your next site. Share your thoughts in the comments!
