Neg2 MM HUD's/Loading Pages/Environments

HUD

For part of this project I am designing the HUD's (Head Up Display) for the Mermaid game. As explained here on Wikipedia, a HUD is:

"A head-up display or heads-up display—also known as a HUD—is any transparent display that presents data without requiring users to look away from their usual viewpoints. The origin of the name stems from a pilot being able to view information with the head positioned "up" and looking forward, instead of angled down looking at lower instruments.
Although they were initially developed for military aviation, HUDs are now used in commercial aircraft, automobiles, and other applications."

A rather basic example is talked about here for a poker site: Online Poker HUD.



This will show items collected, won, earned, found etc, including starfish & weapons:

I am trying to obtain images of 'live' fishfinders from a fishing boat to assist me in my research & understanding into HUD's; see Google Search. As I have closed my Facebook to allow me to concentrate on my studies, therefore I have lost a lot of contacts within the fishing industry to ask! I have contacted a fisherman to see if he can take some photograph's of a 'fishfinder' in use.

Sourced via a Google search: image from Marine Megastore

Gethyn Owen owner of GO Angling - My Way Sea Fishing Trips, took these for me of his 'fishfinder' in use, whilst out in the Irish Sea on his boust 'My Way'. A fishfinder is not a video game, but is another use for a HUD that I can look at to help in my design.

Sketches

Sketching ideas for my HUD

The edges have developed into a shell shape on 1 side & a mermaid's tail on the other, & that will slide out when hovered over/flip over when clicked on.

I thought of using starfish as icons at the bottom of the page, & this has developed into a jellyfish too.

The starfish are cute, naughty, & dance. They can offer clues, & can talk (there is an also Elder who can offer <3 advise). I need to draw up a character analysis & choose a name!

The jellyfish are interactive; will turn around when clicked & the tentacles will move. An idea of having hearts at the end to click on to obtain the required information is an option to look at.

My sketch of a jellyfish; edited into a 'negative' image

My sketch of jellyfish

My Photographs For Inspiration & Creatively Editing

A selection of photographs I have taken that inspired me, delighted me, & ignited a myriad of ideas for me to follow & create.....

Objects To Be Used in The MANMADe Mermaid Game 

Loading Page/Backgrounds/Environments

A selection of photographs I have taken to be used for my inspiration/to create environments & loading pages. The information/copy or text would be overlayed; hence spaces of nature captured.

Original photograph I took with my mobile phone

After some editing I cut out the man & the lighthouse, & pasted into new layers

I edited the lighthouse using Levels, Vibrance etc to enhance, & did the same with the man

I edited the Hue to create an 'off-colour, but did not like the effect it gave.

I used the Blur Filter to make the man hazier, & the Saturation tool on the lights on the horizon.

My photograph now edited but uncropped as it is to be used for a HUD/Environment/Loading Page

I want the colours to have a surreal feel; slightly out-of-sync with nature/reality, over saturated/off-hue, to be subtly striking!

Chasing SunKisses
I took with my HTC Wildfire mobile phone, & slightly edited in Photoshop to sharpen

Voyage of Dreams
I took with my HTC Wildfire mobile phone, & slightly edited in Photoshop to deepen the colourshades

Taken with a Nokia mobile phone & edited in Photoshop; the colours were very pale & I enhanced them using the 'levels', 'vibrance', 'colour balance', 'hue/saturation', 'contrast', etc  tools. Selecting areas of the image & creating layers to edit individually & create a smooth transition of tones from high-impact foreground, to subtly-faded background...ensuring the horizon stayed in the distance. 

A screen-shot of  only 1 of the tools I used in enhancing the image; 'vibrance/saturation'

The image was off-centre, & although I have a penchant for asymmetrical, & imperfect, this didn't work on this image as it detracted from the whole. I enlarged the canvas, using the left side as an anchor, & then, using the 'clone' tool, I copied areas of the image to create a matching right side.

Selecting a square area of the jellyfish, I created variations of a more animated/surreal image for the underwater MerVillage & also to be used for Textures.

