VELOSITEY {free}

image

Mock-up the framework of your website in seconds

Get a head start on your website design so you can hit the ground running

Quick & Simple
Easy to use and extremely efficient to help you with some of the heavy lifting

Made By Designers
For the people who use it, by the people who use it keeping developers in mind

New Tools
We’ve built tools to make Photoshop better for web designers & developers
Speed Up Workflows
Aesthetically pleasing and easy to use interface to speed up your workflow

Velositey can do some of the heavy lifting for you

Open Source
USE AND MODIFY ANYTHING!
This addon is completely Open Source under The MIT License. If you modify it, we would love to see yours!

Created for Teams
FOR DESIGNERS AND DEVELOPERS
Designers and developers should work together for a great result, we’ve built Velositey with both in mind.

More Time for Details
LESS REPETITION, MORE FUN
Spend more time perfecting the details and styling and less time on all that boring stuff.

Bootstrap Compatible
MADE TO BE COMPATIBLE WITH 3.1
Use the best framework around for your convenience. We’ve changed the default padding to 30px.

1170px Grid
PRE-GENERATED 1170PX GRID
Use our pre-generated 1170 grid system so your developers love you.

Future Updates
WE PLAN ON DEVELOPING THIS FOR A WHILE
We want to put a lot of our free time into developing this so if you have any suggestions Let us know.

FEATURES:

  • 5x headers
  • 5x sliders
  • 4x content areas
  • 11 x footers
  • Horizontal distribution
  • Vertical distribution
  • Layer/group tiler
  • 1170px grid system
  • Multiple guide creators
  • Remove guides
  • Multiple shape color changer
  • Remove hidden layers
  • Remove hidding groups
  • Remove unused blending modes
  • Measure selection
  • Create font specs (for devs)
  • Photoshop generator support
  • Quickly save a .jpg preview*
  • Map icon creator
  • Favicon creator

Credits: KIERAN BLACK & DAN ROSS

LINK

iOS UI Kit Photoshop Actions {$12}

image

Creating iOS mockups in Photoshop has just turned badass.

This UI Kit for Photoshop in a form of an action set lets you create entire interfaces in a few clicks. One click on a button from the Actions palette equals one element drawn in seconds in your canvas.

One click
That’s what it takes to work the magic. Couldn’t be simpler.


Size aware
One action to rule them all. The same button works for any size.


Built-in
No drag’n’drop, no plugins. iOS UI is now in your workspace.


You can draw very quickly interfaces for iPhone 4, 5 and 6, and now iPad featuring portrait and landscape modes. There is also a template for icons. It creates default-looking elements from the latest iOS, with precision about colors, positions, fonts. Everything is editable, so it’s very easy to customize it and make it the wireframing starting point of your app design.

The pack contains two actions files (one for iPhone, one for iPad), a custom shape file, needed for the actions to run properly, and an exhaustive user manual pdf.

This pack is now fully compatible with older versions of Photoshop, it has been tested on CS6, CC, and CC 2014 and works great on each version.

Credits: Jérémy Paul

LINK

Renderly {free}

image

 Hassle-free photoshop exporting. It’s a Photoshop plugin that does all the boring hard work.


Render.ly will automatically export screens, assets and detailed design specs for your clients and fellow developers. Our technology makes it smart which means exporting only those elements that were changed. Ohh, of course it’s blazing fast and it runs in the background.

Full assets package
All you need to do is to use a proper prefix and Render.ly will handle all the hard work.

ICONS
Keep your icons as vectors, add a prefix “ico” and that’s all. Render.ly will export all of them to your assets folder.

BUTTONS
Name a group with “btn” and create a state by adding e.g. “:hover” in the end of the name inside that group.

IMAGES
Simply add “img” prefix to any kind of layer or group and Render.ly will export it as raster graphic.

Credits: Airnauts

LINK

iOS 7 UI Kit Photoshop Action Set {free}

image

Action file that creates entire default look iPhone mockups for your wireframes, design mockups or just quick ideas.
Version 1.0,available actions at the moment:
New Mockup Document, Reset Guides, Move 88px up, Move 88px down, Navigation & Status Bar, Status Bar | black & white, Safari Header | Collapsed & Expanded, Table Row 88px & 192px | Editable & Dynamic, Table Row repeatable stack | Simple, Offset and Gap, Table Row auto-positions, System Alert, Action Sheet, Keyboard default & dark, Segmented Control | 2 & 3 Tabs, Search Bar, Section Header, Tab Bar, Description, Switch | On & Off, Slider, Side Alphabet, Maps Pinpoint, Page Control, New Icon Artwork file, Icon Template | Linked & Embeded Dynamic Object, Icon Export |

