How to Create a App Website in Photoshop

On 31 May, 2012 By With 4 Comments

If you’re an App Developer, creating an app website is one way to market your product, since this is one of the things that you can display the features and how it will be useful to the market.

Today we will create an App Site Template in Photoshop, we will use a couple of techniques that we’ve learned.

You can download the PSD at the bottom of this tutorial!

You can use this template for you’re next project or if you just wanted to learn new tricks.

app site layout How to Create a App Website in Photoshop

Let’s Begin!

1 canvas1 How to Create a App Website in Photoshop

Open you’re good ‘ole Photoshop and set the canvas to 980px by 1000px.

2 header image How to Create a App Website in Photoshop

Create a new layer and named it header, grab Marquee Tool (M) and select a 40px part on header, fill it with #363636 using the Paint Bucket Tool (G).

3 header noise How to Create a App Website in Photoshop

Select Filter > Noise > Add Noise and set it to one, Uniform, Monochromatic.

8 pattern1 How to Create a App Website in Photoshop

Now we will create a pattern so we can use it on the timer, create a new canvas (CTRL + N) and set the size to 5px by 5px. Select pencil (B) and draw the a diagonal line same as above.

9 edit pattern1 How to Create a App Website in Photoshop

Now, on the menus select edit > define pattern and give it a name, like diagonal pattern.

4 header pattern How to Create a App Website in Photoshop

In Blending Options > Pattern Overlay, select the one that we created and hit OK.

5 footer How to Create a App Website in Photoshop

On the bottom of the canvas we will create a footer, grab your Marquee Tool (M) and select at least 40px and fill it with #d5d3d3. Next is to add Noise to it, go to Filter > Noise > Add Noise and select 1%, the rest are default.

6 slide bg How to Create a App Website in Photoshop

On our header, we will now create a background for slider. Use the Marquee Tool (M) to select the canvas, (make sure you are creating new layers) and fill it with #a0c657, named this as slider.

7 body bg How to Create a App Website in Photoshop

Under the slider layer, create a new one and fill it with #ffffff, as for the Drop Shadow use #bdbdbd for the foreground colors and set the distance to 5, size is 16.

8 body How to Create a App Website in Photoshop

We now have this layout. Now, onto the next one!

9 header logo How to Create a App Website in Photoshop

For the logo, I use Ballpark. Use the foreground to #fffff.

10 header logo dropshadow How to Create a App Website in Photoshop

For the logo’s drop shadow, for the color use #7b7979 and set the Angle to 120%, distance and size to 5px.

11 header logo light How to Create a App Website in Photoshop

Create a new layer and select your brush, set the size to 60px or more. Fill it with #ffffff, then go to Filter > Blur > Gaussian Blur and set it to 92.7%, Opacity to 48%. You can play with the settings according to your taste 🙂

12 navi How to Create a App Website in Photoshop

For the navigation, I use Bebas 14pt #ffffff.

13 navi drop shadow How to Create a App Website in Photoshop

On Blending Options > Drop Shadow, use #000000 and set the angle to 120%, size and distance to 1px and hit Ok.

To copy the layer style, right click on the layer > copy layer style, click on the other layer on which you want to paste the layer and right click > paste copy layer style.

14 slider thumb How to Create a App Website in Photoshop

Add the image and position it on the right side of the slider.

15 slider title How to Create a App Website in Photoshop

Now we will create a title, I use Arial 22pt #ffffff Regular.

16 slider title dropshadow How to Create a App Website in Photoshop

On the drop shadow of the slider text, foreground is #42600b, distance and size is 1px.

17 slider highlight How to Create a App Website in Photoshop

Create a new layer, select the Rising Sun Brush and fill the center of the slider layer. Move this layer below the image and text layer.

18 slider highlight extract How to Create a App Website in Photoshop

To extract the excess brush on the slider layer, select the brush layer then hold CTRL + Click on the slider layer and hit CTRL + SHIFT + I and delete.

19 slider highlight mask How to Create a App Website in Photoshop

Click Add layer mask for the brush layer, and grab Gradient Tool (G).

20 slider mask direction How to Create a App Website in Photoshop

