This is for a visual design assignment I did for university. The finished design is included.


In assignment 1, we were required to create two screen layouts. The first of these was a web page mockup using either Funky Frog or Down Under Reef Holidays as the basis for the design. I chose to use Funky Frog as I felt it would be a more stimulating project to create. The mockup was to be designed in Adobe Photoshop CC or earlier, at 1024×768, at 96 dpi, and in 8-bit RGB colour format.


The aims for the web site mockup was to present an eye-catching site that demonstrated visual flair, ease of navigation, and to leave a visitor in no doubt as to what the theme of the site was. The colour most associated with frogs is green, and the mockup makes liberal use of the colour. The logo banner is is written in the Weltron Special Power font, which was obtained from the font repository (2018). This font has a suitably “funky” appearance which does not trade style for legibility. The remainder of the site’s text is in the Verdana font, created by Microsoft for excellent screen legibility (Microsoft 2017). There is also an image of a frog, manipulated in Photoshop, that blends in well with the funky theme. The frog image was sourced from a wallpaper website ( 2013).

Methods used

Adobe Photoshop CS6 on Windows 7 was used. Withal, I found using Photoshop a challenge, as most of my image manipulation has been done with the open source GIMP program, Although the two share many common features, they are different enough in implementation to cause some confusion. When adding text to the image, I encountered a punctuation positioning bug that required searching for a solution, which I found (Digital Hippies 2013). In conclusion, the creation of these two graphics was certainly an educational process.

• Selecting canvas size, dpi, colour mode and bit depth from Photoshop’s new image dialogue.
• Working with layers, how to rename layers, hide them, duplicate them, and move them up and down the layer view.
• Changing the background to a background layer using the layer’s context tool.
• Using the blending mode context option, selecting gradient fill from the options, selecting gradient colours and orientation, placing a gradient onto a layer.
• Using the colour selection dialogue to change colours. Entering HTML hexadecimal codes for the colours, e.g #ffffff for white.
• Adding text using the text tool, changing font type, size, colour fill
• Positioning text using the move tool, resizing text using the transform tool, adding drop shadow effects to the text.
• Using the shape tool to draw rectangles, with both sharp and rounded edges. These were used for the navigation bar, the example drop down menu, and the black vertical dividers.
• Using the lasso tool to remove the frog image from its background. I attempted to use the quick selection and magic wand tools, but could not find the right tolerance to separate the image from the background effectively. I ensured that anti-aliasing was set to remove any jagged edges.
• Using the eraser tool to clean up the edges around the separated image of the frog, ensuring that anti-aliasing was set for this tool as well.
• Importing the frog image as a png file with alpha transparency, allowing it to blend in with the gradient theme of the background. Positioning the image using the move tool, and the transform tool to resize it to suit the overall web page.
• Using the shape tool to create the three panels: the main body panel, the sidebar panel and the sale panel at the upper right. Using the fill tool to give colour to these panels. Using the layer’s context menu to add drop shadows to each of the panels.
• Using the layer list to place the main body text panel underneath the drop down menu.
• Using copy and paste techniques to add illustrative graphics to the image, such as the Facebook image, the treble clef, and the mobile phone graphics.
• Using the move tool and the transform tool to position and size these graphics.
• Using the text tool to place other text, such as the phone number, the copyright, and the panel text. Using the move and transform tools to position and size the text.

funky frog

The funky frog website mockup