Introduction: Electronic Portfolio

Picture of Electronic Portfolio

What did you make?
I made an electronic portfolio for a Future Business Leaders of America (FBLA) project. This displays my portfolio, resume, and information about my career all in one place on the internet. I used my creativity along with my skills in using Adobe Photoshop and Adobe Flash Catalyst to create my project. After months of hard work, I received first in the state on my project.

How did you make it?
I got the idea for this project from FBLA. It was one of the projects you can compete in and it is also something I will need later on in life if I plan on becoming a graphic designer. I worked on this alone using Photoshop to design the layout and different pages, then Flash Catalyst to turn the design into a working web page. My project changed a little bit, such as adding the back button and adding some transitions to help the portfolio flow more smoothly, but for the most part, it stayed the same.

Where did you make it?
I worked on this at school because I didn’t have the programs. I also used it as a class project, so I got more time to work on it. This relates to other activities in my life such as my job, where I have to design projects in Photoshop, and also my future, allowing me to become more familiar with the programs I used and also providing me with a portfolio which I will need later on in life. Also, it tied in with FBLA and I was able to use it for competition.

What did you learn?
The biggest challenge I had with this project is making it compatible with all different internet browsers and all computer screens. I spent a lot of time trying to make sure that everyone can view my portfolio. Also, this was my first time using Flash Catalyst so I learned a lot from trial and error in trying to make this portfolio into a functional web page. I am proudest of the fact that not many people my age have created something like my electronic portfolio and that others can now see the skills I have with graphic design. This was a tough project and I am proud that I could excel with it. If I had to do it again though, I would design my electronic portfolio in a different program that would help with the compatibility with the different screen sizes, which is something I still struggle with.

Step 1: Electronic Portfolio

Picture of Electronic Portfolio

First of all, I designed the home page in Adobe Photoshop. I created the circle design which would be used throughout the whole portfolio, then added my name on the left side and a copyright on the bottom. I made different layers for each of the circles so they could become buttons later on.

Step 2: Electronic Portfolio

Picture of Electronic Portfolio

Next I created the portfolio part. I used pictures from past projects I had created and put them into separate pages. I created these pages in different layer groups so I could make them into different pages when I created the actual web page. I also added a back button on a separate layer and little buttons to allow viewers to scroll between the different images.

Step 3:

Picture of

Next, I researched information about graphic design, since that is the business I hope to go into once I graduate. I typed up all the information using the writing format my English teachers taught me, making sure to include references so I don't plagiarize. I also had to include other information about my education and the extra things I had learned that related to my chosen profession. Once again, I made these in different layer groups so they could become separate pages.

Step 4:

Picture of

Next, I had to identify the different skills a graphic designer is supposed to have and list them. I included a button at the bottom so I could include examples of these skills.

Step 5:

Picture of

After I had made examples for the different skills a designer is supposed to have, I put them on a separate page. The idea was for the viewers to click on the "My Examples" button, then this is the page that would appear.

Step 6:

Picture of

I also had to create a video that demonstrated some of my graphic design skills. After doing so, I made a page in my electronic portfolio for this. I made a button that would later link to YouTube so the viewers could click on this and then go to my video.

Step 7:

Picture of

In the final part of my Photoshop design, I created a mouse over page. I used the circle buttons that I had used on the home page, and put it over a darker grey background. This was created so the viewers could mouse over the small circle design on the other pages, and it would go to this page. From this page, they could visit any of the other pages in my electronic portfolio.

Step 8:

Picture of

After creating the design in Adobe Photoshop, I then imported the file into Adobe Flash Catalyst. From here, I could make the different pages, link the buttons, and create transitions between the different pages to help them flow smoothly. 

The first step I did in Flash Catalyst was to create the different pages, which you can see at the top. I used the different layer groups I had created in Photoshop to make the different pages of my electronic portfolio. This would also help be create the buttons because it made a destination that the button could go to.

Step 9:

Picture of

Next, I linked the buttons to go to different pages. I had to convert the circles from art work into a button, then tell the button where to go when it was clicked on or moused over. 

Step 10:

Picture of

Next, I created transitions between the pages. This was the simplest part because all I had to do was select all the state transitions at the bottom and click "Smooth Transition" and the program would do that for me.

Step 11:

Picture of

Finally, I uploaded my file to the internet and it became a working electronic portfolio.

Comments