Made With Adobe Firefly

Digital Portfolio Website

You have enough knowledge and material to get a start on your portfolio website. We use Google Sites because it is powerful, free, and connects easily to all the Google stuff we already use.

Step 1 - new project folder

We will be making things specifically for our Portfolio, so naturally we need a new Project Folder as place to save files related to making the website. Make a new project folder IN OneDrive called:

240930 Digital Portfolio - Project Folder

The steps you must follow before you make changes to create the Headers are listed below the tutorial for copying, pasting and renaming your "Titles" PSD file. Watch the tutorial demonstrating how to do the 5 steps and read the 5 steps carefully before asking any questions.

We already have a Photoshop file with text layers and backgrounds that we could "recycle" to quickly make a couple of headers we will need for our web pages. Follow these instructions carefully or you can lose work if you save a file you have cropped on top of your original!

Open File Explorer
Find your "Titles" Photoshop file and Copy it
Go to your new Digital Portfolio Project Folder
Paste a copy of your Titles file in this new folder
Rename the file:

240930 Portfolio Headers - Firstname Lastname

THEN you can open (by double-clicking!) this new PSD file to do the cropping and editing demonstrated in class and recorded in the tutorial above.

Step 2 - recycle your psd layers

Headers are generally a lot wider than they are tall, so cropping the file to a new ratio is the first thing to do. The crop tool has a number of preset standard sizes, but we'll put in a custom ratio of 4 to 1.

Recycling the Titles PSD

How change the proportions of a copy of our "Titles" Photoshop file with text and background layers so we can re-use some of them to make custom headers for our Digital Portfolio. Warning! I used the File-->Save As method to turn my old file into a new one saved in the new folder. Do not make any changes to your Titles Photoshop file!

This video gives us a head-start on our headers by using File --> Quick Export as PNG as you alter the text of your existing Titles. Name them "Header - My Favorite Things" and "Header - My Digital Portfolio", etc.

Step 3 - custom headers

Student Examples of Headers

We only need the first two headers to get started with the website... only make the rest if you are 100% caught up, including making the Google Site using the videos on Step 5. You WILL need custom, unique headers for each of the 8 main pages you will all have in your site menu, in this order:

My Digital Portfolio (for your Home page)
My Favorite Things
Vector Art
3D Models
Android Apps
Tech Apps
Core Classes
About

Step 4 - create your website

Start a Google Site

Let's get started on your portfolio! sites.google.com is all you need to remember, but it's best to get to this Google app through the launchpad. Make sure you put your name in the right spot, share the site publicly and with mhicks4@neisd.net (me) as an Editor.

Please uncheck the "Notify" box when you do!

Page Headers

There are a lot of options for adding things to a page - we'll start with simply uploading your Home page header and placing it in the right place. Then you can add a few sentences introducing who you are and what this website is for. There will be a much more detailed "About" page that we'll add later on. Visit 2023 Portfolios to get some ideas if you need them. We are not using Firefly this year, so 2022 may be better.

Adding Pages

We'll have 8 main pages on our Portfolios, with every using the same names in the same order to make it easier for viewers to find your projects. Pages don't have to be visible in navigation, though, which means they may be there, but won't show in the Menu until there is something there to see.

Step 5 - build your first page

We can begin building the My Favorite Things page even though we haven't finished our video yet. We have four original pieces of artwork (our PNG Titles) as well as high-resolution, carefully selected images from the internet. We'll be taking them with us to our next project folder ("My Favorite Things - THE VIDEO") so this is a good time to collect them together and build the portfolio page.

Tools to Add Images

Arranging images and text on a page can be tricky. Google has several standard "Content Blocks" that make it much easier. You don't have to use all the parts and they can be re-arranged (some effort required). Images will be cropped to fit in the square when uploaded - there is an "uncrop" tool that helps.

Step 6 - Publishing your website

Watch on YouTube

Publish Your Portfolio

It's time to take your Portfolio live! We need to be orderly about your web addresses since there are so many to manage, so it will follow a pattern. Find your code on the 2024 Portfolio Page, copy it, then paste it after clicking on the blue Publish button. Your code will become a link on that page and it MUST open your home page.

Step 7 - Required Text

Insert text boxes (font size 18+, easy-to-read font) and describe the process of finding the images and creating the Titles. What software did you use? How did you make those crazy backgrounds? Why does your text look 3D? How did you find such high-resolution image? What was difficult? What was the most fun?"

Page updated

Report abuse