Tool available at https://redaktor.io
Export images, styles from your psd’s right in the browser. We have prepared a introduction video.
Create a Project
On the home screen, enter project name, click create.
On the left side, project will show up. Click to open.
Code
Status bar has action icons.
Left: File Manager, Tabs, Upload
Right: Open file, Layout view
Click Upload in the status bar. As an example let’s upload a PSD file.
On upload your file will be visible in file manager. Click it to open, a preview will appear in a few seconds.
On the right side you will see an image editor icon appear.
Click on the image editor icon to open the photoshop document.
Image Editor
Click on an image (you can select multiple images using shift+click). Click Export and image would be extracted out into (assets/images/name.[png/jpeg]) etc. This can be configured in preferences.
You can extract text as images for missing fonts.
CSS Styles for selected layers would appear right below. You can select and copy or just click insert into the target stylesheet next to Insert
Click on the Fonts icon in the status bar to add fonts to your project. Target can be a stylesheet or html document. Google fonts are automatically detected and loaded (so you only have to click insert to import into related css / html document)
Missing fonts will appear inside alert notifications in main window.
HTML / CSS
Create an index.html file.
Enter html to get a code snippet, hit ENTER to insert snippet.
When HTML file is open, you will see an Eye icon above Code icon, click it to edit HTML in visual mode.
Any text / design elements modified using design / code view will be in sync.
Linking a stylesheet to HTML is done the usual way with<link /> tag.
Let us go into design/code split view to see live changes between design and code.
Changes made in a linked css to the html document are visible as you type.
Design
Various tools are accessible in design view status bar.
Draw
Click arrow looking icon to activate the draw tool, click any where inside the design view, you will get a search preview to find and insert snippets. CSS applied to document will be applied to snippets, so you can see how it would look on insertion.
- use up/down arrow to move between snippets, hit ESC to go back into design view.
- hit enter in search bar to insert snippet present inside code view
- you can modify the snippet before insertion into design view.
Styles
Activate styles and click on an element, you will see where in your project files are styles affecting this particular element. Editing them in-place will save and update element styles.
Responsive
Change design view to be a certain device width.
Grid
For aesthetics or if you like to see how things line up you can enable a grid overlay. For desktop, mobile, tablet and phablet grid sizes can be specified (per project) in preferences.
Preferences
Choose your shortcuts, customize the code editor and extensions that are present in various places.
Feature Requests
- Requests / Issues - https://github.com/redaktorio/redaktor-issues/issues
- Twitter - https://twitter.com/redaktorio
- Getting in Touch - visit Preferences > Feedback
