https://github.com/zoontek/psd-browser-preview
Sync Photoshop and your browser
https://github.com/zoontek/psd-browser-preview
Last synced: about 1 year ago
JSON representation
Sync Photoshop and your browser
- Host: GitHub
- URL: https://github.com/zoontek/psd-browser-preview
- Owner: zoontek
- Created: 2014-08-01T14:56:20.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2016-04-19T22:12:31.000Z (about 10 years ago)
- Last Synced: 2024-10-17T01:29:42.961Z (over 1 year ago)
- Language: JavaScript
- Size: 6.84 KB
- Stars: 3
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## PSD Browser Preview
Display and reload your Photoshop mockups in your browsers (desktop, mobile, others).
## Requirements
- [Node.js](http://nodejs.org/)
- [Gulp](http://gulpjs.com/) - [how-to install it](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md)
- [ImageMagick](http://www.imagemagick.org/)
## Getting started
Download the .zip (or use git clone) to grab the project. Open a terminal, and go where you extract the files.
```
cd path_to_the_folder
```
Run a **npm install** to install project dependencies.
```
npm install
```
Start watching your files using the gulp default task.
```
gulp
```
## But wait, there's more
Convert to **.png** file (instead of a **.jpg**, it's slower).
```
gulp --png
```
Watch one file at the time (add the possibility to launch 1 server per .psd).
```
gulp --input your_file_name.psd
```
Add a **background-color**.
```
gulp --color #00ff00
```
Change your mockup alignement (default is center).
```
gulp --left
gulp --right
```
## Help me, I'm using Windows
Open **gulpfile.js** and replace "*exec: 'convert'*" with the full path to ImageMagick **convert.exe**. That's it!