Creating a mock-up for the first time can be hairy. For our class project, we are creating a movie database. Why we are creating a database? In 2 or three months from now, you will be creating a React movie database site. Chances are you won’t have time to create a new one unless you are all caught up with the other projects and assignments.
For this final project, I like to use images that are the same size across the board. I create FPO’s (for position only), allowing me to ‘Paste Into’ the FPO as a guideline. The FPO isn’t damaged, merely, the image that is ‘Paste Into’ creates a new layer as a layer mask. If the picture is a tad bigger than the FPO, I use Free Transform to resize it appropriately to my FPO. For this tutorial video, we are creating a mock-up for a movie database in Photoshop.
The artboard is sized at 1920 pixels x 1080 pixels. I don’t use rows in my guidelines as it does get messy. My guide layouts are set for 1920 pixels wide, with 12 columns, gutters at 20 pixels and margins are 10 pixels for top, bottom, left and right. I also center the columns in my new guide layout dialogue box too.
Watch our video tutorial: