On Monday I talked about the concept of branding Self Service, and what you would need to look for within the Self Service app to brand it. Today, I want to talk about pictures.
On Monday I talked about the concept of branding Self Service, and what you would need to look for within the Self Service app to brand it. Today, I want to talk about pictures.
I'm lucky; I work for a SaaS and our logo is everywhere. This made finding logos to use for branding super easy. If you work for a school or other organization, you probably have easy access to branding material as well. Ask someone in HR if they have copies of logos handy in digital form for you to use.
I started with step 2, as they were .png files and that seemed the easiest to handle. Make sure they're a .png with a transparent background! Here are my images and the default images side by side:
Your images and the default images need to be the same size and the same name. Save a copy of the original versions in a folder, and rename them something close but noticeably different for ease of comparison. I just put ORIGINAL at the end of the file name (not very creative, but effective).
Once you have the images created that you want, you can drag them into the Package Contents of your renamed Self Service app.
Next is the app icon itself. Again, I had an easy time finding something to use.
Ideally I would have had something bigger than 256 to work with, but I just needed something bigger than 128 (the standard application/icon size) and crisp/clear in quality. Once I had a .png ready I downloaded this tool and created a .icns file from it and renamed it Self Service.icns.
I then made a copy of the same file and called it Self Service@2x.icns. As you can see below, both versions are needed (the @2x would logically be a bigger version, but I cheated this a bit).
I saved copies of the originals in a different folder, then replaced them with my new one. To make sure that new Volusion logo would be everywhere possible, I copied my .icns logo:
Then right-clicked and chose Get Info (or Command-i) on the Volusion App Store.app package and replaced the logo there. How? I just clicked on the little logo in the top left corner, and pasted my image in. Easy as that.
The other main image that is important to update is the login splash image that shows up in the Self Service app itself (step 3). This is located server-side on your JSS server. We host our JSS clustered environment on two Mac Mini Servers, so to find the location of the login.png file I had to go into the Apache Tomcat folders and grab the original there. This will also be where the file you want to ultimately use needs to be saved.
/Library/JSS/Tomcat/webapps/ROOT/images/selfservice2/login_files
Once there, you'll see a file for you to copy and edit:
I opened it up in Photoshop and used layers to just create new imagery over the old.
I saved a .psd copy so I could alter it later. I then did an export for web to create the .png file (still called login.png) that I then saved back in the Tomcat settings on the server. Since we're running a clustered environment, I took some precaution and saved it in both servers.
And then, voila!
Now the Self Service app looks totally in-house and customized for the company. Why shouldn't it?
I'm lucky; I work for a SaaS and our logo is everywhere. This made finding logos to use for branding super easy. If you work for a school or other organization, you probably have easy access to branding material as well. Ask someone in HR if they have copies of logos handy in digital form for you to use.
I started with step 2, as they were .png files and that seemed the easiest to handle. Make sure they're a .png with a transparent background! Here are my images and the default images side by side:
Your images and the default images need to be the same size and the same name. Save a copy of the original versions in a folder, and rename them something close but noticeably different for ease of comparison. I just put ORIGINAL at the end of the file name (not very creative, but effective).
Once you have the images created that you want, you can drag them into the Package Contents of your renamed Self Service app.
Next is the app icon itself. Again, I had an easy time finding something to use.
Ideally I would have had something bigger than 256 to work with, but I just needed something bigger than 128 (the standard application/icon size) and crisp/clear in quality. Once I had a .png ready I downloaded this tool and created a .icns file from it and renamed it Self Service.icns.
I then made a copy of the same file and called it Self Service@2x.icns. As you can see below, both versions are needed (the @2x would logically be a bigger version, but I cheated this a bit).
I saved copies of the originals in a different folder, then replaced them with my new one. To make sure that new Volusion logo would be everywhere possible, I copied my .icns logo:
Then right-clicked and chose Get Info (or Command-i) on the Volusion App Store.app package and replaced the logo there. How? I just clicked on the little logo in the top left corner, and pasted my image in. Easy as that.
The other main image that is important to update is the login splash image that shows up in the Self Service app itself (step 3). This is located server-side on your JSS server. We host our JSS clustered environment on two Mac Mini Servers, so to find the location of the login.png file I had to go into the Apache Tomcat folders and grab the original there. This will also be where the file you want to ultimately use needs to be saved.
/Library/JSS/Tomcat/webapps/ROOT/images/selfservice2/login_files
Once there, you'll see a file for you to copy and edit:
I opened it up in Photoshop and used layers to just create new imagery over the old.
I saved a .psd copy so I could alter it later. I then did an export for web to create the .png file (still called login.png) that I then saved back in the Tomcat settings on the server. Since we're running a clustered environment, I took some precaution and saved it in both servers.
And then, voila!
Now the Self Service app looks totally in-house and customized for the company. Why shouldn't it?
I uploaded the modified login.png to the JSS but it does not load. Did you have to do anything special for it to show up?
ReplyDeleteWe have two JSS's so I made sure to change the image in both places. It may be possible that the image is cached on the machine you're using to test, so try another machine or maybe restart/do a DNS flush? It may take a while for your Self Service app to cache the new bg image.
ReplyDeleteI was just testing on a second machine when you replied and it worked. Thanks for your guide. It was great!
ReplyDeleteHappy to hear it!
ReplyDelete