Here’s how you can use your Gradient Tool (G), we just wanted to fade the end lines of the brush.

21 slider mask complete How to Create a App Website in Photoshop

Your slider should now look like this one. 🙂

22 slider controls How to Create a App Website in Photoshop

We will create the navigation slider, go to Custom Shape Tool (U) and select the Arrow 2.

23 slider control drop shaodw How to Create a App Website in Photoshop

Now add a drop shadow to the shape that we just created. Use the foreground #c1ed6e and distance, size is 1px.

24 slider complete How to Create a App Website in Photoshop

You should duplicate the navigation controls and position them left and right.

25 slider main drop shadow How to Create a App Website in Photoshop

We will now add drop shadow to our slider layer, make sure you select slider layer. Use #9a9898 as foreground color and -105% on angle, distance is 8px, size is 35px.

26 slider inner glow How to Create a App Website in Photoshop

Next is inner glow, #b9e960 for color and choke 100%, size is 2px.

26 slider inner glow How to Create a App Website in Photoshop

Next is inner glow, we used this color #b9e960 and size is 2px.

27 slider stroke How to Create a App Website in Photoshop

On stroke, use the color #4e6b18 and size is 1px, moving on the next one.

28 blogpost How to Create a App Website in Photoshop

Just below the slider, we will create a blog post. Create a new layer, named it as thumb and select your Marquee Tool (M), fill it with #ffffff and go to stroke #cfcecc for foreground color and size is 5px.

Grab the image from Dioxy and Meidaloot, save it and drag it on the canvas.

29 blogpost thumb clipping How to Create a App Website in Photoshop

On image layer, right click and select create clipping mask. Make sure below the image layer is thumb layer. You can position the image any way you like or re-size them.

30 blogpost text How to Create a App Website in Photoshop

Next is to add title and content, for the title I use Legue Gothic 29pt, and for the content Arial 12pt Regular, both colors used #333332.

31 blogpost button How to Create a App Website in Photoshop

Next is the read more button, grab your Rounded Rectangular Tool (U) and set the radius to 2px, color is #ffa800.

32 blogpost button drop shadow How to Create a App Website in Photoshop

Now for the drop shadow, #8b8e84 for foreground, distance is 2px size is 6px, angle 90%.

33 blogpost button inner glow How to Create a App Website in Photoshop

For inner glow, use #ffffff and size 3px.

34 blogpost button gradient settings How to Create a App Website in Photoshop

Copy the gradient color settings above.

35 blogpost button gradient settings How to Create a App Website in Photoshop

On gradient settings, set the angle to 90 and hit ok.

36 button text dropshadow How to Create a App Website in Photoshop

I added some text on the button, I used Arial 12pt and use this color #9c6a08. Add some drop shadow, use #ffffff distance and size to 1px.

37 blogpost complete How to Create a App Website in Photoshop

This is what it looks like, I also duplicate the text and buttons for the two post.

38 twitter bird How to Create a App Website in Photoshop

Next, we will add a twitter bird, and add it on the sidebar of the page.

39 twitter bubble How to Create a App Website in Photoshop

I use the Rounded Rectangle Tool (U), radius 5px and fill it with #c9f6f9.

40 twitter bubble arrow How to Create a App Website in Photoshop

Next is we will create a arrow on the bubble, select Custom Shape Tool (U) and select arrow 6.

41 twitter bubble arrow  How to Create a App Website in Photoshop

Now, rasterize the layer and delete the half of it by selecting it using the Marquee Tool (M).

42 twitter bubble complete How to Create a App Website in Photoshop

You should now have this arrow with bubble beside the twitter bird.

43 footer shadow How to Create a App Website in Photoshop

Duplicate the logo and navigation, and use the color #7d7d7d for those. Add the drop shadow for the text.

app site layout How to Create a App Website in Photoshop

And we are done!

Glad you were still with me until the end 😀 You can use this template on your projects or if you want to learn some neat tricks on Photoshop, I’d suggest to practice your eyes on different detail of design so you can easily notice it and you can apply it to yourself as well. If you have other suggestion, please do let me know in the comments.

4 Responses to “How to Create a App Website in Photoshop”