Building Mockups in Photoshop : Netflix

This tutorial is in respect with Adobe Photoshop CC. Previous versions might look a bit different, but overall, it’s all the same.

By the end of the lesson, you will know about :

• How to create a complete visual representation of Netflix home page
• Basic idea of webpage elements

Resources required

• Background image — Download here
• Netlflix logo with transparent background — Download here
• “See what’s next” — Arial Bold font
• “Cancel anytime” — Calibri Regular

Create a document

Create a new document in Photoshop with width = 1280 and height = 720

Enable Grid

Creating a grid to base your designs on is invaluable for giving structure to the page. Grids enable you to build solid structure and form into your designs.

Background Image

Drag and drop the background image file onto the white canvas area, and it should cover the entire screen space.

Add logo

Drop your logo onto the canvas. If it covers the entire canvas, resize it using Ctrl+T and transform it into this size. When done, drag your logo to the top left, leaving 3 rows from the left and 2 columns from top.

Add Text — Part 1

Choose the Horizontal Type Tool from the Tools menu, and type the following — See what’s next

Font Family — Arial Bold (choose from the font toolbar at top left)
Font Size — 80pts

Place the font vertically just below the Netflix logo, leaving 3 rows from left and approx 6 columns from the top.

Add Text — Part 2

Font Family — Calibri Regular
Font Size — 32pts
Text — WATCH ANYWHERE. CANCEL AT ANY TIME.
Location — 3 rows from behind, one column gap vertically below Text 1.

Buttons

Choose the Rounded Rectangle from the Toolbar. Choose the color #e30813 with no stroke and radius 3px.

Place the rectangle vertically below Text 2 keeping one column gap and same gap from the left side. Add another text — JOIN FREE FOR A MONTH of 24pts and place the text centrally on the button. It should look this without the grids.

Add Gradient

Now, to add the final touch, we add the gradient effect. The Gradient tool creates a gradual blend between multiple colors.

Final Product

The final product should look like the one you see at www.netflix.com

Task for the attendees

All the attendees are requested to send the .png and .psd files of the mockup you have built to xxcodecommunity@gmail.com for feedback.
Note please : The final mockup that you send must also have the Sign In button at the top right. Just a tiny bit of extra effort from your end.

Conclusion

This was a very basic tutorial on mockups in Photoshop. Should take you maximum 30 minutes if you are experienced in Photoshop. Beginners can always ask in our Facebook community for any kind of help or just drop a mail to us. For Day 2, we are building the mockup of Instagram Android app. See you tomorrow.

Like us on Facebook : facebook.com/xxcodecommunity
Join our Facebook group for women developers & designers — https://www.facebook.com/groups/xxcode