Web Style Curation

Variation Guide

There are 8 types of curations–indicated by number–for Web Styles based on item card attributes, (color/attr1, size run & alt size/attr2). An additional curation is needed–indicated by letter–for other elements that affect the functionality of a product page. The curation of the Web Style will be indicated at the end of the name. Web Style formula starts with the brand code, followed by the item number or alt style abbreviation, and ends with the curation code. 

Format

Code_Style_Curation

Code_Unique_Curation

 

Examples

Group: TNF_123_2Y

Unique: TNF_123_Red_2N

Number Curation

  1. Unique (Cannot Group)
  2. A (Color / Attr1)
  3. B (Size Run)
  4. C (Attr2)
  5. AB (Color & Size Run)
  6. AC (Color & Attr2)
  7. BC (Size Run & Attr2)
  8. ABC (All 3)

Letter Curation

Y = color image added

N = color image missing

D = past seasons / discontinued

Web Style Curation Practice

Apparel (1) Color and Size Run Attributes; (2) Has Color Image; (3) Past Seasons

  • TNF_123_5YD

Apparel (1) Color and Size Run Attributes; (2) No Color Image; (3) Past Seasons

  • TNF_123_Red_5ND

Sell on Web

Styles that are unique (curation 1) will be marked “sell on web.”

Web Style groups will have one parent style that will be marked “sell on web.”

All child styles will share a Web Style with the parent style but they will not be marked “sell on web.  

Batch Resize Product Photos for Web

In the last year, I learned how to automate images in Photoshop with the “Actions” panel. This has been a learning experience for me. At first I was really frustrated that the batch automate was hit or miss, this was mainly due to the images being various shapes and sizes. I didn’t quite understand that landscape and portrait orientation photos would require different actions. What I have learned to streamline the process is to not only use actions, but to also use photoshop scripts, namely the image processor. Which was a lot easier than I thought it would be.  

The tutorial “How to Batch Resize in Photoshop” found on Digital-Photography-School.com, taught me how to easily apply photoshop scripts. When combining the actions and the scripts I was able to achieve my goal, and resize all product images to the google shopping approved size. My output is required to be 800×800 pixels, if necessary add padding and save them for web. The script and the actions work together to resize the photos, add padding and make them square with the desired pixel ratio. 

First save all photos to a single folder. This is what your folder structure will look like when you are done.

folder orientation at the end

Create 3 Actions in the Photoshop Actions Panel, when your done it will look something like this:

Padding Action:

  • Open a test photo and create a new action, and name it “115 padding”
  • Now you are recording that action. Go to “Image > Canvas Size” (Shortcut: Cmmd + Alt + C). 
  • Change the type of adjustment to “percent” and change both fields to “115” then click “OK”
  • Stop the recording by clicking the Square in the bottom of the actions panel

Square Landscape Orientation Action:

  • Open a test photo and make the longest side 800px wide 
  • Create a new action, and name it “sq-canvas-land”
  • Go to “Image > Canvas Size” (Shortcut: Cmmd + Alt + C). 
  • Change the type of adjustment to “pixels” and change the heigh to 800px tall
    • This will create a square canvas 800x800px 
  • Stop recording

Square Portrait Orientation Action:

  • Open a test photo and make the longest side 800px wide 
  • Create a new action, and name it “sq-canvas-port”
  • Go to “Image > Canvas Size” (Shortcut: Cmmd + Alt + C). 
  • Change the type of adjustment to “pixels” and change the width to 800px tall
    • This will create a square canvas 800x800px 
  • Stop recording
 

Open images and create 115% padding

  • Make sure your background color is set to white, or the color of boarder you want to add
  • Go to “File > Automate > Batch” and choose the action “115 padding” 
  • Select “Folder” for source and click “choose” navigate to the folder you prepared and click “OK”

Run Script for all open images to save and resize at 800px as a PSD file, in the same location in a new folder called “PSD”

This is only a good method for images bigger than 800x800px (another action could be made for images that are smaller than 800x800px).

  • Go to “File > Scripts > Image Processor and Select the following options:
    1. “Use Open Images”
    2. “Save in Same Location”
    3. “Save as PSD” | “Maximize Compatibility” | Resize to fit W:”800″ & H:”800″
    4. “Include ICC Profile”

Run Script for all landscape orientation images to save as a square image 800x800px

  • Go to “File > Scripts > Image Processor and Select the following options:
    1. Click “Select Folder” choose the folder with all the landscape photos in the newly created “PSD” folder
    2. “Save in Same Location”
    3. “Save as JPEG” | “Quality: 10” | “Convert Profile to sRGB”
    4. “Run Action” choose “sq-canvas-land” | “Include ICC Profile”
  • When you Run the script a new folder will be created inside the fodler with all your images. It will be called “PSD” organize your photos into 3 different folders.
    1. Square photos “DONE” folder
    2. Landscape photos “LAND” folder
    3. Portrait photos “PORT” folder

Run Script for all portrait orientation images to save as a square image 800x800px

  • Go to “File > Scripts > Image Processor and Select the following options:
    1. Click “Select Folder” choose the folder with all the portrait photos in the newly created “PSD” folder
    2. “Save in Same Location”
    3. “Save as JPEG” | “Quality: 10” | “Convert Profile to sRGB”
    4. “Run Action” choose “sq-canvas-port” | “Include ICC Profile”

My inspiration for this tutorial is from: 

 

How to Batch Resize in Photoshop

At the end I usually compile all the final photos to one folder called “Crunched” or “DONE”