Blog

How to Create a Colorful Business Layout

admin February 8, 2014 design develop layout psd theme tool web
How to Create a Colorful Business Layout

This step by step tutorial will teach you how to create a colorful business layout. If you’re a member, you can download the PSD Layout for this tutorial at the bottom of the page –

 

 

http://www.enthuons.com/blog/

 

Before I begin this tutorial, I want to tell you about our 60,000+ premium design items package, which you will be able to download instantly and use in your own or client designs. Become a member of Ultimate Designer Toolkit before you proceed to get instant access to all of them and design like a pro.

 

Now to begin this tutorial, we will need to create a new document. I will set the background of the document to #efefef

 

http://www.enthuons.com/blog/

 

I will select Rectangle Tool, and i will make a big gray shape. –

 

http://www.enthuons.com/blog/

 

Then for this shape i will add the following layer styles. –

 

http://www.enthuons.com/blog/
http://www.enthuons.com/blog/
http://www.enthuons.com/blog/

In the middle of the previous shape i will add another one but this time i will use Rounded Rectangle Tool. Over this shape i will add a image with a nice bokeh effect –

 

 

http://www.enthuons.com/blog/

Also for this image i will add some layer styles.

 

http://www.enthuons.com/blog/
http://www.enthuons.com/blog/

Under the big image with this nice colorful layout i will create 4 different shapes. Try to use different colors. –

 

 

 

http://www.enthuons.com/blog/

Now i will create another layer ( press on CTRL+SHIFT+ALT+N ) and over this layer i will use Brush Tool with a smooth round tip to make the following drawing. It is easier to make a selection of the orange shape before you add the drawing with brush tool. –

 

 

 

http://www.enthuons.com/blog/

Then for this layer i will change the blending mode to overlay, and in the same time i will change the opacity to 50% –

 

 

 

http://www.enthuons.com/blog/

I will duplicate this layer with this nice lightning effect, and i will place it over the other shapes. Click on the following image to see better what i am talking about. –

 

 

 

http://www.enthuons.com/blog/

On top of the web layout i will create a new shape. –

 

 

 

http://www.enthuons.com/blog/

I will use the following layer styles.

 

 

 

http://www.enthuons.com/blog/
http://www.enthuons.com/blog/
http://www.enthuons.com/blog/
http://www.enthuons.com/blog/

Then i will create a small circle with Ellipse Tool –

 

 

 

http://www.enthuons.com/blog/

For this small circle i will add the following layer styles –

 

 

 

http://www.enthuons.com/blog/
http://www.enthuons.com/blog/

Now it is very important to delete the bottom half of the circle. To delete the bottom part first you need to right click on the layer inside your layer palette, and then with Rectangular Marquee Tool make a selection over the bottom part of the circle. After that press on Delete on your keyboard.

 

 

 

Another way is to use the Eraser Tool, after you rasterize the shape.

 

 

 

http://www.enthuons.com/blog/

If you don’t have already a membership with us i recommend you to signup now ( You can find the subscription button on the top of the website ) and you can download the following set of icons: Download 512 Vector icons

 

 

Open the .ai files inside illustrator, and then select each icon you want to use.

 

 

The steps are very simple:

 

 

Go to Adobe illustrator.
Select the icon.
Press on CTRL+C ( Copy )
Return to Adobe Photoshop
Press on CTRL+V ( Paste )

 

 

Do the same for all the icons –

 

 

 

http://www.enthuons.com/blog/

For all these icons i will add the following layer styles. –

 

 

 

http://www.enthuons.com/blog/
http://www.enthuons.com/blog/
http://www.enthuons.com/blog/

Between the buttons, i will add some vertical dividers. I will use Line Tool to add the lines. –

 

 

 

http://www.enthuons.com/blog/

Then for each line i will add the following layer styles. –

 

 

 

http://www.enthuons.com/blog/

The next step is to add a simple text logo. If you want another logos you can try to use the 3D Creator which helps you to convert each 2D shape into a very nice 3D shape –

 

 

 

http://www.enthuons.com/blog/

On the bottom of the slideshow i will add another shape with Rounded Rectangle Tool. –

 

 

 

http://www.enthuons.com/blog/

I will add the following layer styles.

 

 

 

http://www.enthuons.com/blog/
http://www.enthuons.com/blog/
http://www.enthuons.com/blog/

