How would I go about getting screen shots of my websites for my portfolio

Project Feedback
#1

This maybe really simple but am getting slightly confused on what to do. I am currently putting together my portfolio. However when looking at other examples on the net, I see that people have got these cool thumbnail style images of their sites on their portfolio pages.

If I want to achieve this would I simply take a screen shot of my websites that I have made and then use css to make it fit the <li> item within an <img> tag in the <ul>?

#2

You can use the “Print Screen” key (PrtScr) on your keyboard and paste the image into an image editor, then crop if needed and save the image.

If you are using Windows, you can also use the “Snipping Tool”. Select the area you want to capture and save. On various Linux distros, pressing the “Print Screen” key will open up a screen capture utility.

Another option is to use a browser extension, such as FireShot for Google Chrome for example.

#3

Here is what I did for the images for my sites:
Ex: https://isaacabrahamson.github.io/#portfolio

  1. Open page in fullscreen (usually F11, make sure you are in debug mode if using codepen).
  2. CTRL + ALT + PrtScr or however you have print screen setup
  3. Open up Paint / Paint.net and paste image then save.

If you want the browser appearance like the portfolio I did, you will need Photoshop or Paint.net - some program that has layers.
Here’s the browser mockup, you can play with it if you want:
http://freedesigndata.blogspot.com/2016/05/download-safari-web-browser-photoshop.html

If you want thumbnails like I did with the Cutler pictures in my tribute page:
Ex: http://codepen.io/isaacabrahamson/full/GZwBpW/
You will need Bootstrap, then you can apply a row/column system, and make sure images have class .img-responsive.

1 Like