Today we worked in small groups sharing ideas to collectively create a mind map with the strengths and qualities that are needed to be a freelance photographer. The strengths and qualities that were included in our mind map are of the following:

  • Excellent Communication and People Skills
  • Respectful
  • Innovative
  • Self Belief
  • Ambitious
  • Creative
  • Reliable
  • Genuine
  • Self motivated
  • Self pride
  • Focused
  • Organised
  • Independent
  • Approachable
  • Dedicated
  • Professional
  • Current
  • Assertive
  • Network
  • Committed
  • Promote Yourself
  • Confident
  • Passionate
  • Advertising your work
  • Polite
  • Determined
  • Strong portfolio
  • Patient
  • Health and Safety awareness
  • Money Management
  • Well equipped
  • Honest
  • Self disciplined
  • Responsible
  • Presentable
  • Well mannered
  • Punctual
  • Be the best that you can be

For example, if you were pitching to a client to commission you for a photography job you need to be genuine, reliable, have excellent communication and people skills. They need to see your passion for photography and have an interest in your ideas which need to be creative and innovative, ensuring that your work stands out from the rest this could be shown with a strong portfolio that is unique but also to show that your work is current. You need to be most importantly be professional, presentable, punctual and open so that the client can get a feel for your work and your personality.

Whereas if you have already been offered a photography job, to ensure that you complete the job correctly and therefore will be hired again. You need to be professional as this is an important quality that always needs to be maintained. You need to be punctual, organised, reliable, well equipped, focused and be the best you can be. This will show the client how capable you are but also you need as be as creative with your photography as you can to show that your work is different to any other photographer and for this reason they should hire you again, this quality in particular is about promoting yourself. It is also very important that you remain polite and respectful at all times during and after the shoot.

To be a freelance photographer on a day to day basis attending to client shoots, managing your time and money and ensuring that you are the one photographer that shines the most, you must be dedicated, focused, ambitious, have self belief, extremely self motivated, creative, current, organised, independent, committed, professional, determined and most importantly passionate  about what you do.

 

Aims of the lesson

 

  1. Know the importance of a site map – Create a simple site map
  2. Create a simple text based navigation bar
  3. Style the navigation buttons using CSS
  4. Add hyperlinks to the navigation bar
  5. Time permitting – Create a new html page save as ‘gallery.html’
  6. Preview in Safari

 

Create links and see how to style text

The website we updated today was the website that we had created in lesson 4 (recap)

We started by typing in the navigation bar, page titles that we were going to create in future lessons. Making sure you return after typing each title:

‘Home

Gallery

Contact Us

About Us’

 

This then creates new paragraph tags

 

 

 

After typing in the titles we then clicked on bullet point list in the page properties panel displayed at the bottom of the window with all the titles highlighted

 

We then changed the coding adding two new tags <ul> Unordered list <li> list item

We then wrote a new CSS rule allowing the words to sit next to each other, when creating this new CSS rule we selected ‘compound’ as the contextual selector type. We choose this as this rule allows you to have your selections exactly how you want them.

So then our CSS Rule then appeared as ‘body nav ul li’ which meant that we had a list item in an unordered list in the navigation tag in the body tag (which is the whole website part) we already know that this would be in the body tag, so we then selected in the drop box of this rule changing it to ‘less specific’ which meant it then only displayed ‘nav ul li’ so this was now the same as before but only showed a list item in a unordered list in the navigation tag style. Once you have selected this correctly we then clicked ‘ok’ to this window.

This then brings up all the options in CSS in which you can change the appearance of your website. At first we started with the ‘List’ section and changed the ‘list style type’ to none.

We then moved down to the ‘Block’ where we chose the display as ‘inline’

After this we lastly changed the margins to 10px so that there was a larger gap inbetween each title on our website. We did this in the ‘Box’ selection.

 Creating a Hyperlink

Once, we had created the new CSS rule and adapted it to how we wanted we then created each word into a hyperlink which would then direct you to other a page.

We did this by highlighting the first title named ‘Home’ and then typing in the link section which is displayed in the page properties panel at the bottom of the window. In this link I typed in ‘index.html’ which is the name of our website page that we have created over the last few lessons which is our home page, so we were just redirecting the home button to the main page again. Once we had made this hyperlink the word ‘Home’ then changed dark blue and underlined which meant it had successfully turned into a hyperlink. Also another tag then appeared in our html panel which was <a>  <a/> the tag for a hyperlink.

 

We then created hyperlinks for the rest of the three titles ‘Gallery, Contact Us and About Us’ by doing the exact same thing as we did to create the home page hyperlink.

But the only difference was that we hadn’t actually created the pages for these titles so we typed into the link section ‘#’ which still created a hyperlink for each title but this was for a pretend page which is called a ‘Sudo link’.

 

 

 

 

Keyboard short cut for a hash alt & 3 – #

We then clicked ‘Link View’ at the top of the dreamweaver window which allowed me to show my website in a internet browser form which then I could click on my titles that had been hyperlinked.

 

 

 

 

 

 

The aim of the lesson was to complete these steps by the end of the lesson, which we were recapping from the previous three lessons. We did this as it would improve our skills and quickness in Dreamweaver, to learn the basics of the program and be able to set a website up on our own.

1. Use photoshop to create a web ready image

2. Site set up

3. Change the appearance a structured HTML page with CSS, using the supplied index.html file

4. Use a background image

5. Insert an Image

6. Preview the file in Firefox or Safari

7. Blog entry for the lesson

Open up the image in photoshop, check the image size, by going to ‘Image’ and then ‘Image size’

We reduced the size from 17.2MB to 1.55MB

Web resolution should be changed 240 to 72

