Hello my friends. In this tutorial i will show you how to create another web layout for a design agency where you can showcase your portfolio, or you can use this layout to create a wp theme.

Using an effective web design in combination with Crest SEO services, will allow your website increase it’s search results and traffic flow.

Step 1 – Download the Graphstock framework

Please download the following PSD file: Download.

Open this document in Photoshop.

Step 2 – Download the following resources.

Download this set of vector icons: Download 81 vector icons

Step 3 – Create a pattern

Open the pattern you just downloaded from above in Photoshop, and go to Edit > Define Pattern. Choose a random name for this pattern, and click OK.
After you save the pattern, you can close the document with the small pattern.
This pattern is seamless ( this means it will fill all your document without any lines, or strange alignment )
Open the Graphstock framework PSD. With Paint Bucket Tool fill the document with the pattern you just created.
Your document will look like in the following image:

Step 4 – Use lights to enhance your layout

Create a new layer and with brush tool ( use a big round brush ) draw a big white dot in the middle of the layout.

Then change the blending mode for this layer to overlay. You can change the blending mode for this layer from the top of your layer palette. The background for this website will look like in the following image:

Step 5 – Create a horizontal navigation menu

Select Rounded Rectangle Tool, and set the Radius to 8 pixels. Draw a shape where you will place later some buttons. If you need more buttons please make the shape wider.

Step 6 – Add layer styles for the navigation bar

For this navigation bar i will use the following layer styles.

This is how my navigation bar will look like.

Step 7 – Create a text logo

I will create a simple logo, on over the horizontal navigation bar i will place some buttons.

Step 8 – Use a big shape to create a jQuery slideshow

Right under the header of the layout i will create a shape where you can add a slide show, or another piece of information. I will use the same layer styles i have used for the navigation bar.

Step 9 – Use indented layer styles to create a layout with a 3D look

Over the slideshow shape i will create another shape. This time i will create a smaller one.

For this shape i will use and indented layer style.

Step 10 – Add vertical 1 pixel lines to mark off each button

On the navigation bar i will create two thin lines ( each line shoal have 1 pixel ). You can create these two lines withLine Tool.

Select both layers with lines in your layer palette and press on CTRL+E ( this shortcut will merge both layers into a single one ). In the same time both layers will be rasterized and you will be able to use Eraser tool ( with a smooth tip ) to delete the bottom an the top part of the lines. You can see in the following image my result.

Step 11 – Add natural lights under your menu to create a interesting effect

I will create a new layer, and i will use Brush Tool, to create a small white drawing.

I will create also another layer where i will make more drawings. For this last layer i will change the blending mode to Overlay

Step 12 – Create the body of your portfolio layout

I will create a big shape. This shape will be used as the body of your layout. I have used the same layer styles i have used for the navigation bar.

And then i will create a smaller shape, which will be placed over the big one. I have used the same layer styles i have used for the top slideshow layer.

Step 13 – Populate with content the middle of the layout.

I will place here some text with Horizontal Type Tool, and you will notice also some horizontal lines. I have used the same technique like on the navigation menu.

Step 14 – Create some round boxes to create featured areas

Right under the slideshow area i will create some sets of shapes. Here you can place some images with your latest work. in case you wan to use this layout for different types of websites, you can place here whatever you want.

I will add also some buttons

Here is the layer styles i have used:

Step 15 -Add vector icons on your portfolio layout

I will download the following set of vector icons: Download 81 vector icons
I will copy some of the icons over this layout

Step 16 – Add images on your layout to simulate 3D effects

On the top of the layout i will add a big image with one of our Product. : 3D Logo Creator

Please notice the trick i did on the top. Please look at the blue arrow. You need to cut the image in unique way to make the 3D box in a more natural 3d look. I will explain in one of my next tutorials how you can achieve great 3D images from 2D images.

Step 17 – Add two arrows for your slideshow

Under the slideshow i will place also some Custom shapes

Step 18 – Create the footer of your portfolio layout

For the footer i will create a simple menu on the left side, and on the right side i have used the copyright text.

Final result

This is my final result.

Register for a Graphstock premium account and download this PSD layout

If you want to download this layered PSD layout please register for a Premium account. This account will allow you to download all our resources for the next year.

Download if you area premium member from here

Or you can download from buysellgraphics.com

Register for a premium account and download a set of vector silhouettes. This set is very useful if you want to create business posters, or backgrounds. Soon we will release a pack with disco vector silhouettes which you can use it for music related designs.

