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.
Let’s Begin!
Open you’re good ‘ole Photoshop and set the canvas to 980px by 1000px.
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).
Select Filter > Noise > Add Noise and set it to one, Uniform, Monochromatic.
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.
Now, on the menus select edit > define pattern and give it a name, like diagonal pattern.
In Blending Options > Pattern Overlay, select the one that we created and hit OK.
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.
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.
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.
We now have this layout. Now, onto the next one!
For the logo, I use Ballpark. Use the foreground to #fffff.
For the logo’s drop shadow, for the color use #7b7979 and set the Angle to 120%, distance and size to 5px.
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 🙂
For the navigation, I use Bebas 14pt #ffffff.
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.
Add the image and position it on the right side of the slider.
Now we will create a title, I use Arial 22pt #ffffff Regular.
On the drop shadow of the slider text, foreground is #42600b, distance and size is 1px.
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.
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.
Click Add layer mask for the brush layer, and grab Gradient Tool (G).
Here’s how you can use your Gradient Tool (G), we just wanted to fade the end lines of the brush.
Your slider should now look like this one. 🙂
We will create the navigation slider, go to Custom Shape Tool (U) and select the Arrow 2.
Now add a drop shadow to the shape that we just created. Use the foreground #c1ed6e and distance, size is 1px.
You should duplicate the navigation controls and position them left and right.
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.
Next is inner glow, #b9e960 for color and choke 100%, size is 2px.
Next is inner glow, we used this color #b9e960 and size is 2px.
On stroke, use the color #4e6b18 and size is 1px, moving on the next one.
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.
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.
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.
Next is the read more button, grab your Rounded Rectangular Tool (U) and set the radius to 2px, color is #ffa800.
Now for the drop shadow, #8b8e84 for foreground, distance is 2px size is 6px, angle 90%.
For inner glow, use #ffffff and size 3px.
Copy the gradient color settings above.
On gradient settings, set the angle to 90 and hit ok.
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.
This is what it looks like, I also duplicate the text and buttons for the two post.
Next, we will add a twitter bird, and add it on the sidebar of the page.
I use the Rounded Rectangle Tool (U), radius 5px and fill it with #c9f6f9.
Next is we will create a arrow on the bubble, select Custom Shape Tool (U) and select arrow 6.
Now, rasterize the layer and delete the half of it by selecting it using the Marquee Tool (M).
You should now have this arrow with bubble beside the twitter bird.
Duplicate the logo and navigation, and use the color #7d7d7d for those. Add the drop shadow for the text.
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.
