|
|
|||||||
| Web Layouts Create professional webpage layouts with this very detailed, step by step tutorials. |
![]() |
|
|
Submit Tools | LinkBack | Thread Tools | Display Modes |
|
||||
|
Hello
Today i will show you how to create this layout ( tutorial number 5 ) Create a new document with a white background.the size should be 760 x 700 px. Create a new layer by pressing Ctrl+Shift+Alt+N in the same time. Then select Rounded Rectangle Tool ( be sure you have the radius = 5 px ) And draw a rectangle like mine. I have used this color to fill it: #535353 You can see a small image of my first step: ![]() Then you have to rasterize this layer: Go to Layer > Rasterize > Shape After you have rasterized you have to duplicate this layer. To duplicate the current layer using the Layer menu, choose Layer > Duplicate Layer Select the first layer: Now go to Edit > Transform > Perspective and set this value: You will notice that the top of the rectangle will go to left. Do not forget to press on Enter. This will be the shadow for the second rectangle. Now with the same layer selected go to Filter > Blur > Gausian Blur and set the radius to 7 px. After you press ok change the opacity for this layer to 25%. Now select the top Layer ( Shape 1 Copy ) and let's change the layer style. Please use this settings: For Inner Glow settings use the color #003399 Set the Gradient color for the left #66CCFF and for the right #0066CC Now we have to add another Rectangle. Select the Round Rectangle Tool ( radius 5 px ) and Draw a rectangle like mine: On this Rectangle we will create the buttons and we will have also place for logo. But first of all we have to create one more time a shadow. i will not explain one more time. please folow the steps from above. After you have created the shadow we will add a layer style for this rectangle. And for the gradient use this colors: Left = #fcfcfc Middle = #d1d2d5 Right = #9c9ea5 Now select the Rectangular Marquee Tool ( be sure you have selected the rectangle you have already applied this layer style ) With Rectangular Marquee Tool make a selection like this: Now press on Delete. You can do this as many times you want. After you press delete you can move this selection with your arrow keys and when you are happy with the distance press one more time delete. Repeat this steps as many times you need. I will create 4 buttons. After you have created this buttons press Ctrl+D to deselect You will notice that the selection is gone This is my result: Now we will add another details for this buttons. With rounded rectangle tool create small rectangles and place them like me: For this small rectangles use the same layer style as the big blue rectangle. Now you can add your logo on the remaining place ( i will add a logo which you can have it form our paid forum area - VIP members - the price to access this area is 29.95 $ and you can download all the logos.This is a limited time offer. we will add more logos and the price will be bigger. ) Access VIP Download Area Here are some examples of logos you can download them from VIP download Area: ![]() ![]() ![]() For more previews please acces VIP Download Area After you pay the subscription please contact ADMIN Now let's come back to our layout. here is the image with the logo. We have finished the buttons and the logo. Now let's start to work on the other part of the website. Now create a new layer ( Press Ctrl+Shift+Alt+N ) and with the Rectangular Marquee Tool make a selection like this: Create a new transparent document (3x 3 pixels) Zoom it by 1600 %.With the Pencil tool create somethng like this: ![]() Then go to Edit > Define Pattern . Choose a name and press Ok. Now let's come back to our template.Select Paint Bucket Tool. On your top side of the window select the pattern you just made. Use this settings: ![]() To learn more about patterns please go on this link: http://www.talk-mania.com/buttons-web-graphics-banners/37-professional-patterns-general-use.html Now press on time with the Paint Bucket tool inside the selection on our layout. this is the result. You can change the color if you want. Go to Layer > Layer style > Color overlay I will choose a white color. now please add as many details as you want. I have duplicated this line and with my arrows keys i have placed under the first one. Now it is your choice. You can add as many as you want. first think about the content you will have on this website. Select the Rounded Rectangle Tool and create something like me: You can notice that the rectangle is biiger on the bottom part. you will see in my next steps why i have created this. Rasterize this Layer: Layer > Rasterize > Shape Select the Rectangular Marquee Tool and make a selection like mine. ( be sure you have this rectangle selected ) Then go to LAyer > New > Layer via Cut Photoshop will select automaticaly this layer. Now please select this layer and drag it on Layer pallete above the Background layer: After that the image will look like mine: Now press D on your keyboard. ( this will reset your colors ) Select one more time the Rounded rectangle Tool and create a small rectangle. please see the next image: Place this rectangle like in my next image. be sure you drag the layer on second place : Then with the arrow keys place it like me: Let's add a layer style for this small black rounded rectangle . now we will add another details. The most important think is to add one more time shadow on the grey rounded rectangle. Please follow the firts steps from this tutorial. Now create another document 30 x 30 pixels with a green background (it is not important the color but it should be something different from white so you can see better what i am doing) Zoom this document at 1600 % Then with the Pencil Tool and with an white color create something like this: ![]() The image from above is resized at 50 % Now with the Rectangular Marguee Tool select the white line and with the Gradient Tool make something like this: ![]() Then Make another selection: ![]() With this selection press Ctrl+C and then Ctrl+V .Then press on Move Tool, then go to Edit > Transform > Rotate 90 CW. Then place the new layer like me: You can notice that i have used the blue color instead of the black one. When you drag this document to our layout it will look very good, and this document will blend very good on our layout. With the Magic Eraser Tool delete the green color.Select the Move Tool and drag this on the template.Now place the new layer like on the folowing photo (I have duplicated a few times the layer (the one we have just made before) and i have rotate to fit with my template) If you have question please register and ask me . i will answer to all your question. If you want to download the PSD file view Attachments this is my final image: ![]() I want to invite you to take part on our contest. We will give you access to VIP download area if you have 100 post or threads created. More infos here 3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk ) |
|
||||
|
Quote:
You can download the PSD file from the first post. If you have problems downloading please let me know and i will send you directly in your e-mail Thanks 3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk ) |
|
|||
Hi i got your message in my email but unluckily i am not allowed to send msg. Just send it in my email please. Coz when I click on the link or zip i am always redirected to the log-in page which i am currently logged in, ![]() |
|
||||
|
I think you have a problem with your cookies.i will send the file in a few minutes.Thanks
3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk ) |
|
||||
|
Quote:
Right now i am working on another tutorial. I will create the third tutorial from 100 Tutorials Marathon We make the tutorials very simple because it will help you to learn better. And i will try to insert all the steps ![]() one more time welcome Thanks 3D Logo Creator + Mega Pack + Photoshop Designer's Pack = Only 148$ ( save 150 $ - use coupon code: talk ) |
![]() |
| Bookmarks |
| Thread Tools | |
| Display Modes | |
|
|