Published on January 29th, 2013 | by Adrien | Supercolor3
Create a Search Engine Homepage with Custom Icons in Photoshop and Illustrator
Enjoy this Post! Please Help spread the word and Share it!
In this Tutorial, we’ll learn how to create a search engine homepage in Illustrator and Photoshop using basic shapes, a few filters and some layers styles.
We use search engines every day to find a website, answer a question or to find a place to eat, We’re going to create a search engine for places to go out, i’ve created 4 categories but you can create the one you like, we’ll create the small icons in Illustrator then take it to Photoshop to layout the homepage.
Resource Needed for this Tutorial:
Part 1 – Illustrator
Step 1 – Categories Shapes Part 1
Open up Illustrator and create a new document, for the size I used 500x325px. (if you don’t have Illustrator you can also create those icons in Photoshop)
We’re going to create the 4 categories icons, the logo and the advanced search icons.
Let’s start by creating the template for the Categories and Logo icons, select the Ellipse Tool (L) and create a perfect circle (hold the Shift key while creating the circle). create a triangle using the Pen Tool (P) on the left bottom part of the circle, duplicate this triangle, then right click on the new triangle, go to Transform – Reflect and select Vertical. place this triangle on the bottom right of the circle. Create a small oval shape using the Ellipse Tool at the bottom of our shape, this will be the shadow.
Create a Radial Gradient on this oval shape, going from black (50% opacity) to white (0% opacity). change the Transparency of this oval shape to 60%.
Now we have the template for most of our icons, duplicate it 5 times, change the main colour for the first icon to a dark blue colour and add some text, I added some «Z» letters. this will be the Hotel category Icon.
The next icon will be for the Restaurant category, change the main colour to a pink colour, then create a folk and knife using basic shapes.
For the Fast Food category, let’s create an burger icon, using two half oval shapes, two rectangles, to finish it add some sesame seeds on the top. Use the Pen Tool (P) to create the sesame seed, then duplicate it as much as you want, rotate some and place them on top of the burger.
Step 2 – Categories Shapes Part 2
Let’s now create the Cinema category icon, create two rectangle shapes, then create 5 vertical stripes of about 50 x 9px. select those 5 stripes, right click on them, go to Transform – Transform Each. add a -45° rotation.
Place those shapes on the smaller top rectangle then use the Pathfinder Tool, Window – Pathfinder and click on the Minus Front option.
Duplicate the striped shape we just created, place the new one on top of the original shape, then Reflect it Horizontally. rotate it from the top right corner.
For the Search Logo just create a magnifying glass icon, create a circle with no Fill and a black stroke then add a small rectangle on the bottom left side of the circle.
For the Advanced search icon, create the same circle with no fill and a black stroke then add two small rectangles, one on the top and the other on the bottom, select those two rectangles, duplicate them and rotate them 60°, repeat the same process an other time.
Now we have our icons, we’ll use those in a few steps, save your document, and switch to Photoshop.
Part 2 – Photoshop
Step 3 – Homepage Background
Create a new document in Photoshop with a white background, I used 1440x900px for the dimensions.
For the theme of my fake search engine, I choose an image of a city I found some time ago, you can download it in the Resources Needed Section at the beginning of the tutorial. open up the image in Photoshop and drag it into your document, if it opens as a smart object, right click on the image layer and select rasterize.
Go to Image – Adjustments – Desaturate (Ctrl+Shift+U).
Duplicate the desaturated image, then go to Filter – Other – High Pass with a 5px radius. Change the Fill of this layer to 20% and the Blending Mode to Overlay.
Now start adding the categories icons we created in Illustrator, go back to Illustrator, select the first icon, copy it then paste it into our Photoshop document, duplicate it as much as you want, make those icons in different sizes. bigger in the bottom of the canvas and smaller on top of the canvas, I’ve placed them on top of the buildings.
Repeat the same process for the other 3 categories.
Select all the layers we created except the background layer and merge them, Layer – Merge Layers.
Step 4 – Homepage Background Blur
I’m using Photoshop CS6, this version comes with new cool blur filters, we’re going to use one of those filters to blur some part of the background, so the focus goes on the search box in the middle of the canvas.
select the Merged layer, then go to Filter – Blur – Iris Blur with a 3px blur and those parameters.
- For previous versions of Photoshop : you can reproduce the same effect, duplicate the merged layer, go to Filter – Blur – Gaussian Blur, add the same amount of blur, 3px, then create a Layer Mask on the duplicated blurred layer, select the Brush Tool (B) with a big soft rounded brush and black for the colour, paint in the middle of the canvas (make sure you paint with the layer mask selected. then merge the two city layers.
We’re going to create a fading effect on the city layer, create a Layer Mask on the layer, then select the Gradient Tool (G) with a Black to White gradient and a 50% opacity, create the gradient with the layer mask selected from the bottom to the top of the canvas.
Step 5 – Search Box
Select the Rounded Rectangle Tool and create a white shape in the centre of the canvas, change the Fill of the layer to 50%.
Create an other rounded rectangle, a little bit small than the previous one and with a dark colour, I used #1E1E1E.
Create a third rounded rectangle, white this time, smaller than the previous one.
Use the Type Tool (T) and type «Search».
Step 6 – Advanced Search Box
We’ll now create an advanced search box with more options to select the categories to search. Reselect the Rounded Rectangle Tool and create an other shape in white, change the Fill of this shape to 75%.
Add the icon we created in Illustrator then type Advanced Search next to it using the Type Tool.
Select the Rectangle Tool (U) and create a small square, change the fill of this shape and add some layer styles to it with those parameters:
Add the Hotel icon next to the square and type Hotel next to it using the Type Tool. Repeat the same process for the other 3 categories.
Step 7 – Logo and Links
Let’s create the logo, copy the logo icon we created in Illustrator, next to it use the Type Tool to give a name to the Search Engine, I named it «SearchIT»
Use the Type Tool to write some bold words, use different colours, I wrote «Search – Find – Enjoy» on top of the search box. duplicate those words, change the colour of the duplicated text to black, place the duplicated layer behing the original one, use the Move Tool to move the duplicated text and change the Fill to 25%.
To finish this homepage, create some links to the other pages of the search engine on the right bottom part of the layout, I created 3 links, Contact Us, About, Terms and Conditions. use the same technique than on the bold words for the shadow behind the links.
We’re done! I hope you’ve enjoyed this Tutorial, you can use those techniques to create any style of homepage, also you can create a lot of different icons and play with the colours. Feel free to share your creations or leave us a comment.