Underwater Surf
The above image was edited further, using the 'offset' tool to wrap a selection I copied from the jellyfish, & using 

My Photograph of hanging branches & drooping ferns, amongst wild greenery displayed betwixt natural sandstone walls; in 'negative' the colours, display an almost 'enchanted-land' feel, which inspires the colours & environment for the under-ocean MerVillage, where the Mermaids hang out.

My Photograph of hanging branches & drooping ferns, amongst wild greenery displayed betwixt natural sandstone walls; in 'negative' the colours, display an almost 'enchanted-land' feel, which inspires the colours & environment for the under-ocean MerVillage, where the Mermaids hang out.

My photograph of a red boat
I see boats if I go running on one of my favourites beaches sometimes, & this 1 always seems to stand out, but taking any images with my phone never captures it well, & so when I was bought a new compact digital camera I tested the zoom & was surprised at the detail, considering I was stood so far away.

With my hard drive dying & unrecoverable, I lost some of my images, screen shots & work in progress, including this image, but was fortunate that I had uploaded it to my Blog, alongside some other images.

From my photograph of 1 boat where I edited the 1 boat into '2 boats'
Although this is a reflected image, I have purposefully kept some details the same, as I think it creates questions...

Using the lasso tool I cut around the boat & pasted into a new layer. I adjusted the 'levels' to create a deeper colour & higher contrast, & adjusted the 'vibrancy & contrast' etc, then flattened the layers to create 1 image. Then copied this image into a new layer, reversed it, lined it up & then cropped it create & saved as a new image. I left the red boat on the left as it was, but edited the boat on the right to create the illusion of a different boat, using the 'clone' tool, selecting/copying/pasting using the 'lasso tool' & then 'erasing'; using a small 'feather' on the sea edges & a sharper setting on the boat ensures a more seamless melding of pixels & ensure no trace of copied edges.
I posted it to my Uni Work Album on Facebook, & showed some people & it was 'liked' rather promptly.

Underwater
The above image was edited further, using the 'offset' tool to wrap a selection I copied from the jellyfish, & then editing the 'colour balance' & 'saturation' etc, to increase the red & give a jewel-warmth to the underwater image

Icons/Buttons

I edited one of my own photographs of a Blue Jellyfish, cropped, then used the 'offset' tool as I had been, to create my 'texture' images. Then I experimented using another option: 'high pass' & edited the colours, contrast etc, to create something totally different in aesthetics, than I had set-out to do. To take it further, I used the 'colour-balance' & 'saturation' options to edit the colour, but tried the 'colourize' option & created more colours.

Aqua Button/Icon

Blue Button/Icon

Pink Button/Icon

I would like to use these as buttons or icons, but after testing them at a reduced size, can see they need the contrast heightened to  maintain the depth & clarity of texture. 

UI on this Blog!

When I first started my Blog, I tried both Wordpress & Blogger. From previous experience, I thought Wordpress would be easier to control the layout & style, & write. I actually discovered Blogger was actually better, & more popular with my Uni staff, & so, after spending hours & hours working on Wordpress I switched to Blogger, much to the delight of those that recommended it. 

Being one who notices 'design' & layouts, I worked on creating the right style; colour, font, headings etc, to portray 'me' & what illustrated the image & work I was hoping to create for my degree. Some of this took more work than I initially anticipated, but I deemed it necessary & persevered....however, the 'Page Tabs' lacked a side border & I could not see how to fix this. As I am concentrating on UI (User Interface), it is important to me that the Blog looks tidy & offers the right impression; the lack of, & untidy, borders caused me more than annoyance! I have researched Blogger help, asked others for advice, & followed links sent to me, & others which I have found on my own searches, ie: How to align pages, Designsbyrs, Reviews Blogspot, Bloggersentral. However, after allocating numerous hours & trying to learn more HTML, I have not yet been successful & thus deem it vital to shift my attention to my other projects, & will obviously visit this at a later date, or learn & ensure my commercial Blog is far neater.