There are many ways in which you can go about designing or redesigning an app. There are many designing tools available online using which you can do this. However, for precise designing in vectors, Photoshop is one of the best tools you can use.
Using Photoshop, you will be able to design your app so that it is clear and well organized. This is especially true if you want to design an app for Mac. As you read ahead, we have discussed the way in which you can appropriately use Photoshop to design a document managing app for Mac.
We have discussed the various elements you should pay attention to. These include the background, the content area, toolbar, sidebar, and switching tabs, among others. You will also learn how to create an avatar so that comments can be linked to an identity.
There are several tips and tricks that can make designing an app for Mac, easy, and fun. Read ahead to find out.
Table of Contents
Designing a Mac App
If you want to design or redesign an app on a Mac, Photoshop can be a great option for doing the same. If you are redesigning an app on Mac, there are a few elements you may want to pay attention to.
If it is an interactive app, look at the comments section. This becomes even more crucial if the work on an app is associated with shared efforts and many people access the same documents. By using Photoshop, you will be able to create a much more interactive and easier interface for an app on Mac. Having an app business plan template can also help streamline the design process and ensure comprehensive planning.
Background
(Source : Google Images)
Once you are on Photoshop to design or redesign an app for Mac, you will have to pay attention to the background. For Mac, you can set a background that is 1000 pixels wide and 1200 pixels tall.
If there is a background you have previously used for a Mac app or interface, you can go ahead and bring this into this document. It is a good idea to use gradient overlay to design such an app as it then comes in vector form and can be scaled up to be redrawn into any design you fancy.
Frame
Your application will need a frame so that it can contain the interactive surface of the app. You can begin by drawing a frame using the shape tool. Using the color picker, fill it in with any color, say white.
You can change it to other variations like off-white later on. You can then use the pen tool and option keys to create a header. Drag the lower ends of the header to the appropriate height. You can fill this header rectangle with a light grey color to differentiate it from the rest of the white frame.
Sidebar
Another element of an app in the sidebar. You can use, say, a light blue rounded rectangle shape to make a vertical rectangle. You can place it towards the right side of the design for Mac. You can pick a sort of blue-grey for this sidebar as it will blend in with the blue background, white frame, and the grey sidebar just right.
Replicating Buttons
There are a few parts on a Mac screen that you won’t have to wholly recreate. Instead, you can go ahead and copy and paste the mac screen to Photoshop. You can use Command J to take a few of the elements and add them to the header as it is.
You can also use this with gradient overlay so that the color of the header is the same as the background color that is used in a Mac header. You can then use Filter and Noise to be able to add some noise to the header.
(Source : Google Images)
When you copy and paste the buttons you require onto this header, you may notice that the edges are not well blended, and the buttons may stand out. You can use a brush with the header color and use a soft setting to move around the buttons so that the colors blend and look good on screen.
With this, you should have your basics in place.
Adding a Text Box
Another element that should be added to your app is text. You can begin by drawing a text box to do the same. You can copy and paste the text you like. Pay attention to the font type, size, height, and any other settings so that you can replicate the text again if you have to.
You can also add a heading to indicate the name of the document. For this, you can add a different font type, size, and height if you like. A darker and bolder font is a good idea.
You can then select the text layer and the heading layer and use the alignment tools to align them. For instance, you can align them center if you prefer. Make sure to save your work periodically.
At this point, you will also have several layers open. Cleaning up these tabs will keep your workspace organized and tidy. Pick the layers you want to be grouped and create a group out of these. For instance, you can use all layers used to create the header and group it into the ‘header’ group.
Adding Editing Tools
If you are designing an app that helps you manage documents, you will want to dedicate an area to editing tools. You can make this just above the content you have created. To do this, you can use a rounded rectangular shape tool with a radius of about 3 pixels. Draw a rectangle above the content.
(Source : Google Images)
You can use a white fill for this rectangle. To differentiate it from the background, you can add a stroke on the inside of about 1 pixel. You can then use lines to differentiate between each tool on this toolbar.
Color the inside of each rectangle in different colors. Once you fill in the first rectangle and line, you can duplicate both layers and place them several times for uniform boxes for each tool in this toolbar.
(Source : Google Images)
For a document manager, you will need tools like Bold, Italics, and Underline. You can add a bold B in a font of your choice for the Bold tool. For the Italics tool, you can add an italicized I in the same font type and size as the B in bold.
You can then add an underlined U for the Underlined tool. Use the same font type and size as the other options. Use a marquee tool around each of these letters and use the center alignment option to center them.
You can then bring all of these layers under a single group and name them appropriately. You can replicate the same toolbar and then replace the letters with alignment tools. Use about 5 lines in each box to make left, right, center, and justified alignment tools.
(Source : Google Images)
Align each set of lines using a marquee tool and the alignment tools on Photoshop. As you work on these alignment tools, you may find the need to resize them. Ensure that you don’t resize two different line sizes simultaneously.
This could result in half pixels and blurry lines, which you want to avoid. You may also want to create a tool for the font and the font size that users will employ in the document. For this, you can duplicate the old toolbox and then replace it with just one divider line.
The left side can have more space so that it can accommodate the name of the font. The right side can be a smaller rectangle for an arrow. This will indicate that it is a drop-down menu.
For the arrow, you can create a rectangle shape and rotate it so that it faces you like a diamond. You can then use a pen tool to bring the upper part down so that it now looks like a triangle pointing downwards.
Color Picker
(Source : Google Images)
An important part to add to the toolbar is a color picker. You can duplicate the font type bar for this and move it next to the original one in the toolbar. You won’t need a divider line for this. Center the triangle in the box and add a given color, say red, to be the background.
You can use layer styles to add a stroke and an inner glow here to remove blurred edges and add a nice double line around the color picker.
Other Formatting
You can then go ahead and duplicate the Bold, Italics and Underline bar to now replace it with bullet points, numbering, and for bulleted points, you can create 3 dots of 3 pixels each and accompanying lines.
You can use Command J to copy this and replace the bullets with numbers for the numbered list. You will have very few pixels to work with here. By darkening the numbers and experimenting with fonts, you will be able to pick the right bulleted point.
Designing a Sidebar for a Mac App
One of the crucial parts of an app is a sidebar. This is especially true if your app is a document manager. You have already created an area with a background color for the sidebar. You can now adjust the width of this sidebar depending on the content to the left side.
You can begin by creating a group called the sidebar where all the corresponding layers will sit.
Comments
If you are creating a sidebar for an interactive app, like a document manager, you want to create a comments tab. You can begin by drawing a rounded rectangle for the comments. You can set a radius of about 5 pixels for the same.
You can name this rectangle the Comments layer. Place this at the top of the sidebar. Double click on the comments layer so that you can work on the layer styles. You can first begin by creating a stroke of a similar shade but slightly darker.
You can make this stroke of about 1 pixel. You can also go ahead and add a drop shadow of 90 degrees at 1 pixel. You can also drop the opacity, add an inner shadow, and you can then add a text box inside this comments section.
Make the text box such that it does not sit too close to the edges. Adjust the font, font size, and line-height as you like. You can now scale the comment box to fit right around your text.
Meta Details
Once you are done with the comments, you can add some meta details to your sidebar. This could be an avatar. This would link the comment to the person who is commenting. To draw the avatar, you can begin by drawing a circle.
You can select a color for the circle that is slightly darker than the background color of the sidebar. You can add a white stroke to the same to differentiate it from the background. Add a drop shadow and drop down the opacity to get an avatar you like.
The avatar can go ahead and hold the initials of the person commenting or even their photo. You can begin by choosing a photo for creating the design. It could very well be yours. Drag the photograph into Photoshop.
Scale the photo down and position it over the avatar. Name the photo layer ‘photo’ and the avatar layer ‘photo frame.’ In the layers tab, hold Option and click between these two layers. This should bring the photograph into the avatar frame.
You can now move it around to position it as you like. Next to this avatar, you can use a text box to add your name. You can use a font and font size you like, and that is compatible with the rest of the sidebar and the Mac app.
You can then add some text beneath your name. For instance, this could indicate the time when the comment was made. It can be indicated in the exact time or through the text like ‘3 hours ago.’ You can create this as per your design sensibility.
You can change the font and font size of the time text to a lighter color and not bold so that it does not overpower the name. You will have to note that this sidebar will most likely have a lot of comments. Hence, you may want to ensure that the user knows that a certain comment belongs to a certain avatar.
You can do this by using an arrow. You can use layers styles to draw a rectangle and then rotate it to face you like a diamond. You can keep half the diamond below the lower line of the comment box so that it drops down below, pointing to the avatar.
In the end, you should have a comment box that looks like a dialog box pointing to the avatar and tying the comment to it.
Replies to Comments
If comments are enabled in the app, you may also want to design a reply section. To do this, you can group all of the elements of the Comments sections into a group and call it ‘Comments.’ You can now duplicate this.
Set it on the right side of the sidebar and make sure to insert it so that it is not aligned with the original comment box. The idea with this is that it should look like a reply. When you design, it is important to design different use cases to account for all comment lengths that a user may write.
Hence, for the reply, you can design a box that holds just a single line of text. Using your pen tool, command, and shift, you can resize the comment box for the reply to make a one-liner reply. You can change the name and image on this reply avatar so that it represents another person.
Do note that with this design, your app will be currently able to accommodate more than a single user on the same interface. Depending on the number of users the app can finally accommodate, you will have to use your design sensibility to make an interface for the same.
Change the time under the reply avatar accordingly and pull it all together so that it sits well. If the person replying does not have a photograph handy, you can look at the Glyphish icon set for a user icon.
(Source : Google Images)
You can insert this into the avatar frame. You can also go ahead and use initials if you like. You can add layer styles, a drop shadow, inner shadow, and reduced opacity for the same. You can now move around all of the layers to position the comments and the replies just right.
At this point, you may also find some overlapping shapes that look unsightly. You can use the ‘Layer Mask Hides Effects’ option, and you will be able to blend these harsh lines to make the design look good and blended.
You can begin by creating a new group called Content. This area will help with the organization of the document that is being worked on. You can include headings like ‘Draft,’ ‘Chapter 1’, and a subheading inside Chapter 1.
All of these can be aligned so that they flow from the left to the right, like steps depending on the hierarchy. You can add variations to your text and a few icons. From the Fugue icon set, you can use icons like a book, folder, and the like.
(Source : Google Images)
Create a bar around the part of the content that is active at any given moment. This will be the selected content. Use layer styles to define the same. You can add an arrow next to the chapter key and then duplicate each chapter header down to add multiple chapters in the structure.
Tools to Track Statistics
In any app where you are required to type, it may be very convenient if there is a tool that will track statistics like the number of words you have written down. These guide you in writing better throughout the document.
You can begin by creating a group called statistics in the content folder on your layer tab. You can draw a line to differentiate the rest of the content area from the statistics area. You can call the area statistics.
Just next to it, you can type ‘Words.’ This area will track the number of words in the document. For design purposes, you can enter any random number you like, say 387 or 350. You can then add the word ‘Characters’ after a little space and add a random number to the same.
Play around with the font type, size, and color so that you have a statistics area that looks just right to you. Formatting the text here is also a good idea. For instance, you can make the word ‘statistics’ all caps and then use a grey to make it stand out just enough.
The other text can be a darker grey or black as this is where the eyes of the user will most likely be. Align the text well so that they all look well-centered in the statistics area.
Header
You can add a line just under the header to create a crisp look on the interface. In the header area, you can add text like ‘new comments,’ ‘New Folder, and ‘New Document’ on the header. You can add either Fugue or Glyphish icons to match these text bits.
The principles of logo design can also be taken into consideration when designing a header area.
Copying Elements from Mac
You can go ahead and bring elements from Mac on the header without having to recreate it. For instance, this may be the finder window. You can use Command + Control + Shift + 4, which allows you to take a screenshot and save it to your clipboard. In case the device freezes, wait a bit. If the issue persists, check how to force quit on Mac when frozen.
Redraw a rounded rectangle over each button on this finder window when you open it in Photoshop. Use stroke and inner shadow to replicate this. Play with textures and layer masks to get the right look.
Tweak the gradient and the like to get it just right. In one of the icons, you can use your pen tool and anchor points to create a comment box. You can name this layer the comment icon. Similarly, you can create a new document icon and a new folder icon for the respective options on the header. You can do the same by using pen tools and other anchor points. For the new document icon, you can use the same to create a page turn.
You can then center and align the icons and the names so that they appear aesthetic and organized. At this point, you may want to clean up your layers well and group them in the layers tab so that any final adjustments can easily be made.
Add a plus sign before each of these icons in their box. This suggests that each of these will let you add a new document to the body. Tweak any final additions you may want to make, and your application is done.
Endnotes
If you are designing or redesigning an app for Mac, the best place to begin is by taking note of the layout of other Mac apps. Pay attention to the general icons and header as these can be easily copied and pasted into Photoshop.
(Source : Google Images)
It will only take some minor reworking for these to be copied onto the new app that you are created. In the above directions, we have looked at how you can create a file and document manager for Mac. Through this, you will be able to design icons, sidebars, use anchor points and layer styles.
You can take this knowledge and apply it to any other apps you may want to design on Mac. Make sure to name your layers and group your content, and you should be good to go.
Other Elements
There are a few other elements that you will have to add so that the app can be complete. Read ahead to find out.
Document Name
This can be added to the header area. Choose a font type and size of your choice and center it in the header.
Switching Tabs
You can create these towards the end of the sidebar, and they will let you switch between content and the comments. You can use layer styles and Layer Mask Hides Effects to make this area sit well with the rest of the sidebar and the content area.
(Source : Google Images)
You can add gloss using color stops for a three-dimensional look. You can place the ‘comment’ and ‘content’ text in this area and add icons from the Fugue icons set. These will look good on a Mac app.
You can use the colorize option to bring the color on both icons to be similar. A divider line with a drop shadow will separate the two tabs just right. You can drop the opacity of any one tab by 50% so that it appears like the other tab is selected.
Have you considered hiring a graphic design service to take care of all of your design needs? Here’s our unlimited graphic design cost structure – how much could your business save in design costs?
