CiDA E-portfolio

Lesson Objectives To understand the task of creating an e-portfolio To understand how to make banners and buttons All students will make a banner and buttons Most students will make rollover buttons Some students will make a background

CIDA E-portfolio In your CiDA Coursework you must create an e-portfolio to show off all of your work. This is just like a normal portfolio of work that you may have in Technology or Art except it is viewed electronically. To do this you must make a website which includes links to all of the work that you have in your folders. This is a really important aspect of your coursework. If your work is not accessible through your e-portfolio website then the examiner cannot mark it.

Your e-portfolio Your e-portfolio is a representation of your work. It will be based around your own design, your own theme and your own ideas. The mark scheme only asks that you do the following An intuitive user interface Includes graphical elements Facilities access to all of the students work All design elements are suited to the audience and purpose Clear explanations that introduce the content of the e-portfolio.

What does it all mean? What the examiner wants What does this mean? An intuitive user interface It conforms to all accessibly rules It is really easy for the user to use. Links are clear and well labelled. It has a logical structure. Includes graphical elements You include thumbnails of your work You include other images where appropriate Facilities access to all of the students work You allow access to all of your work in a way which is easy and straight forward for the examiner. All design elements are suited to the audience and purpose Everything you design has a consistent colour scheme, font, theme etc. Everything must suit the overall theme of your coursework. It must look like a professional portfolio of work. Clear explanations that introduce the content of the e-portfolio. Each piece of evidence that you link has clear and detailed explanations about what it is. The examiner is not expected to know every piece of work that you design, so you must tell them what you have done.

What will I make? Homepage Illustrator Photoshop We’re going to practice creating an e-portfolio using your work on Photoshop and Illustrator. Your mini e-portfolio will have the following pages Homepage Illustrator Photoshop

Task 1: Banner Your first task is to create a website banner in Illustrator. This is the bit that goes at the top of a website and usually contain the company name. In this case, your banner will contain your own name. Before you get started I want you to spend 5 minutes discussing the following with a partner Colour scheme Font This portfolio is a graphical showcase of your work. What colour scheme do you think would best do that? You could bear in mind the Adobe Suite colour scheme – lots of bright bold colours. Photoshop is blue, illustrator is yellow. You want a professional look to your portfolio, but also remember that you are a graphic designer so it must look fashionable and “cool”

Creating the banner Open Illustrator File>new Choose the size 1024x768 Press ok

The whole page Width = 1024px Height = Between 100 and 200px What you have in front of you in the WHOLE webpage (without scrolling) You can now create your banner at the top Bear in mind the proportion of your page that you want to dedicate to your banner Make it too big, and you will have to scroll a lot to find your work. Width = 1024px Height = Between 100 and 200px

When you’re happy with your banner you must export it. File>Export. Chose the PNG file type Save it as BANNER in your CIDA Practice folder.

Task 2: Buttons You are going to have 3 pages to your e-portfolio, therefore you need 3 buttons. Each button will be a rollover button – it’s good practice to make rollover buttons each time you make a website as you pick up lots of marks for it. You can choose to have your navigation down the left or along the top BUT I would always put it along the top. It makes it neater when you only have a few pages. With this in mind each button then needs to be 341px wide Around 100 px high

The trick to rollover buttons Remember: You need a new illustrator file for each button (or alter the button and export) Use sensible file names “Illustrator 1” and “Illustrator 2” “Home up” and “Home over” Each button must be IDENTICAL. Do not alter the background, position, size of text etc. Button as it would normally appear Button as it appears when the mouse rolls over it

Extension You can also use illustrator (or Photoshop if you like) to create a background. Use the page size 1024 x 768 Things to think about If your background is very patterned/colourful you will struggle to get a font colour that will allow you to read the text If you page ends up being scrolled, your background will “tile”. Try and ensure your background will look good continuously downwards. Bad Good