Photoshop site tasarım 4
In this tutorial you will learn how to create a clean a sleek digital product layout. This layout can be used also as a business layout where you can show case your projects or present your business ideas. Bellow you can see the final result. If you’re a member, you can download the PSD Layout at the bottom of the page.
Before you start creating this layout i suggest you to download the following image on your computer
This background was made for this tutorial, and you can download it for free from the following link:
Download background image
We will create a seamless pattern from this small pice of image.
Open the background.jpg image in photoshop, and then go to Edit > Define Pattern. Choose a name for this pattern and then click on OK
After you create this nice seamless pattern, please close the document and create a new document.
I will use the PSD framework from:
Ultimate CSS Framework
The reason i will use the PSD file is because soon all these layout will be converted soon into valid css/xhtml websites using our Framework.
If you don’t have the Ultimate CSS Framework yet, you can create a document with the following sizes:
1100 pixel – width
1200 pixels height
These values are not so important. However i recommend you to create documents bigger than 940 pixels ( for width ). This website width will fill 99 % from all screen resolutions.
Now let’s start working on this software layout or business layout.
Select Paint Bucket Tool, and from the top of your screen in the option bar select the gradient you just created.
Photoshop’s Options Bar is located directly below the Menu Bar and there you’ll find all the various options associated with the different tools in the Tools palette.
Click one time on your background layer. Your software layout will look like this.
Now i will use some pre-made buttons from our Web Graphics pack.
If you join our membership you will be able to download also a huge set with layer styles. Over 16.000 Photoshop layer styles. All these tools combined will help you to design very fast. For example with just a few mouse click you can change the look of the buttons, and adobe to your color needs.
I will create a new shape where we will create a slide show. The shape was made with Rectangle tool.
For this white shape i will add some layer styles. To add layer styles to any shape or layer it is very simple: go to Layer > layer style.
My new slideshow will look like in the following image.
Near this ” powered jQuery” Slide show i will create our logo
I recommend you to use our 3D Creator , which allows you to change any shape into a nice 3D shape. In our case you can create a nice 3D logo, and place it near your text logo.
For this text logo i have used a pressed layer styles. You can achieve the same effect as mine if you use the following layer styles
Above your slide show you can create a simple horizontal text menu. I have used two colors because under the white txt button i will create a shape.
I will enable the Grid ( press on CMD + ‘ ) or go to View > Show > Grid, and then with pen tool create the following shape.
On your slide show add a image. i have used my own wallpaper because i am an Apple fan.
Under your logo write down a nice slogan. Mine is not so nice but you got the idea.
On each website layout you will create try to add as many details as you an. Sometimes some simple lines can change the look of your layout, that’s why i will use Line Tool to create two thin lines. Please note that you need to use two different colors. You can take the color codes from the next image.
As you can see i will add these lines also under the slide show, in the body of the layout. In the same time i will add some text with Horizontal Type Tool
Further i will create some image place holders, and i will write further text.
The layer styles to create the small image place holder you will find in the next 3 images
Now we will work on the footer of the layout. Here i will add some icons, text and Horizontal Lines
If you don’t like the icons i have used you can choose some icons from our pack:Vector icons
Or check our blog to see the next updates
On the right side of the footer i will add more text and the same details: the horizontal lines
This is my final result.
Sosyal Platformlar