Portfolio: Inserting and Styling Content

Preparing Documents to be Inserted in the Showcase Page

The Showcase page is dedicated to displaying examples of work you are particularly proud of for any number of reasons. It's also a great way to demonstrate growth. Take the time to cruise through your past work that you would like to display. You may select examples from any year in school.

You must include a minimum of five (5) work samples

Collecting and Saving Work Samples

The first order of business is to create an organizational system to house all your work samples. We want to plan for adding work samples through the year. To make this simple, we're going to create a new folder and name it "workSamples" to house all the different files for the Showcase.

    Screen Shot File Structure
  1. Open your "lastname_firstname_portfolio" folder in your U drive
  2. Create a new folder and title it "workSamples"
  3. Your file structure should look similar to the image on the right
  4. Cruise through your U drive for assignments and projects that clearly demonstrate you skills and/or growth as a student. Look for assignments and/or projects such as:
    • Chemistry Lab Write-ups
    • Math Projects
    • Spanish Projects
    • RCC Adobe Assignments and/or Projects
    • Helicopter Logging Project
    • International Marketing Project
    • Careers Unit (Cover Letter, Thank You Letter, etc)
    • Graphic Design Pieces
  5. When you find a good example, select the file, then right-click < copy or ctrl + c
  6. Navigate back to the "workSamples" folder you created, then right-click paste or ctrl + v to paste the file in this folder
  7. Continue collecting work samples in this manner

Convert Word Documents into PDFs

To steamline opening work samples on your portfolio, we need to convert ALL Word documents into PDFs. This will ensure almost any user can open your work sample, plus, documents will open much faster as a PDF than a Word doc.

    File Save As
  1. Open the file you wish to convert to a PDF in Word
  2. Select File > Save as
  3. The Save dialogue box opens
  4. In the Format drop-down menu, select "PDF"
  5. File Save as PDF
  6. For the File Location, Navigate to the "workSample" folder in your "lastname_firstname_portfolio" folder and click Save
  7. Repeat the process for ALL your Word documents that you have selected to be used on your Showcase page

Create Thumbnails for Graphic Work Samples

If you plan to include a graphic design work sample (which you are encouraged to do) on your Showcase, we need to create thumbnail images for them so the work sample doesn't take up a large amount of space. This is a standard web-design practice.

  1. Locate the file(s) you wish to include on the Showcase
  2. select the file, then right-click < copy or ctrl + c
  3. Navigate back to the "workSamples" folder you created, then right-click paste or ctrl + v to paste the file in this folder
  4. Open the graphic in Photoshop
  5. Select Image > Image size
  6. We want to maintain as much consistency as possible, so shoot for resizing the image to 150 px high (h) by 150 px wide (w). This may not always work for the image you would like to use, so we suggest you resize the width to 150 px, click OK then crop the height to 150 px – see the instructions below
    • Image Canvas Size
    • To crop the height of an image, select Image > Canvas size
    • Type 150 in the Height box, and select "pixels" from the value type drop-down menu to the right
    • Click the top arrow in the Anchor Diagram box so the image is clipped from the bottom only
    • Canvas Size D Box
    • Click OK
    • A warning message pop ups explaining some clipping may occur
    • Clipping Warning
    • Click OK
  7. Select File Save as
  8. Add the word "thumbnail" to the end of the file name – i.e. "homecomingAdThumbnail"
  9. Select JPEG from the Format drop-down menu
  10. For the File Location, Navigate to the "workSample" folder in your "lastname_firstname_portfolio" folder
  11. Click Save
  12. Set the quality to the lowest "Medium" setting (5)
  13. Click OK
  14. Repeat the process for ALL your image documents that you have selected to be used on your Showcase page

Next Steps

In the next exercise, we will begin inserting the content you prepared for the Showcase page.

Click here for the next tutorial