How to replace Community Server Paperclip blog skin's top image
Some buddies ask about the steps I followed to change my top image for Community Server 2.1 Paperclip blog skin. I'm not a designer at all but will share steps I followed here. All applications I used were Windows Paint and Office Picture Manager and I guess they're all available on every machine.
Paperclip skin is designed by Ben Tiedt (hope I could remember build notes correctly) but he hasn't provided original image files with it. You see it has some white margins on right, left, top and bottom plus a gray margin and top and they're not implemented by CSS and are parts of image. One simple solution to replace top image, located at $/Themes/Blogs/Paperclip/Images, is to find its size (804×221 pixels) and resize new image and upload it there but this won't have a good look. To have a beautiful look you need to choose a good picture and implement those margins as well. Most of things I did to reach to above image were some simple mathematical calculations and since I'll provide them here, you don't need to do them again. Before anything you should choose one of five different Paperclip skins to customize its image.
- First I found the size of Community Server Paperclip top image: 804×221 pixels.
- Then opened my Microsoft Office Picture Manager and cropped this image to keep right white margin, also left white margin to find their width: 5 pixels.
- Again, I cropped my image to keep bottom and top white margins to find their height: 4 pixels for top and 1 pixel for bottom.
- The last calculation was to find the height of top gray margin with cropping technique: 10 pixels.
Note that you can use your application's ruler if it has this feature instead of cropping your images. I don't know if Office Picture Manager has it or not but I used cropping technique without saving (God has created Undo for us!).
After finding these values I subtracted all margins from original image to find main image's size: 794×206 pixels. Then I resized my own image to this size and saved it and went to Windows Paint, opened Paperclip original top image, used "Paste From ..." option from Edit menu to choose my new image and imported it to design surface. Then tried to align it correctly on previous image to cover it. Don't forget bottom's 1 pixel margin when you're putting new image.
Last step was to remove the remained parts of clip image at top left. To do this, First I zoomed on my new image in Windows Paint then used Pick Color tool to find the color of those two top margins (one is from White colors family and another is Gray). Using this tool and another Brush tool, I filled that clip image with new colors and got what you see.
Actually I didn't implement all these steps but if you want to get the best result, can do them. More important than these changes is choosing a good picture with good colors.
[advertisement] Axosoft OnTime 2008 is four developer tools in one: bug tracking, project wiki, feature management, and help desk. It manages your development process so developers can focus on coding. Installed or Hosted – Free Single-user license -- Free 30-day team trial.
3 Comments : 07.21.06
#1
Thomas Freudenberg's Blog
08.02.2006 @ 7:18 AM