Marsy Service Overview
Everyone who has been involved in the layout of html pages knows that working with the layout design takes a rather long time, and the more complex the layout, the more.
Some time ago, when there was neither avocode nor zeplin, all the necessary receive information about layers and the layout itself from programs that do not provide for easy the conversion of data into the presentation necessary for the layout designer, in this case - this Photoshop.
Later, the above products entered the arena and the life of developers began to improve, but there was such a problem as a monopoly in this segment (see the cost of avocode and you’ll understand what I mean), but not even that prompted me to create a service Marsy .
At some point, I realized that I lacked the opportunities that the existing ones tools, I wanted to optimize here, add features there, but it's impossible, usually these companies have a clear plan that they follow.
And that means it's time to take the initiative. And for quite a long time, and Since 2017, I have been developing my service. Next I will talk about him more in detail.
Marsy service is absolutely free, but if you like it, you can always help me financially on this page.
I also want to report that everyone can offer an improvement, and with a high probability it will appear in Marsy.
Creating a project and loading layouts
After a simple registration, we get to a page with a list of projects, they can be any number. Project can perceived as the folder in which the layouts are stored.
On this page you can create a new project or delete an existing one, it is important note that when you delete a project, all layouts from it will be deleted, and restore them already not allowed.
Form for creating a project, here you can set its name and description
After creating the project, click on the item in the list and go to the project itself, the repository layouts.
In order to download a new layout, click on the "Add Layout" button after This will open the layout download form.
There are several ways to add a layout for loading: drag the layout onto shape area or click the "Add File" button and select a layout in the inspector. At the same time can upload multiple layouts.
Also in this form you can change the name of the layout and add a description to it.
Some actions are available for each layout:
- Download the layout - by clicking on this button you can download the layout on your a computer
- Put in archive - allows you to remove the layout in the archive, while processed information on it will be deleted, and the layout itself will disappear from this page. View layouts in archive you can click on the button "Show archive", the number on it indicates the number layouts in the archive. The layout from the archive can be removed, but after that it again have to send for processing by clicking on the appropriate button.
- Refresh - when you click on it, the layout will be sent to parsing again, used when the release of a new update, in which there is a change in working with files.
- Delete - deletes the layout, it is impossible to restore it after removal.
Now we can move on to the most delicious, to the editor.
Working with the Marsy editor
Basic information and context menu
The first thing you can do here is to click on the screen with the mouse, and if you get to layer then he will become active. Near it, the dimensions will be displayed and a floating will appear. window with styles of this layer. If now you hold down the left ctrl and move it to another layer, then we see the distance between them. If instead, right-click, then the context menu of the layer appears, in which, depending on its type, the following points:
- Copy text - copies the text of selected test layers
- Copy Styles - copies the styles of selected layers
- Download - opens a dialog for downloading selected layers
- Open smart - opens the smart object associated with the layer
Toolbar
On the left is a toolbar, I will combine simple tools into one section, and about I’ll tell you more complicated ones.
- Outlining - allows you to select layers by capturing them with a border, so same its dimensions are written on its sides, which can be used for measurements.
- Eyedropper - with its help you can copy the color of any element, clicking on it.
- Back - the tab where the buttons for returning to projects are located
- Guides - turns on / off the display of guides from Photoshop
- Support - the team tab that contains links to reference materials and donation page
We’ll end with simple tools and move on to more complex ones. Next I will arrange them in the same order as on the site.
List of layers
Layers and layer groups can hide and most importantly, the layers that were hidden in Photoshop initially will be available, just switch their visibility.
Near the group of layers there is a button, when clicked, all will be selected subsidiary layers.
When clicking on a layer in this list, the editor is centered on the image of this layer, what allows you to quickly determine its location.
Export Images
By going to the image download tab you will see two buttons, both of them will open window export images. The difference is that when you click on one of them will be suggested - download images of selected layers, while the second will offer to download Images of all non-text layers, which is sometimes useful.
Image Export Window
The main element here is a list of images for export.
On the left is a thumbnail of the image, then comes the text box, in it can change the name with which the image will be saved. After the name go selection fields image format (png, jpg and svg if available) and quality settings, available only for jpg format. The last element is the checkbox, which indicates what you need whether export a specific item.
I want to note that for layers in which the pattern is used, there will be a separate sentence line - download it.
There are elements for group editing above the list of images. Impact they will only be on those items for which the checkmark for export is active.
The first is the name editor, allows you to name elements of the same type with numbering for example, if you write "item_ {d}" in it, then the layers will be named item_1, item_2, item_3 and etc. In order to change the starting number, you need to write "item_ {d2}" or "item_ {d8}", and the numbering will start at 2 or 8, respectively.
Next, quality settings, image format and switch buttons activity layers.
At the bottom is the download button, if the image is one, then the file will be downloaded immediately, if their several, the archive with all the images from the list will be downloaded.
At the very top there is a button "Save to one file", switching it you can download layers combining them into one file, they will be located relative to each other as on mock up.
Settings
I pay much attention to customizing the editor for the needs of users. And in this the tab contains all these settings.
- Application Language
- Css or sass style format - differ by the presence of ";" at the end of the line style
- Show duplicates for text styles - used in text layers, which There is a text with different styles. Try to change the value and understand what the essence in words it is difficult to tell.
- Floating Styles Window - hides the styles window that appears on click by layer
- Always show distance - above I talked about rulers, showing distance to another layer, and so, when you turn on this setting, you don’t need to pinch ctrl they will always be displayed
- Show block sizes - sets when to show layer sizes in his top left corner. By default when hovering and selecting a layer
- Set tab layout - here you can change the order tools in panels move them to the right side or completely hide unused
- Customize keyboard shortcuts - for many actions (copy styles, texts downloading images) I added hotkeys, in this section you can reconfigure them.
Layer Information
Here is the full information about the layer full text, styles, images, svg and base64 views if available.
Layout information
This tab contains the data for the entire layout: a list of colors, used in it and all layout fonts.
There is also a block for setting variables, with their help you can replace words or lines to others. Variables operate throughout the project, with deleting a layout will remain available inside other layouts.
Zoom bar
You can scale the layout with both the buttons on the panel and the mouse wheel while holding down ctrl and keys "+" and "-" on the keyboard.
When you click on a scale digit, it is reset to 100%