Convenient generator CSS sprites
How to be a tool to conveniently create and edit CSS sprites? Everyone will have their answer to this question, and I'm just going to share my thoughts and demonstrate your generator sprites.
For the most part my work with sprites was as follows:
let's start from the beginning
A long time ago I typeset sites. The authorities demanded to speed up page loading and so I began to combine images in sprites.
In Photoshop I cut the layout apart and then combined them using a PHP script. Honestly, I was surprised that Photoshop can't merge the selected region in a single file, but in any case expect the picture editor, still and automatic generation of style — already overkill. I forgave the developers offor such a small set of functions and wrote a php script that generated the sprites and file with the styles.
Sites were many, and the script was greatly accelerated my work. Moreover, the grouping rules I wrote once for one website. If changing the layout, and the field remained in the same place, I just slipped the script a new picture and it all re-generated.
I must confess I was one drawback in this approach. The quality of the pictures, which gives PHP to put it mildly "not very". So I set up the script so that in the styles file extensions were jpg, png, gif, and images generated in BMP format. And then I manually converted to the desired format using Photoshop.
Many years later I again had to make a layout using sprites. And then I began to wonder. What appeared during this time to simplify the process?
Photoshop again, I was not pleased. But the generator sprites appeared in Fireworks CS6. But after reviewing several videos and articles, I realized that it does not suit me, so as not fulfilling all my requirements.
Also there are many individual generators. Small overview already were on Habre, there are links to the generators. But not one of the generators did not perform all of the tasks that I put forward to the generator sprites.
In short, the generator of sprites needs:
the
Previously linked images and styles generated by my PHP script, I only was prescribed for this rule. But now I thought it a little. At least to configure the rules in a text editor already out of date. Now everything has to be controlled by buttons and configure by using the graphical interface.
But since the graphic interface, and Photoshop is not particularly needed. The selection of areas and cutting the images is trivial for javascript and HTML5.
All these four points clearly want to unite in a single editor.
But for the editor it is very important to save the project in case you need to correct them.
As you can see, the project file must contain all of the original image and all the rules of the breakdown, combining images and generating styles.
Now let's touch on a graphical interface. It should be:
the
Important — when adding images to the project should be some standard rules to save the user unnecessary configuration steps. For example, we've added the icon "firefox.png". The program should automatically create a "firefox" (the full width and height) and style:
And then we can move the region to another sprite or edit the generated styles.
Now, briefly, why I did not fit the existing solutions.
Compass is written in Ruby. Styles are written with a special syntax, and the program then generates the usual styles with sprites.
Lemonade — the essence is the same and the site says that it is now integrated into the same Compass.
Glue is the command line to generate the sprites.
These tools I compared with what I had for more than five years ago when I was prescribed the rules in the php script and it generated the sprites. But now, I've wanted it from the visual editor.
SpriteMe — drag the link into a bookmarklet and then you can edit the sprites for the current website. But I don't need to edit the sprites on an existing site. I need a editor at the stage when the site is typeset.
Spritepad — by drag-and-drop drag images on the sprite and on the right displays all the styles. Is closer to what I wanted. But why do only drag-and-drop? Does the website only shows a new feature of browsers? Not always convenient for me to drag, I want to add pictures through a conventional "Open" button. The pictures are saved only in PNG? You cannot create multiple sprites? Still, this generator was very simple.
Sprite Cow is an interesting thing. If you already have sprite, Sprite Cow helps you to allocate a separate region and generate the css rules for them. But css is only generated for a single selection. That is, if you have a bunch of icons, you need every point and copy the css to your style editor. In General, the idea is good, can shorten the time the determination of the coordinates and sizes in the sprite, but much too narrowly focused and again does not solve my problems.
Even the online services:
the
In them the process is as follows:
But still, to me they look not comfortable and not practical. In General, each of the above applications was causing me discomfort due to the fact that was not the desired option or was awkward interface.
I did not want to tolerate this state of things, and pile your generator.br>
CSS Sprite Generator by Simpreal
The program is the embodiment of all the above requirements. And many ideas are still in the process of implementation.
It is important to note that it is possible to save the project, and then will not have next time again to configure.
On the main page under "Examples" there are several projects and examples. I hope they will help you to understand the capabilities of the program.
Generator works online sprites. Built from Bootstrap, Knockoutjs and Jquery itself.
Importantly, during the development of the project received a lot of experience especially in Knockoutjs. This experience resulted in two articles on habré:
the GIF to a Canvas in Javascript
Optimization knockoutjs dynamic adding and removing templates
If anyone has any questions related to implementation that is able generator sprites, I will gladly answer.
There is also offline version for Windows. It is a wrapper for Awesomium in which is simply inserted into the web files. But I really had to work to get all functions to work in this shell. So I can share this experience.
For development process you can follow on smartprogress
Now I'm working on integrating the editor with the server for more convenient saving results. Ideally, at the click of a button, all the sprites and styles will be updated on an editable website.
Unfortunately, half a year almost no one to use the program. Therefore, demonstrate the program to habersaathstr to know your opinion about the usefulness of this product.
I only suggest that very few people basically use sprites. For example, during the last 5 years, I have only one website so did friends. Real customers now not pay attention to it.
So it's hard to say what will happen next. If people like the idea of the program, it will develop. If not, then it will either remain as is or turn into something else.
In any case, the experience is priceless!
And if I need to make a website with sprites, then I'll have this handy tool!
Article based on information from habrahabr.ru
For the most part my work with sprites was as follows:
let's start from the beginning
brief history
the Past
A long time ago I typeset sites. The authorities demanded to speed up page loading and so I began to combine images in sprites.
In Photoshop I cut the layout apart and then combined them using a PHP script. Honestly, I was surprised that Photoshop can't merge the selected region in a single file, but in any case expect the picture editor, still and automatic generation of style — already overkill. I forgave the developers of
Sites were many, and the script was greatly accelerated my work. Moreover, the grouping rules I wrote once for one website. If changing the layout, and the field remained in the same place, I just slipped the script a new picture and it all re-generated.
I must confess I was one drawback in this approach. The quality of the pictures, which gives PHP to put it mildly "not very". So I set up the script so that in the styles file extensions were jpg, png, gif, and images generated in BMP format. And then I manually converted to the desired format using Photoshop.
Present
Many years later I again had to make a layout using sprites. And then I began to wonder. What appeared during this time to simplify the process?
Photoshop again, I was not pleased. But the generator sprites appeared in Fireworks CS6. But after reviewing several videos and articles, I realized that it does not suit me, so as not fulfilling all my requirements.
Also there are many individual generators. Small overview already were on Habre, there are links to the generators. But not one of the generators did not perform all of the tasks that I put forward to the generator sprites.
How I see the generator of the sprite
In short, the generator of sprites needs:
the
-
the
- to be able to cut the original image into pieces the
- to be able to combine the cut parts in the sprites the
- at the same time generating styles the
- Main thing is to have a user friendly graphical interface
Previously linked images and styles generated by my PHP script, I only was prescribed for this rule. But now I thought it a little. At least to configure the rules in a text editor already out of date. Now everything has to be controlled by buttons and configure by using the graphical interface.
But since the graphic interface, and Photoshop is not particularly needed. The selection of areas and cutting the images is trivial for javascript and HTML5.
All these four points clearly want to unite in a single editor.
But for the editor it is very important to save the project in case you need to correct them.
As you can see, the project file must contain all of the original image and all the rules of the breakdown, combining images and generating styles.
Now let's touch on a graphical interface. It should be:
the
-
the
- Buttons for opening images, rules, or entire project. the
- Buttons for saving the result and of the project.
- setup of grouping rules regions in the sprite. There should be the ability to specify where the sprite should be a picture
rules setting the split images on the region. That is: user selects a region, see the list of fields can be edited. the
Important — when adding images to the project should be some standard rules to save the user unnecessary configuration steps. For example, we've added the icon "firefox.png". The program should automatically create a "firefox" (the full width and height) and style:
.firefox{ width:16px; height:16px; background: url('data:image/png;base64,,.....==') 0px 0px no-repeat; }
And then we can move the region to another sprite or edit the generated styles.
solutions
Now, briefly, why I did not fit the existing solutions.
Compass is written in Ruby. Styles are written with a special syntax, and the program then generates the usual styles with sprites.
Lemonade — the essence is the same and the site says that it is now integrated into the same Compass.
Glue is the command line to generate the sprites.
These tools I compared with what I had for more than five years ago when I was prescribed the rules in the php script and it generated the sprites. But now, I've wanted it from the visual editor.
SpriteMe — drag the link into a bookmarklet and then you can edit the sprites for the current website. But I don't need to edit the sprites on an existing site. I need a editor at the stage when the site is typeset.
Spritepad — by drag-and-drop drag images on the sprite and on the right displays all the styles. Is closer to what I wanted. But why do only drag-and-drop? Does the website only shows a new feature of browsers? Not always convenient for me to drag, I want to add pictures through a conventional "Open" button. The pictures are saved only in PNG? You cannot create multiple sprites? Still, this generator was very simple.
Sprite Cow is an interesting thing. If you already have sprite, Sprite Cow helps you to allocate a separate region and generate the css rules for them. But css is only generated for a single selection. That is, if you have a bunch of icons, you need every point and copy the css to your style editor. In General, the idea is good, can shorten the time the determination of the coordinates and sizes in the sprite, but much too narrowly focused and again does not solve my problems.
Even the online services:
the
-
the
- css-sprit.es the
- csssprites.com, the
- spritegen.website-performance.org, the
- css.spritegen.com
In them the process is as follows:
-
the
- load images the
- configuration parameters the
- generation
But still, to me they look not comfortable and not practical. In General, each of the above applications was causing me discomfort due to the fact that was not the desired option or was awkward interface.
I did not want to tolerate this state of things, and pile your generator.br>
Happy to submit
CSS Sprite Generator by Simpreal
The program is the embodiment of all the above requirements. And many ideas are still in the process of implementation.
It is important to note that it is possible to save the project, and then will not have next time again to configure.
On the main page under "Examples" there are several projects and examples. I hope they will help you to understand the capabilities of the program.
Generator works online sprites. Built from Bootstrap, Knockoutjs and Jquery itself.
Importantly, during the development of the project received a lot of experience especially in Knockoutjs. This experience resulted in two articles on habré:
the GIF to a Canvas in Javascript
Optimization knockoutjs dynamic adding and removing templates
If anyone has any questions related to implementation that is able generator sprites, I will gladly answer.
There is also offline version for Windows. It is a wrapper for Awesomium in which is simply inserted into the web files. But I really had to work to get all functions to work in this shell. So I can share this experience.
What's next
For development process you can follow on smartprogress
Now I'm working on integrating the editor with the server for more convenient saving results. Ideally, at the click of a button, all the sprites and styles will be updated on an editable website.
Unfortunately, half a year almost no one to use the program. Therefore, demonstrate the program to habersaathstr to know your opinion about the usefulness of this product.
I only suggest that very few people basically use sprites. For example, during the last 5 years, I have only one website so did friends. Real customers now not pay attention to it.
So it's hard to say what will happen next. If people like the idea of the program, it will develop. If not, then it will either remain as is or turn into something else.
In any case, the experience is priceless!
And if I need to make a website with sprites, then I'll have this handy tool!
Комментарии
Отправить комментарий