Greenbox Slices: Difference between revisions
Jump to navigation
Jump to search
(26 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
==Before You Begin== | ==Before You Begin== | ||
Before you begin any slicing it is '''very important''' to determine the following: | Before you begin any slicing it is '''very important''' to determine the following: | ||
*Does this piece | *Does this piece exist on the ''old'' Greenbox? | ||
*If | *If so, we will need to name the slice the exact same name so programming can just replace the images. To do so: | ||
# | #Visit the old Greenbox site and pull the applicable slices to your desktop | ||
#Save each slice of the rebranded piece with the same name as the ones you pulled off the old site. | |||
==Getting Started== | ==Getting Started== | ||
*All files | *All files for reference can be found here data/CREATIVE/QUEST DIAGNOSTICS/TEMPLATES/DIGITAL/Greenbox/Slices | ||
*All slices for Greenbox need to be made in a similar fashion to ensure consistency throughout the site. | *All slices for Greenbox need to be made in a similar fashion to ensure consistency throughout the site. | ||
*Although a lot of the files are not named how you will see described below we are going to start naming things in a more consistent fashion going forward so please refer to this section if you have any questions on how to name a file. | *Although a lot of the files are not named how you will see described below we are going to start naming things in a more consistent fashion going forward so please refer to this section if you have any questions on how to name a file. | ||
*Each time a new piece of creative is sliced for Greenbox, | *Each time a new piece of creative is sliced for Greenbox, 4 images (single sided) 8 images (double sided) are needed to go to the programming team | ||
# Enlarged | # Enlarged | ||
# Enlarged Markup | # Enlarged Markup | ||
# Thumb | # Thumb | ||
# Thumb Markup | # Thumb Markup | ||
Line 20: | Line 18: | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |- | ||
! Enlarged | ! Enlarged | ||
! Enlarged Markup | ! Enlarged Markup | ||
! Thumb | ! Thumb | ||
! Thumb Markup | ! Thumb Markup | ||
|- | |- | ||
| '''600 px width''' x ''proportional height'' | |||
| '''600 px width''' x ''proportional height'' | |||
| ''' | |||
| ''' | |||
| '''150 px width''' x ''proportional height'' | | '''150 px width''' x ''proportional height'' | ||
| '''150 px width''' x ''proportional height'' | | '''150 px width''' x ''proportional height'' | ||
Line 50: | Line 30: | ||
==Prepping for the Creation of Greenbox Slices== | ==Prepping for the Creation of Greenbox Slices== | ||
#Open the final InDesign document | ===Start a new Folder=== | ||
#Save | #Create a folder for the new project and file it here: QUEST DIAGNOSTICS/TEMPLATES/DIGITAL/Greenbox/Slices | ||
#Now you can | #Nest two folders in this folder: Slices and Working files | ||
===Prep file=== | |||
# | #Open the final InDesign document (This will be the job # of the asset being added or edited on Greenbox) | ||
:* | #Save out a jpg at 300 dpi (''We like to keep job number as a reference for the future'') to the Working File folder | ||
:* | #:*Keep in mind, we might have co-branding placeholder boxes on our pieces, it is OK to leave these, as we will adjust for those in our markup Photoshop file. | ||
#Now you can drag that jpg into photoshop and begin adding in the pink markups.(''example: CREATIVE/QUEST DIAGNOSTICS/TEMPLATES/DIGITAL/Greenbox/Slices/Flyers/Patient Flyers/MyQuest/Working Files/MyQuest Flyer-markup.psd'') | |||
#:*We add the markups in the file at full size to ensure we have a final hires file. | |||
#:*You can open up the dummy markup file and grab items from here to begin marking up your document to show all customizable areas. | |||
#:**A white shade going over any co-brand areas already pre-existing on the jpg | |||
#:**A set of new co-branding placeholder boxes for all place in which they are applicable | |||
#:**A set of new co-branding placeholder boxes '''WITH MARKUP''' for all place in which they are applicable | |||
==Creating of Greenbox Slices== | ==Creating of Greenbox Slices== | ||
=====Enlarged===== | When creating slices, be mindful that the final slices with reside in two places: | ||
*PRODUCTION-Final folder in its respective job | |||
*data/CREATIVE/QUEST DIAGNOSTICS/TEMPLATES/DIGITAL/Greenbox/Slices/''respective folder'' | |||
=====Enlarged/Enlarged Markup ''(This will need to be done for each side of a double-sided piece)''===== | |||
#Open up the unmarked jpg | #Open up the unmarked jpg | ||
# | #Create your markups. Markup can be created by opening any old job for style reference (''For an example of proper file setup please see CREATIVE/QUEST DIAGNOSTICS/TEMPLATES/DIGITAL/Greenbox/Slices/Flyers/Patient Flyers/MyQuest/Working Files/MyQuest Flyer-markup.psd'') | ||
#At this point we save the file. '''Please note, we always save the file at 100% size ONLY to maintain the integrity fo the piece.''' | |||
#Once the file is saved, open the image size dialogue box. Change the image to be 600px wide but it's proportional height. Be sure to use the setting “Resample: Bicubic Sharper (reduction)”. | |||
#Click “Ok” | #Click “Ok” | ||
#Now add a stroke. Place a 1pt stroke, hex# 63666A | |||
#Turn off the markup layer. | |||
#Save this file for web. | #Save this file for web. | ||
#Call file [description A]_[description B]_enlarged.jpg | #Call file [description A]_[description B]_enlarged.jpg | ||
#Now turn '''on''' the markup layer and output again. | |||
#Call file [description A]_[description B]_enlarged_markup.jpg | |||
#'''''Be mindful to not save''''' | |||
===== | =====Thumb ''(This will need to be done for each side of a double-sided piece)''===== | ||
# | #Revert back to the full size image | ||
# | #Once the file is saved, open the image size dialogue box. Change the image to be 150px wide but it's proportional height. Be sure to use the setting “Resample: Bicubic Sharper (reduction)”. | ||
#Click “Ok” | #Click “Ok” | ||
#Now add a stroke. Place a 1pt stroke, hex# 63666A | |||
#Turn off the markup layer. | |||
#Save this file for web. | #Save this file for web. | ||
#Call file [description A]_[description B]_thumb.jpg | #Call file [description A]_[description B]_thumb.jpg | ||
# | #Now turn '''on''' the markup layer and output again. | ||
#Call file [description A]_[description B]_thumb_markup.jpg | |||
#'''''Be mindful to not save''''' | |||
== | ==Creating of PDF for Greenbox== | ||
In some cases, a PDF will need to be made for previews. The AE will instruct you as to when this is needed. | |||
#The PDF will have markups on it if applicable | |||
#Name the PDF with a short name that gets the point across (''Example: CREATIVE/QUEST DIAGNOSTICS/TEMPLATES/DIGITAL/Greenbox/Slices/Flyers/Patient Flyers/MyQuest/Flyer-MyQuest.pdf'') | |||
#Try to keep file size to a minimum without sacrificing too much quality. Find a happy medium | |||
# | |||
# | |||
# | |||
Latest revision as of 13:59, 27 September 2019
Before You Begin[edit]
Before you begin any slicing it is very important to determine the following:
- Does this piece exist on the old Greenbox?
- If so, we will need to name the slice the exact same name so programming can just replace the images. To do so:
- Visit the old Greenbox site and pull the applicable slices to your desktop
- Save each slice of the rebranded piece with the same name as the ones you pulled off the old site.
Getting Started[edit]
- All files for reference can be found here data/CREATIVE/QUEST DIAGNOSTICS/TEMPLATES/DIGITAL/Greenbox/Slices
- All slices for Greenbox need to be made in a similar fashion to ensure consistency throughout the site.
- Although a lot of the files are not named how you will see described below we are going to start naming things in a more consistent fashion going forward so please refer to this section if you have any questions on how to name a file.
- Each time a new piece of creative is sliced for Greenbox, 4 images (single sided) 8 images (double sided) are needed to go to the programming team
- Enlarged
- Enlarged Markup
- Thumb
- Thumb Markup
Please refer to table below for sizing/file naming for each of these five items.[edit]
Enlarged | Enlarged Markup | Thumb | Thumb Markup |
---|---|---|---|
600 px width x proportional height | 600 px width x proportional height | 150 px width x proportional height | 150 px width x proportional height |
Prepping for the Creation of Greenbox Slices[edit]
Start a new Folder[edit]
- Create a folder for the new project and file it here: QUEST DIAGNOSTICS/TEMPLATES/DIGITAL/Greenbox/Slices
- Nest two folders in this folder: Slices and Working files
Prep file[edit]
- Open the final InDesign document (This will be the job # of the asset being added or edited on Greenbox)
- Save out a jpg at 300 dpi (We like to keep job number as a reference for the future) to the Working File folder
- Keep in mind, we might have co-branding placeholder boxes on our pieces, it is OK to leave these, as we will adjust for those in our markup Photoshop file.
- Now you can drag that jpg into photoshop and begin adding in the pink markups.(example: CREATIVE/QUEST DIAGNOSTICS/TEMPLATES/DIGITAL/Greenbox/Slices/Flyers/Patient Flyers/MyQuest/Working Files/MyQuest Flyer-markup.psd)
- We add the markups in the file at full size to ensure we have a final hires file.
- You can open up the dummy markup file and grab items from here to begin marking up your document to show all customizable areas.
- A white shade going over any co-brand areas already pre-existing on the jpg
- A set of new co-branding placeholder boxes for all place in which they are applicable
- A set of new co-branding placeholder boxes WITH MARKUP for all place in which they are applicable
Creating of Greenbox Slices[edit]
When creating slices, be mindful that the final slices with reside in two places:
- PRODUCTION-Final folder in its respective job
- data/CREATIVE/QUEST DIAGNOSTICS/TEMPLATES/DIGITAL/Greenbox/Slices/respective folder
Enlarged/Enlarged Markup (This will need to be done for each side of a double-sided piece)[edit]
- Open up the unmarked jpg
- Create your markups. Markup can be created by opening any old job for style reference (For an example of proper file setup please see CREATIVE/QUEST DIAGNOSTICS/TEMPLATES/DIGITAL/Greenbox/Slices/Flyers/Patient Flyers/MyQuest/Working Files/MyQuest Flyer-markup.psd)
- At this point we save the file. Please note, we always save the file at 100% size ONLY to maintain the integrity fo the piece.
- Once the file is saved, open the image size dialogue box. Change the image to be 600px wide but it's proportional height. Be sure to use the setting “Resample: Bicubic Sharper (reduction)”.
- Click “Ok”
- Now add a stroke. Place a 1pt stroke, hex# 63666A
- Turn off the markup layer.
- Save this file for web.
- Call file [description A]_[description B]_enlarged.jpg
- Now turn on the markup layer and output again.
- Call file [description A]_[description B]_enlarged_markup.jpg
- Be mindful to not save
Thumb (This will need to be done for each side of a double-sided piece)[edit]
- Revert back to the full size image
- Once the file is saved, open the image size dialogue box. Change the image to be 150px wide but it's proportional height. Be sure to use the setting “Resample: Bicubic Sharper (reduction)”.
- Click “Ok”
- Now add a stroke. Place a 1pt stroke, hex# 63666A
- Turn off the markup layer.
- Save this file for web.
- Call file [description A]_[description B]_thumb.jpg
- Now turn on the markup layer and output again.
- Call file [description A]_[description B]_thumb_markup.jpg
- Be mindful to not save
Creating of PDF for Greenbox[edit]
In some cases, a PDF will need to be made for previews. The AE will instruct you as to when this is needed.
- The PDF will have markups on it if applicable
- Name the PDF with a short name that gets the point across (Example: CREATIVE/QUEST DIAGNOSTICS/TEMPLATES/DIGITAL/Greenbox/Slices/Flyers/Patient Flyers/MyQuest/Flyer-MyQuest.pdf)
- Try to keep file size to a minimum without sacrificing too much quality. Find a happy medium