Convenient CSS Sprite Generator
What should be the tool to make it convenient to create and edit CSS sprites? Everyone will have their own answer to this question, but I will just share my thoughts and demonstrate my own sprite generator.
For the most part, my work with sprites was as follows:
So let's start from the beginning.
A long time ago I made websites. The authorities demanded to speed up the loading of pages and therefore I began to merge the pictures into sprites.
')
In Photoshop, I cut the layout apart and then merged them using a PHP script. Honestly, I was surprised that in Photoshop it’s impossible to merge selected areas into one file, but in any case, it’s already an obvious search to expect from the image editor to automatically generate styles. I forgave the developersfor such a meager functionality and wrote a php script that generated sprites and a file with styles.
There were many sites, and the script significantly accelerated my work. And I wrote the grouping rules once for one site. If the layout changed, and the areas remained in the same place, then I just shoved a new image to the script and it re-generated everything.
I admit, there was one flaw in this approach. The quality of the pictures that PHP gives to put it mildly "not very." Therefore, I set up the script so that the file extension styles were jpg, png, gif, and the images were generated in the BMP format. And then I manually converted to the desired format using Photoshop.
After many years, I again had to impose a layout using sprites. And then it became interesting to me. What appeared during this time to simplify the process?
Photoshop did not please me again. But the sprite generator appeared in Fireworks CS6. But after reviewing several videos and articles, I realized that it does not suit me, since it does not fulfill all my requirements.
There are also many individual generators. A small review was already on Habré, there are also links to generators. But not one of the generators did not perform all the tasks that I put forward to the sprite generator.
In short, the sprite generator should:
Earlier I connected pictures and generated styles for my PHP script, I just wrote for this rule. But now it seemed to me that was not enough. At a minimum, setting rules in a text editor is already outdated. Now everything should be controlled by buttons and configured using a graphical interface.
But since I’m doing a graphical interface, Photoshop isn’t really needed. Selecting areas and cutting the picture is a trivial task for javascript and HTML5.
All these four points clearly want to unite in one single editor.
And for the editor it is very important to save the project in case you need to correct something later.
As you can see, all source images and all rules for splitting, combining images and generating styles should be saved to the project file.
Now we’ll focus on the graphical interface. It should have the following:
The main thing is that when adding images to a project, certain standard rules should be generated in order to save the user from unnecessary configuration steps. For example, we added the icon "firefox.png". The program should automatically create a “firefox” area (for the entire width and height) and style:
And then we can move the region to another sprite or edit the generation of styles.
Now briefly why the existing solutions did not suit me.
Compass - written in Ruby. Styles are written with a special syntax and the program then generates regular styles with sprites.
Lemonade - the essence is the same and it is written on the site that it is now built into the same Compass.
Glue - command line for generating sprites.
I compared these tools with the fact that I had more than five years ago when I wrote the rules in a php script and it generated sprites. But now I wanted exactly the visual editor.
SpriteMe - drag the link to the bookmarklet and then you can edit the sprites on the viewed site. But I do not need to edit sprites on an existing site. I need an editor at the stage when the site is still being installed.
Spritepad - drag and drop the image onto the sprite and on the right all styles are displayed. Already closer to what I wanted. But why just drag-and-drop? Does the site only show a new browser feature? It's not always convenient for me to drag, I want to add pictures through the usual “Open” button. Pictures are saved only in PNG? Can't create multiple sprites at the same time? Still, this generator is very simple.
Sprite Cow is an interesting thing. If you already have a ready-made sprite, Sprite Cow will help you to select specific areas and generate css rules for them. But css is generated for only one selected area. That is, if you have a bunch of icons, then you need to select and copy each css into your style editor. In general, the idea is good, it can reduce the time when determining the coordinates and sizes in the sprite, but it is very narrowly focused and again does not solve my problems.
More online services:
In them, the process is as follows:
But still, they seemed to me not comfortable and not practical. In general, each of the above applications caused me a sense of discomfort due to the fact that there was no necessary option or an uncomfortable interface.
I did not want to put up with this state of affairs and pile up my generator.
CSS Sprite Generator by Simpreal
The program is the embodiment of all the above requirements. And a lot of ideas are still in the process of implementation.
It is important to note that there is an opportunity to save the project, and then there will be no need to re-configure everything next time.
On the main page in the Examples section there are several example projects. I hope they will help to understand the possibilities of the program.
Sprite generator works online. Compiled from Bootstrap, Knockoutjs and Jquery itself.
Most importantly, during the development of the project, a lot of experience was gained, especially on Knockoutjs. This experience resulted in two articles on Habré:
Canvas to GIF in Javascript
Optimize knockoutjs for dynamically adding and removing templates
If anyone has any more questions related to the implementation of what the generator of sprites can do, then I will be happy to answer.
There is also an offline version for Windows. It is a shell on Awesomium into which web files are simply inserted. But in fact, I had to work to get all the functions in this shell. So I can share this experience.
The development process can be monitored on smartprogress
Now I am working on integrating the editor with the server, for more convenient saving of results. Ideally, by pressing a single button, all sprites and styles will be updated on the site being edited.
Unfortunately, for half a year, almost no one began to use the program. Therefore, I demonstrate the program to the community to get your opinion on the usefulness of this product.
I only assume for now that very few people use sprites in principle. For example, over the past 5 years I have only made one site like this for my friends. Real customers now do not pay attention to it.
Therefore, it is difficult to say what will happen next. If people like the idea of ​​the program, then it will develop. If not, then it will either remain as it is, or turn into something else.
In any case, experience is invaluable!
And if I need to create a site with sprites, then I will already have a handy tool for this!
For the most part, my work with sprites was as follows:
So let's start from the beginning.
Short story
Past
A long time ago I made websites. The authorities demanded to speed up the loading of pages and therefore I began to merge the pictures into sprites.
')
In Photoshop, I cut the layout apart and then merged them using a PHP script. Honestly, I was surprised that in Photoshop it’s impossible to merge selected areas into one file, but in any case, it’s already an obvious search to expect from the image editor to automatically generate styles. I forgave the developers
There were many sites, and the script significantly accelerated my work. And I wrote the grouping rules once for one site. If the layout changed, and the areas remained in the same place, then I just shoved a new image to the script and it re-generated everything.
I admit, there was one flaw in this approach. The quality of the pictures that PHP gives to put it mildly "not very." Therefore, I set up the script so that the file extension styles were jpg, png, gif, and the images were generated in the BMP format. And then I manually converted to the desired format using Photoshop.
The present
After many years, I again had to impose a layout using sprites. And then it became interesting to me. What appeared during this time to simplify the process?
Photoshop did not please me again. But the sprite generator appeared in Fireworks CS6. But after reviewing several videos and articles, I realized that it does not suit me, since it does not fulfill all my requirements.
There are also many individual generators. A small review was already on Habré, there are also links to generators. But not one of the generators did not perform all the tasks that I put forward to the sprite generator.
How do I see the sprite generator
In short, the sprite generator should:
- Be able to cut the original images into pieces
- Be able to connect the cut parts into sprites
- Simultaneously generate styles
- The main thing is to have a convenient graphical interface.
Earlier I connected pictures and generated styles for my PHP script, I just wrote for this rule. But now it seemed to me that was not enough. At a minimum, setting rules in a text editor is already outdated. Now everything should be controlled by buttons and configured using a graphical interface.
But since I’m doing a graphical interface, Photoshop isn’t really needed. Selecting areas and cutting the picture is a trivial task for javascript and HTML5.
All these four points clearly want to unite in one single editor.
And for the editor it is very important to save the project in case you need to correct something later.
As you can see, all source images and all rules for splitting, combining images and generating styles should be saved to the project file.
Now we’ll focus on the graphical interface. It should have the following:
- Buttons for opening pictures, rules or the entire project.
- Buttons to save the result and the project.
- Setting rules for splitting images into areas. That is: the user selects areas, sees a list of areas, can edit them.
- Setting the rules for grouping areas into sprite. There should be an opportunity to specify where the picture should be in the sprite
- Setting the rules for generating styles. For each image in the sprite, the way of generating styles should be adjusted: generate or not width, height, repeate-x, repeat-y, no-repeat, class name
The main thing is that when adding images to a project, certain standard rules should be generated in order to save the user from unnecessary configuration steps. For example, we added the icon "firefox.png". The program should automatically create a “firefox” area (for the entire 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 generation of styles.
Solution Review
Now briefly why the existing solutions did not suit me.
Compass - written in Ruby. Styles are written with a special syntax and the program then generates regular styles with sprites.
Lemonade - the essence is the same and it is written on the site that it is now built into the same Compass.
Glue - command line for generating sprites.
I compared these tools with the fact that I had more than five years ago when I wrote the rules in a php script and it generated sprites. But now I wanted exactly the visual editor.
SpriteMe - drag the link to the bookmarklet and then you can edit the sprites on the viewed site. But I do not need to edit sprites on an existing site. I need an editor at the stage when the site is still being installed.
Spritepad - drag and drop the image onto the sprite and on the right all styles are displayed. Already closer to what I wanted. But why just drag-and-drop? Does the site only show a new browser feature? It's not always convenient for me to drag, I want to add pictures through the usual “Open” button. Pictures are saved only in PNG? Can't create multiple sprites at the same time? Still, this generator is very simple.
Sprite Cow is an interesting thing. If you already have a ready-made sprite, Sprite Cow will help you to select specific areas and generate css rules for them. But css is generated for only one selected area. That is, if you have a bunch of icons, then you need to select and copy each css into your style editor. In general, the idea is good, it can reduce the time when determining the coordinates and sizes in the sprite, but it is very narrowly focused and again does not solve my problems.
More online services:
- css-sprit.es,
- csssprites.com,
- spritegen.website-performance.org,
- css.spritegen.com
In them, the process is as follows:
- loading pictures,
- settings,
- generation
But still, they seemed to me not comfortable and not practical. In general, each of the above applications caused me a sense of discomfort due to the fact that there was no necessary option or an uncomfortable interface.
I did not want to put up with this state of affairs and pile up my generator.
I am glad to present
CSS Sprite Generator by Simpreal
The program is the embodiment of all the above requirements. And a lot of ideas are still in the process of implementation.
It is important to note that there is an opportunity to save the project, and then there will be no need to re-configure everything next time.
On the main page in the Examples section there are several example projects. I hope they will help to understand the possibilities of the program.
Sprite generator works online. Compiled from Bootstrap, Knockoutjs and Jquery itself.
Most importantly, during the development of the project, a lot of experience was gained, especially on Knockoutjs. This experience resulted in two articles on Habré:
Canvas to GIF in Javascript
Optimize knockoutjs for dynamically adding and removing templates
If anyone has any more questions related to the implementation of what the generator of sprites can do, then I will be happy to answer.
There is also an offline version for Windows. It is a shell on Awesomium into which web files are simply inserted. But in fact, I had to work to get all the functions in this shell. So I can share this experience.
What's next
The development process can be monitored on smartprogress
Now I am working on integrating the editor with the server, for more convenient saving of results. Ideally, by pressing a single button, all sprites and styles will be updated on the site being edited.
Unfortunately, for half a year, almost no one began to use the program. Therefore, I demonstrate the program to the community to get your opinion on the usefulness of this product.
I only assume for now that very few people use sprites in principle. For example, over the past 5 years I have only made one site like this for my friends. Real customers now do not pay attention to it.
Therefore, it is difficult to say what will happen next. If people like the idea of ​​the program, then it will develop. If not, then it will either remain as it is, or turn into something else.
In any case, experience is invaluable!
And if I need to create a site with sprites, then I will already have a handy tool for this!
Source: https://habr.com/ru/post/175505/
All Articles