Transcript CiDA E-portfolio

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?
 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
 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 200p
 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.
Bad
 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