Dreamweaver testing- Fixed Header/footer for website navigation

These are screenshot of testing out the header and footer, so users can navigate around the site from within each persons portrait.

TESTING Header
To begin I have taken the code from one of the Fullpage master Jquery example pages – Fixed Header-CODE CIRCLED in image below- Within the EXAMPLE PAGE SOURCE CODE I linked it to PAGE 3 (my practice page) and then tested it in Firefox to test whether links would work within the header. the link within the header did work in the browser, i then tried the same by inserting and linking the image (to another page) into the header div, this also worked.


 

testing navigation

^^ I now entered the code into my practice page (3) but the css style did not apply to the page. I had to go back into the example page source code and copy the CSS style back into PAGE 3 so the style would apply. image’s below show steps taken.

testing navigation-2

^^ without the CSS code for the header in the sourcecode, it displayed as two blank boxes above the fullpage video background. image below also shows this.

testing navigation-3

 
Once the codes above was inputted the black fixed header and footer bar worked on my practice page, ‘3’
testing navigation-4


^^header link in Dark purple


 

Now that i had the fixed headers working, i tested putting a table in, with image links. IMAGES BELOW. This worked successfully, but table width, padding etc will need tweaking for final site.
testing navigation-5

testing navigation-6

Screenshots of photoshop editing stages

Stage 1
Firstly I identify the different planes of the image, i.e foregrounds, background and mid-ground.

Screenshots-pt.-1_0007_Layer-1

 


 

Stage 2
Then using the QUICK SELECTION tool or magnetic/polygon lasso, i select the objects in the different planes, I’ve found quick selection tool to be the most useful, as long as their is definitive contrast difference between the the different objects, then Photoshop will easily select the edges this will help detect the edges.
Screenshots-pt.-1_0006_Layer-2

 


Stage 2.1
The quick selection tool hasn’t always worked for images with poor contrast, so i have quite often had to skip the first part of stage 2 and skip straight to 2.1, using quick mask mode.

Using quick mask mode to touch up and refine the edges, this stage i have made plenty of use with the brush and blur tools.

Screenshots-pt.-1_0005_Layer-3


 


Stage 2.2
Following this i use the refine edge command, which can smooth out the edges, detect edges, shift the edge, feather or add contrast defining the edge a bit more, some edges will need different alterations at this stage, so I dial the settings accordingly.

 

Screenshots-pt.-1_0004_Layer-4


 


 

Stage 3

At this stage, i duplicate the background to create a new background layer, and name the original background layer, ‘Original’

Screenshots-pt.-1_0003_Layer-5

 


Stage 4
Now i select the foreground selection whilst on the new background layer, by pressing Ctrl+ clicking on the foreground layer mask, the DELETE the selection from the new background layer.
once this is done, i got to SELECT> modify > expand the layer by 10 Pixels. this is to ensure the edge won’t be visible after i use content aware to fill the now empty space.
Screenshots-pt.-1_0002_Layer-6


Stage 4.1

Using the clone stamp and blur tool, i try to make the recently content-aware filled space match the rest of the background. Having completed this, i would now, rename all the layers and save the overall file as a PSD ready to import into after effects.

Screenshots-pt.-1_0001_Layer-7

Screenshots-pt.-1_0000_Layer-8