Now that you have put together the system you are at the point where you want to showcase your work. The output you have here is a part of your portfolio and as such will be important for future job applications as well as graduate school applications. And the operative word here is in fact “showcase” – it is not only the work itself but also how you present it that matters.
There is nowadays a web platform that has become the standard for portfolio reviews, and that is Behance. Behance used to be important for many years but since Adobe has acquired it, it has become even more so. The reason as to why Behance has become the industry standard is that it gives a basic systematic overview that prospective employers / professors will already be familiar with and through which they will be able to quickly access your projects without wasting time looking around on an unfamiliar website.
If you are Adobe Creative Cloud user you will already have a Behance account, so all you need to do is use that ID info to log in. If not, you can still create an account with any web address, or even with your Facebook account. Once you are logged in press the “Create a Project” button at the top and get going. However, the trick here is to not only place the elements of your project onto this project page but also to make the project page itself good looking.
Creating a well designed project page on Behance:
In the gallery above the screenshots show you the ways in which you can customize the appearance of your project page. When you click on “Edit Styles and Layout” at the bottom of the menu on the top left you will find a lot of parameters that you should play with to get the best result. You can change spacings, background color, whether to have dividers or not between the items that you will upload (my advice is, yes you should btw), and also of course the different font sizes for headers, subheaders, paragraph texts and captions.
I have put two assembled screenshots from students of previous years (Naz Kırelli left, and Aleyna Tezer right) above which show you how the project page should be organized; as well as how it can be nicely designed with a good background color that foregrounds the images, good typography and dividers.
- All text content should be bilingual between your own language and English.
- Put the title of your project at the top.
- Add a short description on what the project is all about – again, two languages.
- Put down your logo.
- Show the logo clear spaces.
- Show how the logo looks when applied to different materials. (Optional.)
- Place your branding manual. (See below for issuu instructions.)
- One big photo that shows your stationery package in full. Make sure you crop this in such a way that you do not have too much extra space around the items. In fact it can be OK to even come in just a tiny bit.
- Take crops from the original sized photo that show typographic details, and place them in a gallery. (Note: Galleries are called “Grids” on Behance.)
- Place photos of your 3D objects in another gallery. (Note: For some odd reason you cannot create captions for galleries in behance, so create a text field to describe these 3D objects if you need to.)
- If you have worked with a scene creator image that shows a lot of different things then do the same as what you did with the stationery photo. Show the full image once reduced to 2000 pixels, then create a gallery with details that you crop from the original size of the image.
- Create an image for your website from a mockup. (See instructions below.)
- Put down the web address of your wix site as a clickable link.
- Remember that you can have things go full width on Behance or you can shrink them slightly to the middle. I would advise you to mix and match here, pretty muc like you would also do on a website in order not to get a boring layout.
Preparing stuff: You can upload photos (the “Upload Files” tab at the top is how you upload photos), create text, embed html objects, and you can create galleries from photos that belong together contextually – which is something you should definitely do since otherwise your project page will become very long and people will get tired of scrolling down.
(Note: Make sure the photos you upload are not too large since that may slow down the speed of the page. 2000 pixels wide should be the max for landscape, and 1000 pixels wide should be the max for portrait formats.)
How to prepare your photos: Place one big single photo of the stationery package. The mockup you have worked on is likely to be around 4000 pixels wide. Resize that to around 2000 pixels in photoshop (Image > Image Size from the top menu in PSD) and then save it for the web (File > Export > Save for Web Legacy). Then go back to the original size of the photo by using the History of photoshop, and take crops of the details so that people can see how you used the typography. See the screenshots in the gallery above for further instructions.
How to prepare the website image: For this you will also use a mockup. Plenty of them out there, find a nice one – preferably showing the site itself and not some fancy living room with a computer in it.
However, there is a trick to making an image that is big enough for the screen shown in the mockup – and that does not show the freebie banner at the top of your free wix page. For this you need to take several screenshots and then assemble them in photoshop. Here’s how:
- Take a screenshot of your website in such a way that you leave out the wix freebie thing at the top. (Note: Mac users – you guys need to figure out how to make your website fullscreen. PC users will be using their browser snapped to screen bounds anyway, I know Mac users don’t usually do so. However, for this to work you need a screen filled with the site.)
- Scroll down a bit and take another screenshot.
- Open the screenshots in photoshop, make a layer out of screenshot 1.
- Increase canvas height from Image > Canvas height. Do this in such a way that the screenshot stays on the very top of the file.
- Paste second screenshot. Reduce its opacity to around 50%.
- Align the two shots perfectly. Then take the opacity of the second back up to 100%. Merge layers.
- Open the mockup. Its size will probably be too large. Resize it to around 2000 pixels from Image > Image Size.
- Open smart object. Copy paste your merged screenshots. You will need to resize them to cover the document. Don’t worry, in the final output there will be no quality loss.
- Now take a final screenshot of your browser and your entire screen, showing the top bar of the browser and the taskbar at the bottom. Paste this underneath your website image. Size it up to cover the document. Delete the pixels that cover the browser bar and the taskbar from your website image so that we can see the browser bar and the taskbar.
- Save and go to mockup. Crop this to a good size. Export as PNG. Done.
Website by Tolga Zağlı, Class of 2020.
How to make an issuu flipbook: Go to issuu.com and create a free account. This will allow you to create flipbooks which are a very good way of presenting multi-page documents in such a way that they simulate a physical printed object such as a book, magazine or brochure.
The way issuu works is through pdf files. However, the thing to be aware of is that these have to be single page (in other words, left hand or right hand pages of a double page spread) in order for issuu to be able to assemble them into a flipbook. So, what you will have to do is create a pdf file out of your manual file.
In the gallery above I have put step by step instructions as captions. Please open and read.
Creating a pdf file from JPEG images: You may already have a JPEG to PDF converter on your computer. If not, go here to make a PDF out of JPEGs: https://jpg2pdf.com/
Once you have the PDF, open it to make sure everything is in order then go to issuu to upload it. Once the document is uploaded there will be a few things you need to fill out before you can publish it. Take care of those and you are ready to go. The way “free” issuu is nowadays, there is very little you can do in terms of customization – all you get is a grey background, which is all that you really need. But, you can embed the flipbook into other places, including behance. To do this:
- Go to the “Publication List” button at the top, from where you go to your published manual.
- Once you are there you go to “View Live” which is directly under the flipbook.
- Once you are on the “View Live” page go to “Share”
- Get the embed code.
- Go to Behance. Click on embed button () and paste code.
- Remember you can have the book also go full width or you can shrink it.
While the behance project pages really are a must, you can (and should) consider building your personal portfolio website in addition to what you put on behance. You have several good options for this:
- Wix: Is a very powerful html5 editor that does not just work with readymade templates but lets you start from a blank page. And very reasonably priced.
- Cargo Collective: They have two platforms – Cargo 2 is paid (and pricey) but Cargo 1 is free. They have highly modifiable templates which are especially geared towards portfolios.
- Squarespace: Again pricey. But I know several people who built portfolio sites with this and love it.
- Indexhibit: I am not too familiar with how this platform works (I think you need your own server for it), but I have seen some gorgeous portfolio sites designed with it.
- If you have an Adobe Creative Cloud subscription you can build a portfolio website under behance which updates itself dynamically from your behance project page.
- And of course, you have blogging sites which can be used to build portfolio sites. WordPress has some very nice free templates that can be turned into portfolios (and you can disable ads by paying a basic small fee). And of course there is tumblr which is also excellent for showcasing work and can be customized quite a bit if you know some basic CSS coding.
- But, my personal favorite is blogger which lets you fully customize a template through an intuitive interface, i.e., no coding knowledge required at all. And nowadays they have grid based responsive themes that are really suited for portfolios. And they let you do this for free!