Credits: Jérémy Paul

LINK

Social Kit {Free}

image

Social Kit – Customizable templates for your Facebook, You Tube, Google and Twitter.

Cover images, profile pictures and ad banners in a free up-to-date Photoshop plugin

Editable & Pixel perfect

Fully sliced and customizable templates for your Facebook, Twitter, Google and YouTube channel.


Always Up-to-Date

Automatically updated upon every major or minor change of social site design.
No need to do anything manually, just sit down and enjoy!


Real View

See your design changes right when you make them. The look you get with Social Kit is the look you get on the site. As easy as pie.

Credits: Source


LINK

Random User Generator {free}

image

Random User Generator helps you generate random male or female user with avatar and random name.

Free Photoshop extension for CS6 and CC

Usage

  1. Use the toggle to generate male, female, or both gendered users.
  2. Click and drag the profile photo into your Photoshop document. You can also right-click on the picture and select “Copy Image”
  3. Highlight the name text and paste it into a text object on your document
  4. Press the “New Random User” button to generate a new random user

Credits: randomuser.me

LINK

Comic book tools panel {free}

image

Comic Book Tools Panel v.1 is a lazy comic book guy’s collection of useful Photoshop CS5 tools in the production of a comic book page. The panel is a single tab that holds three (3) accordion sets that slide open and close. Each set holds tools centered around specific uses such as Line Art (the black & white drawing) Cleaning, Flatting and Coloring, and Adjustments, Color Mode, Profiles.

Ced Nocon decided to put together this Adobe Photoshop CS5 (works on CS5.5) plug-ins extension as a way to gather all the useful basic tools that a comic book digital artist would typically need to clean up line art, flat a line art, and color the artwork into one panel/palette. This is a nice panel to have if you are a Wacom Cintiq user and want to free your hand from the keyboard. Just float the panel near your artwork for easy access to the collection of buttons and features.

He’s also included extra features in the Comic Book Tools Panel such as quick access buttons to switching between different color modes–and changing between sRGB and Adobe RGB (1998) Profiles. The latter is a useful feature in quickly converting an artwork from a Grayscale profile (after scanning) or Bitmap profile (or after a clean up of the line art) to Adobe RGB profile for coloring. You can also convert your finished artwork (usually Adobe RGB) to sRGB profile for the web.

Credits: Ced Nocon

LINK

Font Shop {free}

image

The free FontShop Plugin lets you preview any of our 150,000+ fonts, in the context of your own artwork in Adobe® Photoshop®, Adobe® Illustrator®, Adobe® InDesign®, or Adobe® Fireworks® (CS5, CS5.5 and CS6). This is a great new way to find the perfect typographic fit for your project.

Features:

  • Supports Adobe Photoshop, Illustrator, InDesign & Fireworks
  • Preview fonts in your document
  • Search by name, designer or foundry
  • Collect and tag favorite fonts

Credits: FontShop International Inc.

LINK

SubScribe for Illustrator {free}

image

Illustrator plugin

Draw technically and stay creative 

Tool Highlights:

  • Circle by two or three points
  • Tangent circle
  • Curvature circle
  • Connect
  • Straighten
  • Arc by three point
  • Arc start-end-direction
  • Orient
  • Line tangent to two paths
  • Line tangent to path
  • Line tangent from path
  • Line perpendicular to two paths
  • Line perpendicular to path
  • Line perpendicular from path

Credits: Astute Graphics Limited

LINK

Ink {free}

image

Ink is a plugin that helps you providing few extra important informations about your mockups by documenting your layers, from typography to effects and shape sizes.

Handling mockups to developer teams can be tricky. As a designer, sometimes we wrongly assume that everyone knows about how photoshop shapes, effects, and typography works. Sometimes lack of specifications leads to inaccurate front-end outputs. Sometimes the final product just doesn’t look exactly as expected.

Credits: chrometaphore.com

LINK

Quickguide Pro 2.0 {free}

image

You can draw 12 pattern guides.
 Along the selection or layer objects and center of selection or layer objects.
 
ToggleGuideLock/GuideVisibility
Follow the menu cumbersome And sometimes mouse is earlier than the shortcut.
toggle lock state of the guide, lock/unlock.
toggle visibility state of the guide, visible/invisible
 


Copy&PasteGuide
Want a standard feature. Please when you mass-produce screen.
copy guide to clipboard.If you were copy guides then you can paste guides.
 
ClearGuide
clear all guides.

ClearSelectedGuide
I want to delete the guides as illustrator.
clear guides in the selection.
notes:copyed guides is initialize when you execute ClearSelectedGuide.

Credits: Guchitaka

LINK

Text
Photo
Quote
Link
Chat
Audio
Video