Navigation Menu+

How to change the colors of the Mac App “Notes”

Posted on Aug 25, 2014 by in Blog | 0 comments

How to prettify Mac “Notes” | Mac OSX Hack | “How to” Project.

If you’ve ever hated that ugly yellow color the default Mac Notepad comes in, go to the “How To” tab above to see what you can make it look like.

Approx. (+ or -) 20 min.

Skills:

Basic Mac computer skills, i.e. know your way around your Mac.

Software:

Basic image editing software such as Adobe Photoshop or even Mac Preview will work.

Optional Files Download:

Download color customizations used in this tutorial. Download includes all original Mac color files, new PSD files, and new PNG files necessary to customize Notes app to the colors shown in this tutorial. The original files are included as a back-up in case you want to revert the app back to its original colors. Download Zip File Now. (3.1mb)

What you will be creating:

Before and After

Changing the color of the notepad in the Mac app “Notes” is easier than you might think, and really, no special skills or software is needed. Photoshop can be used for those experienced with the program, but if you don’t have experience with Adobe Photoshop, Mac “Preview” will work just fine.

Locate the Notes.app

1. Locate the Notes App by clicking on Finder/Applications/Notes.app and highlight Notes.app with the mouse pointer. Right click on Notes.app and select “Show Package Contents” from the menu.

2. Once inside the package contents go to Contents/Resources/ . This is the folder where all of your changes will be located.

3. The files you will be changing, are: (for now just make a mental note)

    fullscreen-stack-left.png, fullscreen-stack-left@2x.png, fullscreen-stack-right.png, fullscreen-stack-right@2x.png, padheader-left.png, padheader-left@2x.png, padheader-middle.png, padheader-middle@2x.png, padheader-right.png, padheader-right@2x.png, paper-torns.png, paper-torns@2x.png, paper.png, paper@2x.png, shadow-corner-bottom.png, shadow-corner-bottom@2x.png, shadow-corner-top.png, shadow-corner-top@2x.png, shadow-corner-right.png, shadow-corner-right@2x.png, share-glyph.png, share-glyph@2x.png, stack-left.png, stack-left@2x.png, stack-middle.png, stack-middle@2x.png, stack-right.png, stack-right@2x.png, toolbar-leather.png, toolbar-leather@2x.png, trash-glyph.png, trash-glyph@2x.png

Create a Project Folder

4. Create a project folder somewhere on your hard drive to hold all of the “original” files, along with all of the changed files, we will create. I created a new project folder in my Documents, and then created 2 separate folders inside of that. One named, “originals”, and the other named “my”. You can name them whatever you like, just so long as you don’t get the two confused. The originals will serve 2 purposes. 1) As the file to start from, it will be the image that we will change. and 2) They will be saved as back-ups should you ever need or want to “revert” your Notes app back to it’s original colors.

Export the Originals

5. Once your project folders are set, go back into the finder, into Notes.app/Contents/Resources, and one at a time export the images in the above list, to your newly created “originals” folder. To do this, double click the file (eg. paper.png) and it will open in Mac’s Preview.app. You will notice Preview shows the file as locked. This is because it is a system file. Within Preview, go to File>Export from the main menu. In the pop-up dialog, make sure to keep the same filename as the original, and only change the location we are saving to (e.g. our newly created originals folder in my Documents), and click save.

Edit the Exported Originals

6. Once all the original files are exported in this way. You can begin editing them. We will be editing the originals we exported. In finder, locate your “originals” folder, and open the files in either Adobe Photoshop or Mac’s Preview.app, and edit them one at a time. To do this in Preview, double click the file (eg. paper.png), and once opened in preview.app click Tools>Adjust Color from the main menu. Play with the color controls until you find a color and shade you like. If you are experienced with Adobe Photoshop, you can customize these files any way you like, and then follow the rest of the directions below.

Save Edits to a New Location

7. When you are done editing each file, save your file inside the “my” folder. Make sure not to save over the original in the “originals” folder, and when saving, make sure it still retains the original filename. (eg. paper.png will still be paper.png – the only difference is, one is the original unchanged file saved in your “originals” folder while the other is your color edited file saved in your “my” folder.) This way the originals in the “originals” folder will all still be in tact and saved for later should you ever need or want a back-up.

Copy Edits into Notes.app and Authenticate

8. Highlight all the changed files in your “my” folder, and right click to copy them. Now go back to the apps Content/Resources folder, and paste all the copied files into that folder by right clicking on the “Resources” folder and choosing paste. A dialog box will pop up asking you to enter your password. Enter your password to authenticate the file copy.

9. A new dialog will pop-up alerting you that there already are files in that folder with the same filename. It will give you a choice to Keep Both, Stop or Replace each file. Check “Apply to all” and Choose Replace.

And thats it! Close Notes.app if it is already open and re-open it. You will see your changes immediately once the app re-opens.

Using the Downloaded files

If you would like to just use the downloadable files available on the previous tab, simply download the .zip file and save it in a safe place on your computer. It already contains the two folders named “originals” and “my”. Unzip the folder and locate the “my” folder. Copy all the .png files in this folder and paste them into the Notes.app/Content/Resources folder, enter your password, and “Replace” all files at the prompt.

Restoring the Originals

Should you ever want to revert the app back to its original color state. Copy the original .png files from the “originals” folder and paste them back into Notes.app/Content/Resources, enter your password, and choose “Replace” when prompted. Close and re-open Notes.app and wallah, back to normal!

A Neat Trick

If you want to keep both color versions of Notes, simply right click on the Notes.app and choose duplicate. You can name this app anything you want, and perform your customizations on the new app while keeping the old one too! Enjoy!!

How to prettify Mac App Notes

Submit a Comment