Adding a Project to the Portfolio

 

Setting up Firefox

  • Open up Firefox
  • Click the 3 bars located in the top right of the window
  • Click "Options"
  • Scroll until you see "Files and Applications"
  • Under "Downloads", check the radio button "Always ask you where to save files"

 

Getting the project images

  • Open up Firefox
  • Go to the project website
  • Anywhere on the website content, right click and then click "Inspect Element (Q)" or press Q
  • At the top right corner of the Inspect Element window, click the "Responsive Design Mode" icon, or press CTRL + SHIFT + M
  • Repeat the steps below 3 times, for a page width of 1280, 768, and 320 pixels.
    • In the bar at the top of the page, select the left text box (page width) and enter a page width (1280, 768 or 320 pixels)
    • Right click anywhere on the website content and click "Take a Screenshot"
    • Press "Save Full Page" in the top right corner
    • Press the blue "Download" button
    • Under the file name text box, enter - [domain-name]-[image-width]
    • Save the image under - C:\Users\<user>\Inology Australia Pty Ltd\John Mitchell - Inology Shared Files\inology\website\potfolio\responsive-designs\1200px

 

Preparing the individual images

  • Open the folder that contains the images
  • Right click the image and select "Edit"
  • Once Paint has opened, select File and click Properties
  • If the "Height" text box has a number greater than 1836 pixels, set the height to 1836 pixels
  • Repeat these steps for each image width (1280, 768, and 320 pixels)

 

Creating the Responsive Image

  • Go to - C:\Users\<user>\Inology Australia Pty Ltd\John Mitchell - Inology Shared Files\inology\website\potfolio\responsive-designs\1200px
  • Open the file - _rd-portfolio-template-1200.psd
  • Repeat the following steps 3 times for each image
    • Inside of Photoshop CS4, click "File" and then "Place..."
    • Go to the folder mentioned in the first step and locate the image (either the 1280, 768, or 320 pixel image)
    • Click the top left white square located inside of the top bar of Photoshop
    • Refer to the dimensions below to position and size the image appropriately
      • For the image with a width of 1280 pixels, the X position should be 60 pixels.
      • For the image with a width of 768 pixels, the X position should be 1400 pixels.
      • For the image with a width of 320 pixels, the X position should be 2228 pixels.
      • The Y position for all images should be 60 pixels.
      • Ensure the width and height match the original image's dimensions
    • Press "Enter"
    • NOTE: If you accidentally press "Enter" too early, simply ensure that the correct layer is selected in the "LAYERS" panel in the bottom right, and hit CTRL + T
  • Go to "File" and then press "Save for Web & Devices..." or press ALT + SHIFT + CTRL + S
  • Inside the opened window, click the dropdown that says "PNG-24" and select "JPEG" (not the Preset dropdown, but the one below it)
  • Find the group titled "Image Size" towards the bottom of the right panel and ensure the width is 1200px
  • Click "Save"
  • In the newly opened window, navigate to - Go to - C:\Users\<user>\Inology Australia Pty Ltd\John Mitchell - Inology Shared Files\inology\website\potfolio\responsive-designs\finish
  • Under the file name text box, enter - [domain-name]-rd
  • Click "Save" once again

 

Adding the project to the Gallery

  • Go to https://inology.au/default and log in
  • At the top of the page, hover over "Content Management" and select "Galleries"
  • Click "Add New"
  • Enter the project/business name under the "Title" field
  • Find a short description of the project/business from its website and enter it under the "Description" field
  • Under the "Categories" field, select all categories that apply to the project, these can only be any of the following options
    • Click here to see the possible categories.

      • Content Layout & Optimisation

      • Custom System Development

      • Custom Widget Development

      • Domain Registration

      • Email Hosting

      • Maintenance & Upgrades

      • Responsive Website Design Implementation

      • Scalable Email Design Implementation

      • SSL Certificate Registration

      • Training & Support

      • Website Hosting

      • System Integration - Content Management System

      • System Integration - Membership Management System

      • System Integration - Email Marketing System

      • System Integration - Product Catalogue System

      • System Integration - Service Booking System

      • System Integration - Auction Management System

      • System Integration - Order Management System

      • System Integration - Task Management System

      • Widget Integration - Social Media Sharing

      • Widget Integration - Embedded Video

      • Widget Integration - Background Video

      • Widget Integration - Accommodation Booking

      • Widget Integration - Real Estate Listing

      • Widget Integration - Text-to-Speech Tool

  • Under the "Tags" field, select all tags that apply to the project
    • If the website should be a featured project, select the "Featured" tag
  • Under "Responsive Image", click "Choose file" and locate the Responsive Image saved previously
  • Finally, in the "Published On" field, enter the date that the site went live (you can leave the time as it is)
  • Click "Submit"

 

Creating the Social Media Image  

If the website is a featured project, a social media image should also be made, if not, skip this step.