Made With Adobe Firefly by John Baumer

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

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:

​230925 Digital Portfolio Project Folder 

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 will lose your Titles work!

230925 Portfolio Headers - Firstname Lastname

THEN you can open this  new PSD to do the cropping and editing demonstrated in class and recorded in the tutorial below.

Step 2

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.

 (You can also use a fatter 3:1 or thinner 5:1 ratio, depending on your preferred text style).



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

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:

Step 4

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 (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 2022 Portfolios to get some ideas if you need them.

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

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 carefully selected images from the internet. We'll be taking them with us to our next project folder (to use in Adobe Premiere Pro) so this is a good time to collect them together and put them on our portfolio.

Collecting Image Assets

Most of us should have the images we are going to be using. Select the best images and copy them to a new sub-folder called "My Favorite Assets".  Assets are images, video, music, etc. that can be used in a project. Also copy the 4 Titles - the assets we made ourselves!

Tools to Add Images

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

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?"