Creating Mockups

Starter- Colour Blindness Chart

By creating a colour blindness chart I become more aware of what colours to use to make my website more accessible and inclusive. I can work with these colours that I have made in my chart following what people with different types of colour blindness can see.  By creating different settings people will be able to see work with colour and enjoy it more than if I used colours with the mindset that everyone could see them, it means my work isn’t reaching everyone properly because there are limitations of what some may or may not be able to see because of their disability.

Mockups

What are they?

A visual representation of what your design will look like on a product gives it a real-life form.

Why do we use them?

To show the consumer what your design will look like, it is also a better way to advertise your product or a way to show your prototype. They allow you to show your product with more of a professional presentation for a final design.

By creating your own personal mockup you remove the limitations that you may have using somebody else’s, you have full creative control with how your product is presented. These limitations can include, having to sign up to mockup sites using your email giving you unnecessary emails constantly which can become annoying, you can only get access to free mockups unless you are willing to pay a fee for more in detail mockups, going through multiple pages trying to find the mockup that is right for you which takes up your time. Finally, a limitation that you may encounter especially when in business or advertising is people using the same mockup which would look very good to a client who may have seen the same mockup somewhere else, by using your own mockup you are showing your originality and making your product look more appealing and new.

Creating My Own Mockups

To make my own mockups I found images that I could use to edit and turn into mockups. I began by opening the image in photoshop and using the ellipse tool to put a fitting shape around my image, after this, I turned this shape into a smart object. A smart object is a non-destructive layer in photoshop, any edits you make to the shape can be done or revisited as long as these edits are saved each time. I then transformed my shape so it would fit the image I am using, by holding ctrl t this opened the transform tool where I could edit my shape and by holding down ctrl I could edit my shape more precisely by moving the corners so it would fit into my image more closely and better. Then, by double-clicking my shape layer, my smart object layer would open up where I could edit, changing the colour of my shape and being able o write in it, which I did and then clicked save. This changed what my shape then looked like on my image layer and I could always go back and revisit that smart layer.

Using my own work I used an image of a book and turned it into a mockup for my magazine spread. This time I also had o use the warp tool to create the bending around the edges of the magazine, however one of the problems I have run into was my magazine getting squished into the spine of the book, I will improve on this when using the warp tool with smart objects in the future.

Leave a Reply

Your email address will not be published. Required fields are marked *