http://www.graphstock.com/download/vectors/characters/3-people-silhouettes.zip

In this set you will find eco-friendly icons with a matte effect suitable for both print and web usage. To download this set of vector icons, you need to register for a Premium account. You can apply here, it takes only a single minute, and you will be able to download all our releases for the next year.

In this set you will find 10 different vector icons for school purpose. Register for a Premium account and you will be able to download this set of vector icons, together with our big collection of premium resources.

In this photo manipulation tutorial I will show you how to create an image with dragons, knights and castles. I’ll show you how to replace a sky in a photo and how to create a surreal scene. Let’s get started!

Resources

These are the stock photos that I used. Please read their rules before using them in any kind of project. The artists who created them worked hard and we have to respect their work.

• Background
• Sky
• Castle
• Knight by rammkitty-stock
• Dragon 1 | Dragon 2 by Elevit-Stock

Final Image Preview

Below is the image that we are going to create in this tutorial.

Step 1

Create a new document in Photoshop (Ctrl/Cmd + N). My document is 1280px wide and 800px high. Then download this photo, open it in Photoshop and move it into your document using the Move Tool (V). Name this layer “bg” and use Free Transform (Ctrl/Cmd + T) to change its size. To make the background sharper go to Filter > Sharpen > Sharpen.

Step 2

Now we will make a selection of the sky because we will replace it later. Go to the Channels panel and duplicate the Blue channel (it has the strongest contrast between the sky and the land) by dragging it over the ‘Create new channel’ button from the bottom of this panel. Now we need to make the sky as white as possible and the land as black as possible. Follow the steps described in the image below. Then Ctrl/Cmd-click on the thumbnail of this channel to select the white area. Activate the RGB channel and go back to the Layers panel. Inverse the selection (Select > Inverse) and hit Ctrl/Cmd + J to create a new layer using the selected area. Name this layer “land”.

Step 3

Download this sky photo and open it in Photoshop. Use the Move Tool (V) to move the photo into your document. Name this layer “sky” and put it underneath the “land” layer. Then go to Edit > Free Transform (Ctrl/Cmd + T) and change the size of the “sky” layer. Don’t worry if there is a white area left in the middle of the image. It will be covered later by a castle.

You can also add a mask to the “land” layer (Layer > Layer Mask > Reveal All) and use a black brush (B) to erase some parts of the trees where you think it’s necessary.

Step 4

Download this castle photo, use the Pen Tool (P) to separate the castle from the background and move it into your first document. Name this layer “castle”, go to Edit > Free Transform (Ctrl/Cmd + T) and change its size.

Step 5

Add a mask to the “castle” layer by clicking on the mask button from the bottom of the Layers panel. Then select a small black brush (B) and use it to erase the bottom area of the castle to make it look like it’s really there, in the forest. Put this layer inside a group (Ctrl/Cmd + G) and name it “castle”.

Step 6

Now we will adjust the color of the castle. Go to Layer > New Adjustment Layer > Color Balance, tick the “Use Previous Layer to Create Clipping Mask” option and use the settings from the following image.

Step 7

Go to Layer > New Adjustment Layer > Brightness/Contrast, tick the “Use Previous Layer to Create Clipping Mask” option and use the settings from the following image.

Step 8

Download this dragon image, open it in Photoshop and use the Move Tool (V) to move it into your first document. Name this layer “dragon”. Then go to Edit > Free Transform (Ctrl/Cmd + T), change the size of this layer and flip it horizontally.

Select the Blur Tool and use it to give a little blur to the left wing of the dragon and his legs. Put this layer inside a group (Ctrl/Cmd + G) and name it “dragon”.

Step 9

Go to Layer > New Adjustment Layer > Color Balance, tick the “Use Previous Layer to Create Clipping Mask” option and use the settings from the following image.

Step 10

Go to Layer > New Adjustment Layer > Levels, tick the “Use Previous Layer to Create Clipping Mask” option and use the settings from the following image. Use the Paint Bucket Tool (G) to fill the mask of this adjustment layer with black. Then select a white soft brush (B) and paint with it over different areas of the dragon.

Step 11

Ctrl/Cmd-click on the thumbnail of the “dragon” layer to select it. Create a new layer and fill the selection with black. Put this layer underneath the “dragon” layer, right-click on it and select Convert to Smart Object. Then go to Edit > Free Transform (Ctrl/Cmd + T), hold down the Ctrl/Cmd key and modify the corners of the transformation box as you see in the image below. Go to Filter > Blur > Gaussian Blur and set the radius to 2.5px. Name this layer “shadow” and set its opacity to 22%.

Step 12

Download this dragon image and open it in Photoshop. Use the Move Tool (V) to move the dragon into your first document. Then go to Edit > Free Transform (Ctrl/Cmd + T) and make this layer smaller.

Name this layer “dragon 2″ and add a 0.7px gaussian blur filter to it.

Step 13

Download this photo and open it in Photoshop. Use the Pen Tool (P) to separate the man from the background and then move him into your first document. Name this layer “knight”, go to Edit > Free Transform (Ctrl/Cmd + T) and change its size. We want to make it look like the knight is preparing for a fight with the dragon. Hit Ctrl/Cmd + G to put this layer inside a group and name it “knight”.

Step 14

Add a mask to the “knight” layer and use a black brush to erase the bottom area of the man’s boots.

Step 15

Select the Burn Tool and use the settings from the following image to make the left area of the knight darker.

Step 16

Make sure that the “knight” layer is selected. Then go to Layer > New Adjustment Layer > Color Balance, tick the “Use Previous Layer to Create Clipping Mask” option and use the settings from the following image. Set the opacity of this layer to 50%.

Step 17

Go to Layer > New Adjustment Layer > Levels, tick the “Use Previous Layer to Create Clipping Mask” option and use the settings from the following image.

Step 18

Go to Layer > New Adjustment Layer > Brightness/Contrast, tick the “Use Previous Layer to Create Clipping Mask” option and use the settings from the following image.

Step 19

Create a new layer and use a black hard brush (B) to paint a shadow for the knight. Name this layer “shadow”, right-click on it, select Convert to Smart Object, and then move it underneath the “knight” layer. Add a 2px gaussian blur to the “shadow” layer and then set its opacity to 40%.

Step 20

Now we will do some color adjustments to the image. Add a new Channel Mixer adjustment layer and use the settings from the following image.

Step 21

Add a new Black & White adjustment layer and use the settings from the following image. Set the blend mode of this layer to Soft Light 25%.

Step 22

Add a new Selective Color adjustment layer and use the settings from the following image.

Step 23

Add a new Gradient Map adjustment layer and use the settings from the following image. To create the gradient I used the colors #290a59 and #ff7c00. Set the blend mode of this layer to Soft Light 30%.

Step 24

Add a new Gradient Map adjustment layer and use the settings from the following image. To create the gradient I used the colors #290a59 and #ff7c00. Set the blend mode of this layer to Overlay 30%.

Final Result

Below you can see the surreal scene that we created. I hope that you enjoyed this tutorial and you learned some new things.

Download PSD resource

Register for a Premium account and you will be able to download all resources from Graphstock, and the one we will release in the next year.

In this PSD file you will find one of the most used social bookmarking icons: reddit, digg, twitter, youtube, flickr, feedburner, vimeo, wordpress, stumbleupon etc. All icons are placed in a PSD file, and as you can see from the previous image you have two types of social bookmarking icons; square icons, and round icons

Hello my friends. Today we will continue to create another nice web 2.0 wordpress theme. Designing wordpress themes is very easy because they does not require so many details like a game layout, or a restaurant layout for example. In this tutorial we will use the Graphstock framework.

If you are starting a website, or simply want to research new web hosting options, make sure you choose the service with the best web hosting review to insure you are getting a quality service.

Step 1 – Download Graphstock framework

Please download the following empty psd layout : Download graphstock framework. Open this document inside Photoshop, and make sure you have the guides visible. In this tutorial i will not show you how i will align the layout, but for your own good is better to keep the guides visible all the time.. I will create two shapes and a line. The shapes are made with Rectangle Tool, and the line of course with Line Tool

Step 2 – Create placeholder for slide show

With Rounded Rectangle tool ( set the radius to 6 pixels ) create the following shape. here we will add a nice slideshow, and on the left side some introductory text.

Bellow you will find the layer styles used to create this simple rounded shape.

Step 3 – Add lights over your slide show area

Next step is to load the selection. The easy way is to hold down the CTRL key, and with your mouse click on the Vector Mask Thumbnail ( you can find this icon in your layer palette )

Create a new layer on top of all layers, and with Brush Tool draw a white area like in the following image. It is very easy to choose a big smooth round brush, and with white color you can click only a single time inside the selection.

Then from the top of your layer palette, change the blending mode to Overlay. Press on CTRL+D to deselect, and your result should be the same like mine.

Step 4 – Create the body of your layout

On the bottom of the layout i will create a similar shape with the previous one.

