Last week I talked about customizing Self Service and what to consider when attempting to brand Self Service for the company using it. Today I'm going to break down the parts of making the Self Service app in the Casper Suite into a company app store.
Last week I talked about customizing Self Service and what to consider when attempting to brand Self Service for the company using it. Today I'm going to break down the parts of making the Self Service app in the Casper Suite into a company app store.
The Files You'll Edit in the .app
The first step is to get yourself a copy of Self Service.app to play with. Log into your company's JSS and head to Computers > Computer Management. Click on Self Service, and then Download a copy of the app for yourself.
Once the Info window is open, highlight Self Service in the Name & Extension field and rename it what you want. For me, I want Volusion App Store.
Type in what you want (make sure to leave .app) and then click somewhere else in the window to remove your cursor from the Name & Extension field. Viola! Renamed. The title of the app and the title in the Finder and Dock will now show your custom name.
Next comes changing up the imagery. You'll want to have some familiarity with basic photo editing to get this accomplished.
Since this post is already rather long and image-filled, I'll stop here and start up a new post at the image part. Check back for Part Two, where I'll break down creating the in-app imagery, including where to get the login splash image.
Did you find this post useful? Leave me a tip!
💖
The Files You'll Edit in the .app
The first step is to get yourself a copy of Self Service.app to play with. Log into your company's JSS and head to Computers > Computer Management. Click on Self Service, and then Download a copy of the app for yourself.
Find it on your computer (usually the Downloads folder) and unpack the .tar file by double-clicking (or get fancy and unpack using the Terminal, but you don't have to). Right click on the .app file and choose Show Package Contents.
Once the .app file is open, you can check out the goodies inside. Here are the files you'll want to take note of inside the .app package:
Info.plist is where the basic information on what the app is, what it's called, and what it's designed for is stored. This is the file you'll edit to change the task bar name of your app.
jsLogo-SelfService.png and jsLogo-SelfService@2x.png are the status bar logo files that sit at the top of the Self Service app. By default they are the JSS logo. You'll be putting together a tiny version of your own logo to replace them. The sizes are 42x42 pixels (jsLogo-SelfService.png) and 84x84 pixels (jsLogo-SelfService@2x.png).
Self Service.icns and Self Service@2x.icns are the Dock icons. You'll want something a bit more interesting than your logo for this. Something in a container, maybe a square or a circle. If you're not comfortable coming up with your own images, reach out to someone that has design experience at your company. If you're like me and work at a SaaS company, you'll have a whole crew of UX Designers. And if you're lucky, they'll make something up for you. The sizes are 128x128 pixels (Self Service.icns) and 512x512 pixels (for Self Service@2x.icns). .icns files are a little more involved than a simple .png file, but fortunately there are free services out there like iConvert that will help create .icns files out of other image formats.
Here are what the larger size images look like, for your reference.
Renaming the .app
Now that you have a .app file ready to poke at, let's start with renaming the .app file. Go back to Downloads, or wherever your downloaded .app file is, and click Command-i to Get Info (I find this more consistent then trying to double-click so perfectly that the name change operation in the Finder triggers).
Type in what you want (make sure to leave .app) and then click somewhere else in the window to remove your cursor from the Name & Extension field. Viola! Renamed. The title of the app and the title in the Finder and Dock will now show your custom name.
Next comes changing up the imagery. You'll want to have some familiarity with basic photo editing to get this accomplished.
Since this post is already rather long and image-filled, I'll stop here and start up a new post at the image part. Check back for Part Two, where I'll break down creating the in-app imagery, including where to get the login splash image.
Did you find this post useful? Leave me a tip!
💖
Write a comment
Post a Comment