July 29, 2014 at 07:13Web design, inkscape and all-all-all, part 1
- Tutorial
- Recovery mode
There are special programs for design like Sketch , but they are only on poppies (and I don’t have them) and are engaged only in design, although judging by the reviews they do it well (unix-way after all). And there are Photoshop, gimps and other corels that are used for other purposes, about one of such cases there is this topic. A picture to attract attention (I do not pretend to design, and I do not think it is better than what it is now, just a picture):
First you need to prepare a document and the editor itself for quick work, we will specifically edit: hotkeys, document settings, grids and a few little things.
Settings, oddly enough, open in the menu under Edit / Options . A general view of the parameters (I apologize for the vyrviglazny blue color of hotkeys, gtk does not really digest the color settings of the sneakers), I suppose readers will find the described settings themselves, especially since the vast majority is available on the great and powerful:
File / Document Properties . By default, when you open it, an empty document is already created, so we will work with it:
Here, everyone can make up the layout for themselves, although window management is not at all familiar, working with layers is usual, but due to some features you can sometimes do with one level of layers: Toolbars are not customizable, you can only get used to it or change the position on the other side of the screen, although this is the default for me the most convenient of the possible. The layer window does not display anything but layers. For managing objects and their properties there is an xml editor directly, it is embedded in the panel, but it turns out to be too wide, it is better to open it in a separate window if necessary:
It is important to carefully do everything in advance in layers, it will be more complicated further, since it does not show objects in the layers and they will have to be either the xml editor or touch to the right place. Inkscape layers are created to create a document, not layouts - there are other things for that.
Clones are also one of the most remarkable things in inkscape: one object is created and only its clones are copied, which is very important in any repeating elements. Creating clones: first, create the desired element / text / something complex and combine it into a group - Edit / Clones / Create a clone . Clones can be transformed, moved and rotated, but no more - for the rest, you will have to disconnect the clone. In this case, only the original will have to be changed. An example with trivial borders (useful in all sorts of online stores with a bunch of identical blocks):
I won’t teach you design, conversions, interfaces and other fonts, I think it will be so obvious - no witchcraft will be needed.Who would have taught himself
This section is worthy of a separate post and I won’t write it, I’ll just take apart the Habr’s icon:
Before the heap, the editor has a lot of functionality related to aligning objects, a lot of settings for bindings, filters, working with the contour, and so on. At the exit from the heap of text, square blocks, icons and one logo, we have a ready-made layout. What is lacking in inkscape: adequate management of objects is similar to “layers” in gimp / photoshop - the xml editor is too overloaded and at the same time useless without knowing specific svg pointers; pages - only one page is available when creating a document, the rest is done either in one document simply with a big shift, or in different files - but then clones and joint edits are impossible, it becomes more difficult (although separate css for svg can be connected, which is correct during layout, but will greatly slow down the work during design).
The second part will be considered for the functional layout
Links:
Ikonochny font Font Awesome with service fontello.com
Font Fira sans
font the Open Sans
Inkscape
Rezultat.svg , optimized for browsers.
Training
First you need to prepare a document and the editor itself for quick work, we will specifically edit: hotkeys, document settings, grids and a few little things.
- Set pixels by default everywhere in grids, get rid of centimeters, inches and other real-world number systems;
- Set hotkeys according to habit, or not touch and get used to the native ones;
- Clones - re-bind duplicated clones;
- Auto save put more often;
- Other settings at your discretion (cache size for rendering, increase the number of threads according to the processor, etc.)
Settings, oddly enough, open in the menu under Edit / Options . A general view of the parameters (I apologize for the vyrviglazny blue color of hotkeys, gtk does not really digest the color settings of the sneakers), I suppose readers will find the described settings themselves, especially since the vast majority is available on the great and powerful:
Create a document and grid:
File / Document Properties . By default, when you open it, an empty document is already created, so we will work with it:
- Set the image size (it’s more convenient for me to work with a 1600x1200px document on a fullHD monitor);
- Set the background color if necessary (if the site is supposed to be dark or gray, then it will be more comfortable to work with a dark background (this will not be the background of the site, only the canvas background)), change the color of the guide as desired;
- Remove the border of the canvas (it bothers me), instead show the guides on the Edit / Show guides around the page ;
- Metadata and license - at will and need;
- Grids - One of the great parts of inkscape is grids. A lot of nets.
And so, we need:- A grid with an interval of 1px - make it invisible, but enable adhesion - it will visually interfere;
- A grid with an interval of 20px and repeating every 5 times - here the preferences may vary, only a special case; from experience it is better to make it black or white with low transparency
- A grid with an interval of 5 and repeating every 2 times is again a special case of my convenience; from experience it is better to make it the opposite color of the previous one - it will be visible on elements with the corresponding previous color and vice versa
- A grid with an interval of 300px in x and 500px in y - there will be columns, if there is a desire to indent between them, until you just create the same with a shift, you can make color to highlight;
Panels, Layers, and More
Here, everyone can make up the layout for themselves, although window management is not at all familiar, working with layers is usual, but due to some features you can sometimes do with one level of layers: Toolbars are not customizable, you can only get used to it or change the position on the other side of the screen, although this is the default for me the most convenient of the possible. The layer window does not display anything but layers. For managing objects and their properties there is an xml editor directly, it is embedded in the panel, but it turns out to be too wide, it is better to open it in a separate window if necessary:
It is important to carefully do everything in advance in layers, it will be more complicated further, since it does not show objects in the layers and they will have to be either the xml editor or touch to the right place. Inkscape layers are created to create a document, not layouts - there are other things for that.
Clones
Clones are also one of the most remarkable things in inkscape: one object is created and only its clones are copied, which is very important in any repeating elements. Creating clones: first, create the desired element / text / something complex and combine it into a group - Edit / Clones / Create a clone . Clones can be transformed, moved and rotated, but no more - for the rest, you will have to disconnect the clone. In this case, only the original will have to be changed. An example with trivial borders (useful in all sorts of online stores with a bunch of identical blocks):
Design
I won’t teach you design, conversions, interfaces and other fonts, I think it will be so obvious - no witchcraft will be needed.
Graphics
This section is worthy of a separate post and I won’t write it, I’ll just take apart the Habr’s icon:
- Create an outline of the letter H;
- Extensions / create from contour / Movement ;
- Object - ungroup (x2);
- Select everything except the letter H;
- Summarize the contours of the shadow;
- Create a gradient from black to transparent black, draw it along the outline of the shadow (linear or radial to taste);
- Shade: Filters / Blurs / Out of focus ;
- Reduce the transparency of the shadow;
- Draw reflections (gradients, a bit of blur and a little bit of work with the outline);
Before the heap, the editor has a lot of functionality related to aligning objects, a lot of settings for bindings, filters, working with the contour, and so on. At the exit from the heap of text, square blocks, icons and one logo, we have a ready-made layout. What is lacking in inkscape: adequate management of objects is similar to “layers” in gimp / photoshop - the xml editor is too overloaded and at the same time useless without knowing specific svg pointers; pages - only one page is available when creating a document, the rest is done either in one document simply with a big shift, or in different files - but then clones and joint edits are impossible, it becomes more difficult (although separate css for svg can be connected, which is correct during layout, but will greatly slow down the work during design).
The second part will be considered for the functional layout
Links:
Ikonochny font Font Awesome with service fontello.com
Font Fira sans
font the Open Sans
Inkscape
Rezultat.svg , optimized for browsers.