For this shape i will use the following layer styles.

Register for a premium account if you want to download over 11.000 Photoshop gradients

In the end you will have the following nice line on the bottom of your layout.

Step 5 – Create the newsletter subscription area

I will create another shape with rounded rectangle tool. Here we will place a newsletter subscribtion area in the next steps.

The same i will use the trick with a new layer above the previous one, and your subscription bar will look like mine.

Step 6 – Add a simple logo and some buttons on your wordpress theme

I will add some text on my header, and also a nice round button. The round button is created with Rounded Rectangle Tool, but this time you need to change the radius value to 20 pixels.

Step 7 – Write a nice introductory text

Right under the logo, on the orange shape i will write some text with Horizontal type tool , and with Rounded rectangle Tool i will create two buttons

Below you will find the layer styles used to create the button

Step 8 – Create the slide show area

On the right side i will create placeholder for a slideshow. You can use jQuery or MooTols to animate this slideshow

Here are the layers styles used to create all the new elements from above

Step 9 – Add text on your layout

Under the header is placed the subscription bar. As you can see it has a very important part in your design. I will use another shapes to create the subscription form, and also i will add some text

Under the subscription bar i will write down some text

Between the two blocks of text i will add a 1 pixel line.

Step 10 – Use our premium resources to enhance your layout

If you area premium user then you can use the following vector icons: 81 vector icons

Step 11 – Create a simple footer

After i will create a simple shape in the footer my web 2.0 wordpress layout will be ready. here is my final result

Premium User ?

If you are a premium user you can use the following button to download this PSD layout. If not you can register gere for a new account: Join Graphstock Premium Program

If you are a Premium member download the PSD file from here

Or you can download from buysellgraphics.com

Hello. In this step-by-step Photoshop tutorial i will show you how to create an artistic colorful layout for your software. If you don’t know already we have released a new unique product : 3D software box creator and we thought it will be a good idea to create a web layout where you can sell your products. You can see above our latest product which allows you to create a 3D software box in Photoshop in under 30 seconds.

Step 1 – Download Graphstock PSD framework

Always when you create a new layout i recommend you to use a framework, because you will align the elements of your layout very easy. Here is the download link: Download Graphstock Framework

Open the PSD file in Photoshop, and make sure you have the guides visible. To make the guides visible, please go to View > Show > Guides. You will see some blue vertical lines on this psd layout. This is normal and if you wan tto hide them you can follow the same path from above.

Step 2 – Add color over your background

For start we will need a background for this layout. I will set the foreground color to #f0f0f0 and then with Paint Bucket Tool i will click one time over my document.

Step 3 – Create the main area of the software layout

For this type of layouts ( where you want to sell something ) is very important to make your products visible in a unique way. With Rectangle Tool i will create a vertical shape which will fill my entire document. Please see the next image to understand what i am talking.

Even if your users will have big screen resolutions this area will fill their entire screen , if this software layout will be converted to CSS / XHTML in a good way.

For this shape i will add the following layer styles

If you used the same layer styles like me then you should have the following result.

Step 4  – Create the ” Call to action ” area

Each website should have a call to action area. This a special area where you want to make a conversion. Conversion is when your visitor will make an action. For example when they sign up for your newsletter, or when they will buy your product.

For commercial software templates like the one we will create today it is very important to create a visible area where you will offer 2 incentives and a buy now button. i will explain later why these areas are importan.

With rectangle tool i will create a white shape.

For this white shape i have used the following layer styles

Right under this shape i will create two thin lines. I will grab Line tool, and i will make sure the weight for this line is set to 1 pixel.

Step 5 – Create a simple header

We will come back later to this area. Now i will move to the top of this software layout, and i will create a text logo. In my case with graphstock

On the right side of the software layout i will add some buttons as well a BUY button. Right now the header of the layout will be very clean and there you will have a button which will attract the views of your users. This orange button will make you more sales then you think.

For this button i will use the following layer styles

Step 6 – Make the website unique

When you have a unique website design it means you are serious about your business and products. It means you invest money in designers, and in the same time you leave a good impression for your audience.

Now i will show you a simple way to create a very artistic background. With Ellipse tool create some colorful shapes.

If you have a premium account you will be able to download over 11.000 Gradients. In the following screen shot i will show you hot to add a simple layer style for a single ellipse.

Now you need to be creative and add your own colors.

After you create some round shapes, you need to select all these round shape layers in your layer palette, and press on CMD + E. This shortcut will merge all the layers into a single one, and it will allow you to use filters.

