Code By
Lucas Mouilleron

63 projects - An Open Source selection

+ photoshopTools

Last update : 19/10/2014 - 14:36

Motivations

List of more or less usefull tests for Photoshop.

Web and app oriented.

Grids and guides

  • Guideguide : Guides generator, loads of configuration (breakpoints, columns, padding, gutters), exports as png and scss, Photoshop 5+
  • Spectrr : Annotation tool (text, spacing, sizes), Photoshop 6+
  • Gridpak : Guides (as image) generator, easy configuration (breakpoints, columns and padding), exports as png and scss, Photoshop 5+

Cuting

  • Cut and Slice Me : Exports groups and layers automaticaly (trimed transparent pngs), clever method : add "@" at the end of the name of group you want exported, Photoshop 6+

Prototyping

  • Invision : Very easy, cloud, Photoshop auto slicing and sycing, comments
  • FramerJS : Convenient framework (animation helpers, states machine, coffee or js), Photoshop auto cutting
  • Reflow : Adobe tool, connects to Photoshop, simple prototyping features (multiple page), responsive aware, review in browser, Photoshop CC+

Layouts

  • Web Zap : Layout builder, text layout builder (multiple font swap), UI builder, Photoshop 6+
  • Velositey : Layout builder, guides nice features, favicon generator

Exports

Miscs

+ emailBuilder

CSS 67.8% - JavaScript 32.2%
Last update : 19/10/2014 - 14:33

A grunt based email builder for designing, testing and publishing.

  • Multiple campaigns and email
  • Templates : Ink from Zurb, Mailchimp blueprints
  • Saas, handlebars, inlining
  • Mandrill, AWS S3

Installation

Run

  • cd _build
  • npm install
  • cp campaigns/config.json.sample campaigns/config.json
  • Type grunt and follow instructions

Tasks

  • grunt _build : Builds a campaign to campaign-dist/campaign_name
  • grunt watchit : Watches and builds a campaign
  • grunt prod : Prepare campaign for prod (CDNfys assets) (the campaign-dist/campaign_name html files are production ready)
  • grunt test : Sends a test email of a campaign (requires CDN)
  • grunt send : Sends an email of a campaign (requires CDN)

Campaigns

  • Archives and templates are located campaign-archives
  • Campaigns are located in campaigns
  • One campaign can contain more than one email
  • Configuration :
    • Global config is defined in campaigns/config.json
    • Per campaign config can be overrided : add a config.json file in the campaign folder

Emails

  • Emails are written with handlebars format
  • Assets basepath is ./ : <img src="logo.png" height="50" alt="Mailgun"> or <link href="main.css" media="all" rel="stylesheet" type="text/css"/>
  • Templates :
    • Ink framework from Zurb : classes and guidelines doc : in campaigns-archive/_zurb
    • Mailchimp responsive blueprints : sources : in campaigns-archive/_mailchimp
    • Mailgun transactional emails : sources : in campaigns-archive/_mailgun

Sending

  • Email sending is taking care by mandrill, which is great
  • Create a manrill account and an API key
  • Configuration : subject, sender, receivers and mandrillKey in config.json (global or local)

CDN

  • Uses AWS S3 as a CDN
  • Configuration : set awsKey, awsSecretAccessKey and awsBucket in config.json (global or local)
  • Create the bucket on S3 (the name you defined in awsBucket)

Litmus

  • Create a test project in Litmus
  • Change the receivers in config.json to the adress given by Litmus

Email design best practices (reminder, as the templates we provide are compliant)

  • Simple and clear subject (not in full caps, no !!!!!)
  • Main information withing the first 300px
  • Linear structure
  • Use a template boilerplate to avoid basic structure mistakes
  • No white text
  • Standard fonts (arial, times new roman)
  • No shapes or images in text background (only plain color)
  • No videos, no javascript
  • Center contents with <center>
  • Use alt attribute for images fallback (no special characters)
  • Inline CSS

Credits

+ testFramerJS

JavaScript 99.9% - CSS 0.1%
Last update : 24/09/2014 - 15:05
  • Made with FramerStudio
  • http://framerjs.com