Web Development

How To prepare featured images for the APPC website
Zachary Reese, Uncategorized
  1. Find an environmental photograph. Start with public domain, use stock sites as a last resort. Environmental is important for the tone we’re trying to communicate on the APPC site. No illustrations, studio shots, white backgrounds, etc. 
  2. Pop it into the PSD. 1440×548 @ RGB 8bpc.
  3. Match the black point output to ~25 and the white point output to ~235.
  4. Lower the midtones to ~1.20. I like to use a levels adjustment layer because it’s non-destructive.
  5. Make a two-color gradient overlay to direct the eye on the page. I normally do cold-to-warm at 36 degrees for sliders, 105 degrees for smaller images. Set it to lighten at 31%.
  6. Save for web to JPG at 70%.
  7. Upload to the WordPress media library and send to Michael.

From there there’s alt tags and stuff to be added but Michael probably knows more about those procedures than I do at this point.  In the future we’re going to be adding the source files for website images to a Git repo for archiving purposes, but in the meantime just keep the PSDs on a networked drive we can all access alongside the JPGs. 

Above all, use your eye. If something doesn’t look right with the normal histogram settings don’t be afraid to adjust the contrast or saturation to make it feel more in line with the other website images.

How To Post a CRN newsletter to the CRN site as a Featured Content page
Zachary Reese, Uncategorized

* Add newsletter images to Drupal.
* Copy and paste the content from Mailchimp to a new Featured Content item. Wrap text blocks in p tags for proper line breaks.
* Insert images using img tags. Be sure to include alt and title properties.
* Our Drupal site doesn’t currently support Bootstrap, so you need to apply any styles inline. Use this code for the CTA button.

<table border="0" cellpadding="0" cellspacing="0" class="mcnButtonContentContainer" style="border-collapse: separate !important;border-radius: 5px;background-color: #5CB85C;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<td align="center" valign="middle" class="mcnButtonContent" style="font-family: Arial;font-size: 16px;padding: 16px;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<a class="mcnButton " title="BUTTON TITLE" href="BUTTON LINK" target="_blank" style="font-weight: bold;letter-spacing: normal;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;word-wrap: break-word;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">BUTTON TEXT</a>