After you merge all round shapes you need to go to Filter > Blur > Gaussian Blur and you can use the following value:

Step 7 – Add noise on the main area of your layout

Make sure you have the colorful layer selected in your layer palette, and then go to Filter > Noise > Add noise and use the following settings

Step 8 – Add an artistic touch

Please go to Filter > Artistic > Rough Pastels, and use the following settings:

Step 9  – Clean your software layout

When you applied the blur filter you have noticed that some parts of the layer extended to much on the bottom and on the top of the website. now it is time to delete the top and the bottom part of the colorful layer. Select Rectangular Marquee Tool, and make a selection on the top of the layout like in the following image.

After you make the selection you need to press on Delete key from your keyboard

Do the same steps also on the bottom of the main area and you will have the following result

Step 10  – Add 3D software boxes

I will add 3 Software boxes. These boxes was made in less than 30 seconds with 3D software box creator

Step 11 – Create a featured area where you can present the features of your product

Here you need to create a area where you will present the best features your product will offer to your clients. Before you write the features it is better to outline the area. i will choose to add the features of 3D Software box creator inside a round shape. I will select Rounded rectangle tool and I will create a round shape

For this shape i will add some layer styles

Step 12 – Write down the features you offer for your product

In the next screen shot you will see some of the most important things our product will offer you. Here it is very important to add only the most important features. If you add to many features some users will not read that area at all.

If you add only a few features some users will thing that your product is not so good.

Always is good to choose a middle number of features to make the featured.

Step 13 – Create the call to action buttons

Under this colorful area you need to place the call to action buttons

I will explain you why i have placed the button in this way. One of the most important think when you sell a product is the support you offer. A very visible area is near the scroll bar of the browser. If you have an easy way to offer support , for sure the visitors will convert into customers. Because support is on of the most important think i recommend you to place icons, and text area to the right side of the layout.

The left button is the Trial. If your product is good then you need to offer a free trial. Trials software will bring you the most money because users will download and test your products. if your software is good then for sure the trail period will convert to a sale. This is very important to make the download button for your trails as visible as you can.

The last button is of course the Buy Now button. I have placed the button in the middle of the page because all people will see it. If you have a good product and a small price then for sure you will have a lot of sales.

I have told you a few steps ago about conversions and incentives. Here the trial download and the Live support is an incentive for your users. They will trust your products and they will feel confident to buy it.

Step 14 – Create the body of the layout

Right under this area i will create the body of the layout> i will use only Horizontal type tool to add some text

Step 15 – Create a simple footer

With Rectangle Tool i will create a dark shape

For our footer i will use the following layer styles

Here is how my footer will look like.

Final result

This is my final result. I hope you like it. Please click on the following image to see how it looks.

Want to download ?

Register for a Premium account, and download all our premium resources + you will be able to download the upcoming releases.

If you are a Premium member you can download this Layout from here

We have found an unique way to create 3D software boxes. Simply create the cover, and after that with a few clicks you can rotate, resize, roll, flip, move the 3D box around your screen.

How do i get it ?

Register for a Premium account and download this cool product which allows you to create 3D software boxes in photoshop without knowing 3D at all.

Why is so good ?

• It is extremely easy to install.
• You can create unlimited software boxes in different angles. Your software box will never look the same.
• Free template available to help you start properly.
• Increase your sales with over 30 % if you use nice graphics.
• You can work like a 3D artist without knowing 3D techniques at all.
• Focus on your products and not on how to create 3D software boxes.
• Sell your products or services with style
• Work on your preferred software : Photoshop
• Works on both mac and windows.
• You can install it on unlimited machines.
• Products placed in virtual software boxes sells better.

Requirements

We have tested our product on Adobe Photoshop CS4 and CS5 ( Extended version )

Future updates ?

Yes we plan to add more templates, and we will release them for our premium members.

]]> http://www.graphstock.com/photoshop-add-ons/how-to-create-a-3d-software-box-in-under-30-seconds/feed/ 5 http://www.graphstock.com/vectors/floral-decorative-vectors-swirls-vector-pack/ http://www.graphstock.com/vectors/floral-decorative-vectors-swirls-vector-pack/#comments Wed, 16 Jun 2010 19:13:54 +0000 admin http://www.graphstock.com/?p=540

In this pack you will find 8 ornamental vector designs. All floral swirls comes in 3 different file types: ai ( cs5 , cs4 ), and .eps

With this set of floral vector illustration you can create nice posters, and postcards or you can print on your t-shirt. In this way you will follow the latest vector trends.