 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





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 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 the examiner wants
An intuitive user interface
What does this mean?
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
Facilities access to all of the students work
You include thumbnails of your work
You include other images where appropriate
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.



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

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

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

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

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






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

 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

 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.
Good
Bad