Play with Blending Options: add a white shadow, color overlay ( #6aaefd) and an inner shadow.Ĭopy the styles of this layer and add it to all your icons:įill these four columns (width of each - 240px) with some "loremipsum" text. You should use the same font that you used for your menu bar. I've selected the following icons: "settings","bubble", "photo","world"Īdd them to our design (don't forget to use the grid), distance - 180pxĪdd some text. With the help of the Ctrl+Alt+G shortcut,create a clipping mask. To create nice slider, we should add some images to it. WOW! We did it :) Look at the final result of our menu bar:Ĭreate a new shape: width 940px, height 372pxĪnd a border: Blending Options-> Stroke (20px, color- #6bafff)
Play with Blending options (add a white shadow) For example, you can create the "F" letter, decorate it with a blue color (#5a90e5). Try to create your Facebook logo for this button. Now add the "follow" text to our Facebook button and play with its blending options. Select all your "Facebook" layers and merge them (Ctrl+E).īlending Options-> Color Overlay (#c1cac5 ) Then use the Rectangle tool (rounded) to create a square (holding the Shift button) with the following size - 16pxĬhoose the Pen Tool and cut off half of this square.Įdit-> Transform->Rotate to move this triangle and place it on the left side of the rectangle Again with the help of the Rounded Rectangle tool (radius - 3px), we'll create a button
That's why today we'll also learn how to create a simple Facebook button. Social media connections are very useful and important for every website. Here is our final result for the search form: Just apply some bells and whistles to it.
Open the "Linecons Free - Vector Icons Pack and find the search icon there. Now it is time to use icons that we've downloaded at the beginning of this tutorial. Use our favorite Photoshop tool one more time :) Create one rectangle with dimensions 41px and 32pxīlending Options -> Color Overlay (color - #6bafff) Use the Rounded Rectangle tool (radius - 3px) to create a search form with the following dimensions: 124px and 26pxĪdd some inner shadow: Blending Options-> Inner Shadowīlending Options-> Color Overlay, color- #5a90e5 So, create are rectangle (the color that I've used for it is #5a90e5).Įvery decent website has a search form. The size is 14px.Īll the menu buttons are links and the designer should show how their hover state looks like. You can create your design with any font you like. I chose the #6bafff color for this menu bar. Use the settings that you can see on the screenshots: To make this menu more eye-candy, go to the Blending Options -> Drop Shadow. I think that it is an easy task to create a website's menu. The width of your menu is 940px, the height is 34px. Use the Rounded Rectangle tool to create it (radius - 3px). now it is time to design the menu of your future website. Put some grids to your design with intervals of 60px and 20px. You can easily create a solid visual and structural balance of websites with grid-based designs. We want to create an awesome design, yeah? That's why we should use a grid system for designing. Layer Style -> Blending options-> Pattern Overlay. Now you should add some pattern to your background. Just fire up your Photoshop and create a new document ( CTRL+N). Subscribe to our newsletter and get a huge bundle with design freebies and useful tutorials once in two weeks:
To design a web layout like this,you should download the " Linecons Free - Vector Icons Pack"īy the way, you can download a free template based on this design: Free Business Template. Today we're going to create this lovely website layout: