What's new
FreakWeb - download addons , styles , themes , xenforo , ips , ipb , phpbb , smf , wordpress

Register a free account today to become a member! Once signed in, you'll be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

How to create custom node sprites

Nicutzy

Administrator
Staff member
Administrator
Joined
Jan 24, 2019
Messages
346
Points
18
This tutorial explains how to create custom node sprites.
If you want to know how to configure custom node sprites, check out tutorial "How to setup custom node sprites".

What are node sprites?
Here is a sample of category where you can see one forum with new posts, one forum without new posts, one page node and one link node:

392
There are 4 images:
  • Read forum
  • Unread forum
  • Page
  • Link
Link image is used for nodes with node type set to link. Page image is used for nodes with node type set to page. Other node types (categories, forums) use one of first 2 images, depending on node state.
Node sprite is one big image that is composed out of 4 images representing all 4 possible states of that node. Example:

393
As you can see, that sprite has 4 images:
  • Icon for read forum
  • Icon for unread forum
  • Icon for page
  • Icon for link
That is node sprite. It is one image that is used instead of 4 separate images.
Why not use 4 images instead? Because images are small, loading one sprite image is usually faster than loading even 2 small images.

Sprite dimensions
Default XenForo sprite size is 144x36 pixels.

Each image in sprite is a square. It has same width and height. Default is 36x36. Therefore 4 images combined make total width of sprite image 36 * 4 = 144
Some styles support high definition node sprites. For example, node sprite shown above is a high definition node sprite. It is 2 times bigger, while maintaining same width/height ratio: 288x72 pixels.

How to combine images
To create custom node sprite, make blank image 144 pixels wide, 36 pixels high (or double/tripple of it if you want high definition sprite).
Split image in 4 equal parts. In software like Adobe Photoshop it is easy to do using guides feature.

394

Put different images in separate parts. Make sure images do not overlap each other. Order of images is the same as listed above.

If you are planning to use node sprite only for nodes of specific type, you can skip images not used by those nodes. For example, for forums and categories you do not need page and link images. That means you can leave last two parts of sprite image empty. Do not remove unused parts of sprite, those parts must still be there, just leave them empty.

Saving sprite
Next save your sprite. To save it in Adobe Photoshop navigate to File -> Save for Web.
In preset field select "PNG-24", make sure transparency box below it is checked:

395

High definition sprite images
You might have noticed that screenshot above has arrow pointing to image size field. Values are set to 288 and 72, which is twice bigger than normal node sprite. That is because sample shows high definition sprite. Screenshot above shows how how definition sprite is created.

If you make a high definition sprite image, you do not need to make separate image for standard displays. Save high definition sprite, then open "Save for Web" dialog again. Change width to 144, height should automatically change to 36. Click "Save" again and save file.

That's it. Now you have two images: 288x72 high definition sprite and 144x36 standard sprite.

How to assign custom sprite image to forum node
To find out how to assign custom node sprites to forums, check out tutorial "How to setup custom node sprites".​
 
Top