iOS 8 Mobile App Design: UI & UX With Adobe Photoshop (2016)

Discover how to source and install fonts from 1001freefonts, download and extract fonts, and apply them in Photoshop for mobile app UI/UX design.

Discover where to download Adobe Photoshop from official sites and explore free trial and purchase options. Sign in or sign up to start practicing basic Photoshop operations.

Norris guides you through essential Photoshop designer tools, including the move tool, rectangular marquee, selection techniques, brush, paint bucket, pen tool, type tool, and shape tools, color, and zoom.

Use the standard iOS 8 document size in Photoshop by starting a new file at 1242x2208 pixels, with R.G. color, 8-bit, and a transparent background.

Build the Instagram loading screen in Photoshop by sourcing the logo, creating a left-to-right gradient from orange-brown to blue-purple, and configuring a 1200 by 2200 pixels, 400 dpi, transparent canvas.

Save your designs as PSD and PNG files by using the save command, naming the file (for example, loading screen), and choosing PNG to minimize quality loss during transfers.

Learn to design the Instagram login page by applying gradients, managing layers, and aligning text and shapes with guides, rulers, and the pen tool.

Explore how color choices distinguish login elements, emphasize interactive areas, and guide typography and the Facebook logo using guidelines and snapping to craft a cohesive mobile interface.

Create the sign up screen for an Instagram-like blog page in Adobe Photoshop by centering text, adjusting layout, and applying logo color changes with keyboard shortcuts.

Create the direct icon for Instagram by forming a long blue rectangle with a rounded inner shape in Photoshop, using guides and color tweaks, and convert to a smart object.

Learn to build a profile picture in Photoshop by creating a white rectangle, placing and resizing a reference image, and adding the profile name with precise alignment.

Assemble the clock icon by zooming in and using shape tools to align the inner circle, duplicate elements, and set white and gray colors for a clean, scalable Photoshop graphic.

Design the photo area and like icon in Photoshop, resize the image, create a wide bar, add text and hashtags, and position the like icon.

Trace a heart icon with the pen tool, dragging to bend curves and form the shape, then adjust proportions, position it precisely, and finalize its appearance.

Duplicate layers to create the heart icon and speech bubble for the home screen, then apply color, shapes, and layer styles for the comment, like, and report buttons.

Learn to design a universal home icon for the navigation bar by tracing with the pen tool and aligning guidelines for symmetry and accurate curves.

Create a search icon by framing five bottom navigation boxes with vertical guidelines, then build a magnifying glass from two circles and a rectangle, refining with color overlay and layers.

Design the upload icon by building rounded rectangles and circles, applying color tweaks, a drop shadow, and blending options, then merge the layers and name the final icon Apollo.

Create an activity icon by vectorizing shapes, combining a white circle, a pointy triangle, and a heart, then align and refine with guidelines for a clean result.

Design a profile icon by shaping a rounded rectangle with a white oval using guides, adjust position and ratio, merge layers, and name the file to complete the home screen.

Organize and finish your iOS app design by grouping the navigation bar into clear folders, renaming groups, arranging tabs, and removing excess layers for a clean, cohesive UI.

Develop the search screen by building the top search bar, adding a magnifying glass icon, and drawing subtle guidelines and lines for precise layout in Photoshop.

Create the photos section by constructing rectangles, using the eyedropper for color, and applying guidelines to position photos and people with consistent color and spacing.

Create the crop picture portion of the search screen by placing photos in thirds with guides at 33.3% and 66.6% in Photoshop, then save.

Create the people section of the app UI in photoshop by designing the profile picture area, like button, color schemes, and labeled layers, using a reusable template.

Design an Instagram-style like button in Adobe Photoshop by creating a rounded rectangle, adjusting color and opacity, duplicating and rotating elements, and aligning with guidelines.

Refine the photo edits by adjusting, tracking, and aligning remaining images to complete the project. Save the people section without overwriting earlier work, ensuring all elements are finalized.

Create the following screen by building the navigation bar, activity bar, and white area using guides and proportions in Photoshop, adjusting color and text for balance.

Learn to build a profile section by creating a circular profile picture, typing the name, and adjusting size, color, and overlays to align text and imagery.

Design the you screen icons for the activity tab using rounded shapes, blue drop shadows, vectorize and trace paths, and rotate duplicates.

Create the followed tab by designing vector shapes, tracing outlines, and refining rounded forms, while adjusting color, opacity, and layers to finalize the UI in Photoshop.