1. CiDA E-portfolio

2. 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

3. 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.

4. 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.

5. 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.

6. 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

7. 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”

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

9. 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

10. 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.

11. 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

12. 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

13. 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