In this tutorial, you will learn how to create a simple and minimal Instagram-based portfolio. We will use striking effects, a clean color palette and soft fonts. First, the lesson describes the creation of a web version, and then you can quickly adapt your portfolio for mobile devices.
Materials for the lesson
In order to follow the points of the lesson you will need the following materials (they are all free):
- Photo of mountains with Unsplash
- Kaushan Script Font with Squirrel Font
- Font Lato Font Squirrel
- Social Network Icons with Iconfinder
- Photos from Unsplash
- Photos from Refe
Preparing a document
Start by creating a new Photoshop document through the menu. File> New … (File> New …) using the settings below. You can specify any size, because there is no fixed width on the Internet.
Make sure the permission is set to 72 peak / inch.
Now let’s add some guides so that our document has enough space and looks balanced. I do not always use the grid, but a few guides will provide accuracy and help determine the width of our site. Go to menu Browse> New Guide … (View> New Guide …) and create multiple lines. I usually use 1000px for the width of the site plus a few guides in the corners, so that the site has spare space.
Note: Guides for this lesson are vertical. 100px, 600px and 1100px.
Tip: You can also use Photoshop plugin Guideguide, to further speed up the process.
According to Photoshop Etiquette, everything should be organized and easily accessible for viewing and editing. Let’s create three groups of layers with the names Headline, Photo and Contacts. To create a group go to Layer> New> Group … (Layer> New> Group …) and give each group the names listed above. To quickly jump to a specific group, simply click on the icon.
Working on the title
The header area plays a very important role in attracting the user to the rest of the content and allows you to make sure that he does not leave the page without performing the required action. For this portfolio we will use a delightful photo of the mountains and a simple message to depict the adventure and the challenge.
To begin, let’s create the site background. In the Header folder, draw a rectangle of any color. In my case, I drew a rectangle of size 1200x600px and put it on top of the document.
Now download a photo of the mountains, place it in Photoshop document and place it above the layer with the rectangle. Rename the layer to something understandable, such as IMG. After that, hold down the button Alt, move the pointer to the bottom of the IMG layer until the pointer with the down arrow appears, then click the left mouse button. You just created clipping mask. Now click Ctrl + T and resize the photo to your needs.
Tip: hold the button Shift, then the transformation will be proportional.
Let’s add some corrections to make the photo more vivid and memorable. Create a new layer, name it. Shadow, create clipping mask (Clipping Mask) as well as last step with a photo of the mountains. After that select the tool Gradient (Gradient Tool), set the gradient color from black # 000000 to transparent. Holding down the button Shift drag the gradient from the bottom of the image to its middle. Now reduce Opacity (Opacity) gradient to 60%.
I usually use this technique to darken bright images, and then put up some white text.
Now we can add a little more color to our heading to make it really cool. Create a new layer, name it. Gradient, then select tool Gradient (Gradient Tool). After that, set the color to purple. # 37056b to pink # ff01fc (you can use any colors you like) and drag the gradient from the top left of the image to the bottom right. As a result, reduce opacity (Opacity) to 20%.
It’s time to place the logo of our portfolio. Choose a tool Horizontal text (Horizontal Type Tool) and write the name of your site, it can be your name or nickname. For this tutorial I used a very stylish font. Kaushan Script by size 21px. Place your logo in the upper left of the document next to the first vertical guide. Lower it on 50px, to give even greater professionalism and purity.
Add a few social icons that allow site visitors to read your accounts on social networks. Drag and drop Facebook, Twitter and Instagram icons with Iconfinder into your document, rename the layers to make them easily recognizable, then place them in the upper right corner next to the last vertical line. After that, right-click on one of the layers with icons, select Overlay options (Blending Options …), then apply Color overlay (Color Overlay), choose white #ffffff. Do the same with other icons.
Make sure there is enough space between the icons, and they themselves are aligned horizontally with the logo.
Now finish the header area. We have a beautiful picture and a lot of space. Let’s put a simple welcome message here so that users can understand what the site is about.
Choosing a tool Horizontal text (Horizontal Type Tool) with font Lato (Black) by size 36px, write a few words. In this case, I used the text “HELLO! I’M JONATHAN”. Immediately after it, on the new line write something else about yourself or your work in a smaller font. I used the font for this tutorial. Lato (Regular) size in 16px. Sample text: I love you to travel around.
Make sure the line height is large enough for the text to “breathe.” In the end, place your text in the middle of the header area.
We are working on a zone of photos
In this zone we will post photos from Instagram to show examples of works, demonstrating the level of professionalism of the artist or designer.
Let’s change the background of this zone. Minimize folder Headline, by clicking on the small arrow to the left of the group name, then open the folder Photo. Now choosing a tool Rectangle ( Rectangle Tool), draw a light gray rectangle. In my case, I used color #eeeeee, and the size of the rectangle was 1200x880px.
Now it’s time to add text describing the work. It could be something like “Recent work”, or “LATEST PHOTOS” as in our example. The text should be readable, so I used color # 9b9b9b with font Lato (Bold) by size 12px. Please note that the distance between the letters is quite significant (270). This is used to style the title of our zone, and will not work for plain text. Once you have set the desired distance, move the text to 80px down from the picture.
Fine! At this stage we will add some photos to our portfolio. Create a new group, name it A photo. After that, you need to decide how many photos there will be in each row. I decided to choose four, so I need to do some calculations before marking.
The width of our site 1000px, share her on four – it turns out 250px for each photo, but we also need to leave some space on the sides, let it be 20px. Therefore, the final image width will be (1000px-60px) / 4 =235px.
Choose a tool Rectangle (Rectangle Tool), then hold down the Shift button, draw a square with the size 235x235px. After that, select a photo from your Instagram feed or take a few from unsplash.com and getrefe.tumblr.com, drag them into your Photoshop document and place them above the rectangle. Then hold down the button Alt, create Clipping mask (Clipping Mask) and using Ctrl + T, Resize the picture and place it as you like.
Now you can add the number of likes (this will make the portfolio more socialized) and a short description. Create a new layer, name it. Shadow, place over the image, then create clipping mask (Clipping Mask). After that, using the tool Gradient (Gradient Tool) make a gradient from black to transparent as already done in the lesson. After all this, reduce Opacity (Opacity) to 60%.
Choose a tool Horizontal text (Horizontal Type Tool) with font Montserrat by size 15px. Leave by 15px free space on the left and below so that the text can “breathe” without overlapping the image.
Then select the tool Rectangle (Rectangle Tool) and draw a white rectangular shape under the photo. Then select the tool again. Horizontal text (Horizontal Type Tool) and write a short description of the photo, used in Instagram, including hashtags, as well as the date on a new line. The font for this block is Montserrat12px gray # 808080 colors.
Note: make sure to match the indents if you used 15px on the sides for likes, make the same indent for the description.
We’ve finished with one block of photos, now it’s time to add more photos to the portfolio. Minimize folder A photo and duplicate it by pressing Ctrl + J, or by right-clicking on the folder and selecting “Duplicate group“(Duplicate Group). After that, duplicate the required number of photos and organize them into a grid. In my case, the distance between the different blocks of photos 20px. Photos were taken from unsplash.com and getrefe.tumblr.com.
We work on the contact area
Here we put a simple message and a link button along with copyright information.
Minimize folder A photo, by clicking on the small arrow next to the group, then open the folder Contacts. After that select the tool Horizontal text (Horizontal Type Tool) and, using a large font, enter the name of the section, for example “GET IN TOUCH”. Give it enough space at the top, then add a short description calling the visitor to action. I used color # 565d64 with font Lato(Black) size in 36px for the title, and the font Lato (Regular)16px I took to describe.
Now you need to create a button, click on which will perform a specific action. For this tutorial we will use a simple contact button. I took the tool Rectangle (Rectangle Tool), drew a simple shape, and placed text on top of it. Make sure that there is enough space above the button, this will allow it to look neat and balanced.
In summary, let’s create a common copyright line at the bottom of the portfolio. Before you do this, select the tool Line (Line Tool) and draw a gray # e0e0e0 horizontal line thick 1px through the whole document leaving about 90px places below. Right after the line post copyright information. In this case, I used the font. Lato (Bold) 12px colors # 9b9b9b with a space between letters 270.
That’s it, you have finished working on the web version of your portfolio! Now you will learn how to quickly turn the web version into a mobile version, which will create a responsive website design.
We work with the mobile version
Let’s create a new document by setting the permission to 320x2100px. Create three vertical guides on 20px, 150px, 300px, to navigate, leaving a little space at the edges. After that, select all groups of the web version of the portfolio and drag them to the tab of the new document.
Now open the folder Headline, find the logo, then using the tool Move (Move Tool), drag it to the right to the left most edge. Leave the logo next to the first vertical guide. Then, find the social icons and move them to the right.
Now it’s time to adapt the main part. Choosing a tool Horizontal text (Horizontal Type Tool) break the description and reduce the font size of the main message, fitting it between the first and third guides. Change the line height settings and we can continue.
Open group A photo, move the title “LATEST PHOTOS” up, because we do not need so much space in the mobile view. Go back to the group A photo, place it between two vertical guides. Then open the group, click on the rectangular shape-background description, click Ctrl + D and reduce its size to 280px. Do the same with the figures of the photos. After the work done, organize the photos in one column, not forgetting to align them between the guides.
Our section with photos has become much longer than in the desktop version, so you need to adjust the backgrounds. Select a layer with a photo block background, click Ctrl + T, make it longer to resize, leaving a little space below.
Now we need to reorganize the block of contacts so that the text is neatly aligned between the guides. Open group Contacts, then using the tool Horizontal text (Horizontal Type Tool) break the text in this block, fitting it under the guides. Be sure to reduce the size above and below the elements, as we do not need a lot of empty space in the mobile version. Also reduce the height of the text line to make it look clean and professional.
The final touch is to break the copyright text so that it fits between the guides.
Great job! You have created a web and mobile version of our fresh Instagram-based portfolio. I hope you have learned something new, and the skills you have gained will help you create amazing designs in the future.