Then i will add some circles which are made with Ellipse Tool. I will use the same layer styles i have used for the top vector icons –

 

 

 

http://www.enthuons.com/blog/

With Ellipse Tool, i will crate a new shape.

 

 

 

http://www.enthuons.com/blog/

Then i will load the selection for the orange shape. –

 

 

 

http://www.enthuons.com/blog/

And then i will make sure the white circle is rasterized, and i will delete the outer part of the white shape. Your result should be the following one. –

 

 

 

http://www.enthuons.com/blog/

For this white corner i will add the following layer styles –

 

 

 

http://www.enthuons.com/blog/
http://www.enthuons.com/blog/
http://www.enthuons.com/blog/
http://www.enthuons.com/blog/

I will duplicate all the corners, and i will move them over each box. –

 

 

 

http://www.enthuons.com/blog/

Then i will add another icons, and some text.

 

 

 

http://www.enthuons.com/blog/

On the bottom of the shapes i will add some lines ( please click on the image to see better ) , and of course some text. –

 

 

 

http://www.enthuons.com/blog/

One of my last steps is to add another text with horizontal type tool. –

 

 

 

http://www.enthuons.com/blog/

This is my final result. I hope you like it. You can use this web layout not only for a business layout. With slight modifications you can use it also for a wordpress theme. –

 

 

 

http://www.enthuons.com/blog/

Download the PSD below.

 

Source: http://www.ultimatedesignertoolkit.com/tutorials/create-colorful-business-web-layout/
Like
Like Love Haha Wow Sad Angry

49 Responses

  37. Rastrear Teléfono Celular
    |

    El software de monitoreo de teléfonos móviles CellSpy es una herramienta muy segura y completa, es la mejor opción para un monitoreo efectivo de teléfonos móviles. La aplicación puede monitorear varios tipos de mensajes, como SMS, correo electrónico y aplicaciones de chat de mensajería instantánea como Snapchat, Facebook, Viber y Skype. Puede ver todo el contenido del dispositivo de destino: ubicación GPS, fotos, videos e historial de navegación, entrada de teclado, etc.

  38. linetogel
    |

    🌟 Incredible, this is truly remarkable! I’m grateful for the effort you devoted to sharing this priceless information. It’s always fantastic to discover skillfully written and insightful content like this. Keep up the outstanding job! 🔥👏💯

  39. linetogel
    |

    So excited to share my thoughts here! 🌟 This content is refreshingly unique, combining creativity with insight in a way that’s captivating and educational. Every detail seems carefully put together, exhibiting a deep grasp and passion for the subject. It’s extraordinary to find such a perfect blend of information and entertainment! Kudos to everyone involved in creating this masterpiece. Your hard work and dedication shine brightly, and it’s an absolute joy to witness. Looking forward to seeing more of this amazing work in the future! Keep amazing us all! 🚀👏💫 #Inspired #CreativityAtItsBest

  40. linetogel
    |

    🚀 Wow, blog ini seperti perjalanan kosmik melayang ke galaksi dari kemungkinan tak terbatas! 💫 Konten yang menegangkan di sini adalah perjalanan rollercoaster yang mendebarkan bagi pikiran, memicu kegembiraan setiap saat. 💫 Baik itu gayahidup, blog ini adalah harta karun wawasan yang menarik! 🌟 🚀 ke dalam perjalanan kosmik ini dari imajinasi dan biarkan pikiran Anda berkelana! ✨ Jangan hanya mengeksplorasi, alami kegembiraan ini! 🌈 Pikiran Anda akan bersyukur untuk perjalanan mendebarkan ini melalui dimensi keajaiban yang menakjubkan! ✨

  41. Rastrear Teléfono Celular
    |

    Ubíquelo a través del software del sistema “Find My Mobile” que viene con el teléfono o mediante un software de localización de números de teléfonos móviles de terceros.

  46. daftar masuk
    |

    The weather couldn’t be more perfect, and neither could your post. It’s truly a day to be grateful for.

Leave a Reply

Your email address will not be published. Required fields are marked *

Useful Links

GET IN TOUCH

  • B-9, 1st Floor, Sector-2, Noida, Uttar Pradesh 201301, India

  • (+91)9582545485

  • services@enthuons.com

  • Mon – Sat: 10:00 AM to 7:00 PM

© Enthuons Technologies Pvt Ltd All Rights Reserved

arrow-down