Select sharper best for reduction, to check this you can zoom in keyboard shortcut ‘command 1’ this will zoom in your screen by 100% so you can actually see what the image looks like.

Crop tool – set the measurements to 500px and 300px and then drag the crop tool over the photo once you have positioned your crop then hit the return key and this will change your photo into the correct size.

Once you have cropped your image you then need to change it into transparent so that it will fade from your background colour of your website and then into your picture. This is just a function that we have learnt; you don’t have to do this to very photo that you include in your website.

Quick Mask Mode – Making your image transparent.

Click the quick mask mode and make sure that your background

Gradient Tool black to white it’ll be different depending on what colour your background is this should be the white square first followed by the black square below.

Unlock the layer, double click on the layer then click backspace and the running ants will appear around your image to show the selected area that will turn transparent to create a fade effect.

Saving your image, you must remember to save your image as save for web and devices as a PNG file.

To set up a new site in Dreamweaver

You can either go into the site menu and click site set up or create a new html on the welcome screen which might appear when you open Dreamweaver.

Name your website for example ‘Week 4 recap’

Choose your root folder ‘Aardvark Photography’

Advanced setting – local info –then choose your images folder.

Once you have done this you have successfully set up a new website.

The HTML part of the website is the control and structure

Main Tags to a website:

<body>

<header>

<nav>

<section>

<footer>

CSS (Cascading Style Sheets) are the appearance/design part of a website

To use CSS to change the appearance of your website you select page properties which is situated at the bottom of the Dreamweaver window.

This panel allows you change the appearance of the website, for example the background colour, the text colour, the text font, bold, italic, the size of the font and even the gaps between each line of text i.e. Title, sub heading and when your main section of your website starts.

Sometimes to change certain things to your website youhave to create a new CSS rule which will be for a tag, for a specific part of the website for example the header tag, nav tag, section tag or footer tag. This appears in a definition window where you can adapt your website to your personal criteria which we learnt how to change the font colour, background colours, Skip the ‘Block’ section and move on to the forth option which is ‘Box’ where you can change the spacing between the title, sub heading etc. We then changed the header tag to height 350px in the box section and also making the padding/margin to 10px all the way around.

 

The difference between padding and margins

Margins – sit outside

Padding – sit inside

When you create a new CSS rule for the section tag we then typed in the coding area ‘MAIN AREA’ at the left hand side of the Dreamweaver window which should appear when you work in ‘design’ view this allows you to see the coding side of the website but also the appearance of the website this is a good way as every time you change something using the CSS you can then see the coding change in the HTML part of the website, which is a good way to learn the coding for different appearance changes. The reason why we typed in ‘MAIN AREA’ to the coding html part was so that we could see this was our main section in the tag and where the main information of my website was going to be stored.

Once we had set up all the tags we then inserted the image that we had previously edited in Photoshop at the beginning of the lesson. You can insert an image by clicking in the insert panel at the right hand side of the Dreamweaver window, then select the ‘insert image’ icon and find the image in your images folder for your website which we also set up at the beginning of the lesson and then select the correct photo and then it will appear on your website. Once you can see the photo in the main area (section tag) of your website you have successfully set up your website and inserted an image that you prepared previously in another programme so that it was appropriate for the specification of my website.

Week Three

Create web ready images create transparent images and saving them to the correct format

Open up your image in Photoshop to adjust to size for your website

Using the crop tool set the measurements to these sizes

  • 500px width
  • 400px height (always make sure you work in pixels per inch)

Drag the crop tool and then crop your image using the size template.

All website resolutions should be 72dpi/ppi        PPI- pixels per inch

Image formats for WEB GRAPHICS.

JPG – Best suited to use for websites also can be used for transparency

PNG- portable network graphic (transparency) 24

GIF ­– only a standard of 256 colours (better for web logos not photographers)

Week Two

 

Advanced Tags and Coding that we will be using in the future to develop our websites

 

Header Tag:  open tag <header> closing tag  </header>

Navigation Tag: open tag <nav> closing tag </nav>

Section Tag open tag <section> closing tag </section>

Footer Tag: open tag <footer> closing tag </footer >

Dreamweaver Introduction – Week One

 

Steps to setting up a website in Dream Weaver

  1. File new – New document Window
  2. Site centre window, name your website ‘My first Site’
  3. Home sites
  4. Make a new folder in Sites ‘first_website’ (ALWAYS USE A UNDERSCORE INSTEAD OF A SPACE)
  5. Advanced settings –Local Info make a new folder in first website folder, name it ‘Images’ this is where all your images for your website will be saved.
  6. YOU HAVE CREATED YOUR FIRST WEBSITE (everything that you create will be saved in this folder that you have created)

 

HTML. (Hyper Text Mark-up Language)

 

All our websites that are made should be working in HTML 5, doc type – this is the latest version.

Make sure that you work in SPLIT VIEW in Dreamweaver this allows you to see your website but also the coding.

 

TAGS – websites work by using codes and tags this tags are essential.

 

Open Tag <body>

Closing Tag </body> (if you see a ‘/’ in a tag this will mean it is always a closing tag)

 

Paragraph tag: open tag  <p>  closing tag </p>

 

If you want to format a heading select Heading 1 it then replaces with <h1>

 

Always view Dreamweaver in Designer – insert- double click then select Image and this then allows you to insert an image on your website.

Place the film into each slot this has to be in the dark booth, maximum of four negatives otherwise it can jam.

Once the film is in place you then need to push down the orange plastic part as this will keep the film in place.

Developing the film:

HC-110 developer

Kodak yellow 40ml ratio 1.31

1240ml of water which has to be precisely 20 degrees

9 minutes of agitation

empty jug then add 1280ml amount of stop for 30 seconds

Then add 1280ml of fix for 8-10 minutes

Then wash with cold water for 5 mintues