NEW Android + iPhone 13 Screens Mockup Share : Complete Step by Step

Get Started | Login

Discussion Forums > Suggestions, Ideas, Wish List

Replies: 7 Views: 119

EdReyes Lost but trying Posts: 574 Reg: Oct 21, 2013 location unknow... 17,640	confirm \| cancel 02/25/14 04:49 AM (10 years ago) NEW Android + iPhone 13 Screens Mockup Share : Complete Step by Step NEW : I get request to make a Android Version of this Mockup, it's difficult since there are many devices + many screen resolutions. Anyway I figure what's really needed is to add a popular Android device in the hand swapping out the iPhone one. I kept the resolutions the same, so just follow the existing instructions below. Hope this helps everyone or at comes in handy for client presentations, ever little bit helps. As promised from this thread: https://www.buzztouch.com/forum/thread.php?tid=45B93FD6A0184A18E84713D&currentPage=1 Based on this Mockup: https://www.dropbox.com/s/lvu6qn96eolu5vq/BuzztouchPlugIns.jpg I cleaned it up and organize each layer for customization: iPhone - https://www.dropbox.com/s/2bxr1hbowub5es4/iPhone%2013%20SCREENS%20MOCKUP%20wBUBBLES.jpg Android - https://www.dropbox.com/s/t3xwu157l6ur84i/Android%2013%20SCREENS%20MOCKUP%20wBUBBLES.jpg ----------------------------------------- Prep 1. UPDATED TO INCLUDE ANDROID HAND IN PHONE AND GOOGLE PLAY BADGE Download the main zip file to any location on your computer and decompress. https://www.dropbox.com/s/uqqze69x8p7ai7x/Android%20and%20iPhone%2013%20SCREENS%20MOCKUP.zip Prep 2. (fonts used is Helvetica and Open Sans, feel free to replace) Opening the folder, select between two Photoshop Versions. Photoshop CC : PS CC - 13 SCREENS MOCKUP wBUBBLES.psd Photoshop CS6 : PS CS6 - 13 SCREENS MOCKUP wBUBBLES.psd No need to edit any of the supporting .psb files. Prep 3. Open the STEP by STEP folder to preview the 18 screen shot instructions or follow instructions below with link to dropbox shared. ----------------------------------------- STEP 1. The Main Layout with Color Coded Layers, Orange, Violet, Green, Red, Yellow, Blue https://www.dropbox.com/s/n8x2qkyu5ownynx/01%20-%20Start%20Here%20-%20Main%20Layout.png STEP 2. Editing 02 - Logo and Client Info - Orange Layer https://www.dropbox.com/s/7iqzcpelg3flah7/02%20-%20Logo%20and%20Client%20Info%20-%20Orange%20Layer.png Step 3a. Editing 03a - QR CODE Text - Orange Layer https://www.dropbox.com/s/4h5o8o4iqxwatpa/03a%20-%20QR%20CODE%20Text%20-%20Orange%20Layer.png Step 3b. Editing 03b - QR CODE Image - Orange Layer https://www.dropbox.com/s/st3furpwpxsvl1r/03b%20-%20QR%20CODE%20Image%20-%20Orange%20Layer.png Step 4a. Editing 04a - iPHONE in HAND Mockup - Green Layer https://www.dropbox.com/s/w9uddjwsuvzpwnw/04a%20-%20iPHONE%20in%20HAND%20Mockup%20-%20Violet%20Layer.png Step 4b. Editing 04b - iPHONE in HAND Replace Screen - Green Layer (violet Layer for Android) https://www.dropbox.com/s/9u6miugel8iwk4z/04b%20-%20iPHONE%20in%20HAND%20Replace%20Screen%20-%20Violet%20Layer.png Step 5a. Editing 05a - App Store Badge - Green Layer (violet Layer for Android) https://www.dropbox.com/s/lp73y1rirhnco5p/05a%20-%20App%20Store%20Badge%20-%20Green%20Layer.png Step 5b. Editing 05b - App Store Badge Edit Gradient - Green Layer (violet Layer for Android) https://www.dropbox.com/s/b46ipr5boi7p6cz/05b%20-%20App%20Store%20Badge%20Edit%20Gradient%20-%20Green%20Layer.png Step 6a. Editing 06a - Callout Bubble - Red Layer https://www.dropbox.com/s/16nm9tmcpx7tp8v/06a%20-%20Callout%20Bubble%20-%20Red%20Layer.png Step 6b. Editing 06b - Callout Bubble Open Smart Object - Red Layer https://www.dropbox.com/s/88qkblhlaipmr5k/06b%20-%20Callout%20Bubble%20Open%20Smart%20Object%20-%20Red%20Layer.png Step 6c. Editing 06c - Callout Bubble Edit Contents - Red Layer https://www.dropbox.com/s/okwixrnkzwqg83d/06c%20-%20Callout%20Bubble%20Edit%20Contents%20-%20Red%20Layer.png Step 6d. Editing 06d - Callout Bubble Complete Edit - Red Layer https://www.dropbox.com/s/v5fp0vdxwraetwc/06d%20-%20Callout%20Bubble%20Complete%20Edit%20-%20Red%20Layer.png Step 7a. Editing 07a - Screens Layout - Yellow Layer https://www.dropbox.com/s/jhti124elbmu7q1/07a%20-%20Screens%20Layout%20-%20Yellow%20Layer.png Step 7b. Editing 07b - Screens Layout Replace Screen - Yellow Layer https://www.dropbox.com/s/d9tyw2er143h81g/07b%20-%20Screens%20Layout%20Replace%20Screen%20-%20Yellow%20Layer.png Step 8a. Editing 08a - Optional Gradient Layer Background - Blue Layer https://www.dropbox.com/s/wy379deomtfzugd/08a%20-%20Optional%20Gradient%20Layer%20Background%20-%20Blue%20Layer.png Step 8b. Editing 08b - Optional Image Background - Blue Layer https://www.dropbox.com/s/9wnwz8fwensxqa5/08b%20-%20Optional%20Image%20Background%20-%20Blue%20Layer.png Step 8c. Editing 08c - Replace Image Background - Blue Layer https://www.dropbox.com/s/0t0dsc2jd0cjw2j/08c%20-%20Replace%20Image%20Background%20%20-%20Blue%20Layer.png That's it, enjoy. Ed Title Comments NEW : I get request to make a Android Version of this Mockup, it's difficult since there are many devices + many screen resolutions. Anyway I figure what's really needed is to add a popular Android device in the hand swapping out the iPhone one. I kept the resolutions the same, so just follow the existing instructions below. Hope this helps everyone or at comes in handy for client presentations, ever little bit helps. As promised from this thread: https://www.buzztouch.com/forum/thread.php?tid=45B93FD6A0184A18E84713D&currentPage=1 Based on this Mockup: https://www.dropbox.com/s/lvu6qn96eolu5vq/BuzztouchPlugIns.jpg I cleaned it up and organize each layer for customization: iPhone - https://www.dropbox.com/s/2bxr1hbowub5es4/iPhone%2013%20SCREENS%20MOCKUP%20wBUBBLES.jpg Android - https://www.dropbox.com/s/t3xwu157l6ur84i/Android%2013%20SCREENS%20MOCKUP%20wBUBBLES.jpg ----------------------------------------- Prep 1. UPDATED TO INCLUDE ANDROID HAND IN PHONE AND GOOGLE PLAY BADGE Download the main zip file to any location on your computer and decompress. https://www.dropbox.com/s/uqqze69x8p7ai7x/Android%20and%20iPhone%2013%20SCREENS%20MOCKUP.zip Prep 2. (fonts used is Helvetica and Open Sans, feel free to replace) Opening the folder, select between two Photoshop Versions. Photoshop CC : PS CC - 13 SCREENS MOCKUP wBUBBLES.psd Photoshop CS6 : PS CS6 - 13 SCREENS MOCKUP wBUBBLES.psd No need to edit any of the supporting .psb files. Prep 3. Open the STEP by STEP folder to preview the 18 screen shot instructions or follow instructions below with link to dropbox shared. ----------------------------------------- STEP 1. The Main Layout with Color Coded Layers, Orange, Violet, Green, Red, Yellow, Blue https://www.dropbox.com/s/n8x2qkyu5ownynx/01%20-%20Start%20Here%20-%20Main%20Layout.png STEP 2. Editing 02 - Logo and Client Info - Orange Layer https://www.dropbox.com/s/7iqzcpelg3flah7/02%20-%20Logo%20and%20Client%20Info%20-%20Orange%20Layer.png Step 3a. Editing 03a - QR CODE Text - Orange Layer https://www.dropbox.com/s/4h5o8o4iqxwatpa/03a%20-%20QR%20CODE%20Text%20-%20Orange%20Layer.png Step 3b. Editing 03b - QR CODE Image - Orange Layer https://www.dropbox.com/s/st3furpwpxsvl1r/03b%20-%20QR%20CODE%20Image%20-%20Orange%20Layer.png Step 4a. Editing 04a - iPHONE in HAND Mockup - Green Layer https://www.dropbox.com/s/w9uddjwsuvzpwnw/04a%20-%20iPHONE%20in%20HAND%20Mockup%20-%20Violet%20Layer.png Step 4b. Editing 04b - iPHONE in HAND Replace Screen - Green Layer (violet Layer for Android) https://www.dropbox.com/s/9u6miugel8iwk4z/04b%20-%20iPHONE%20in%20HAND%20Replace%20Screen%20-%20Violet%20Layer.png Step 5a. Editing 05a - App Store Badge - Green Layer (violet Layer for Android) https://www.dropbox.com/s/lp73y1rirhnco5p/05a%20-%20App%20Store%20Badge%20-%20Green%20Layer.png Step 5b. Editing 05b - App Store Badge Edit Gradient - Green Layer (violet Layer for Android) https://www.dropbox.com/s/b46ipr5boi7p6cz/05b%20-%20App%20Store%20Badge%20Edit%20Gradient%20-%20Green%20Layer.png Step 6a. Editing 06a - Callout Bubble - Red Layer https://www.dropbox.com/s/16nm9tmcpx7tp8v/06a%20-%20Callout%20Bubble%20-%20Red%20Layer.png Step 6b. Editing 06b - Callout Bubble Open Smart Object - Red Layer https://www.dropbox.com/s/88qkblhlaipmr5k/06b%20-%20Callout%20Bubble%20Open%20Smart%20Object%20-%20Red%20Layer.png Step 6c. Editing 06c - Callout Bubble Edit Contents - Red Layer https://www.dropbox.com/s/okwixrnkzwqg83d/06c%20-%20Callout%20Bubble%20Edit%20Contents%20-%20Red%20Layer.png Step 6d. Editing 06d - Callout Bubble Complete Edit - Red Layer https://www.dropbox.com/s/v5fp0vdxwraetwc/06d%20-%20Callout%20Bubble%20Complete%20Edit%20-%20Red%20Layer.png Step 7a. Editing 07a - Screens Layout - Yellow Layer https://www.dropbox.com/s/jhti124elbmu7q1/07a%20-%20Screens%20Layout%20-%20Yellow%20Layer.png Step 7b. Editing 07b - Screens Layout Replace Screen - Yellow Layer https://www.dropbox.com/s/d9tyw2er143h81g/07b%20-%20Screens%20Layout%20Replace%20Screen%20-%20Yellow%20Layer.png Step 8a. Editing 08a - Optional Gradient Layer Background - Blue Layer https://www.dropbox.com/s/wy379deomtfzugd/08a%20-%20Optional%20Gradient%20Layer%20Background%20-%20Blue%20Layer.png Step 8b. Editing 08b - Optional Image Background - Blue Layer https://www.dropbox.com/s/9wnwz8fwensxqa5/08b%20-%20Optional%20Image%20Background%20-%20Blue%20Layer.png Step 8c. Editing 08c - Replace Image Background - Blue Layer https://www.dropbox.com/s/0t0dsc2jd0cjw2j/08c%20-%20Replace%20Image%20Background%20%20-%20Blue%20Layer.png That's it, enjoy. Ed

SmugWimp Smugger than thou... Posts: 6316 Reg: Nov 07, 2012 Tamuning, GU 81,410	02/25/14 05:25 AM (10 years ago) Sweet! As always, this is top shelf stuff, Ed! Thanks!! :) Cheers! -- Smug Comments Sweet! As always, this is top shelf stuff, Ed! Thanks!! :) Cheers! -- Smug

Niraj buzztouch Evangelist Posts: 2943 Reg: Jul 11, 2012 Cerritos 37,930	02/25/14 08:11 AM (10 years ago) This is awesome! Can you make it into a PDF for publishing into the How To section? Thank you, -- Niraj Comments This is awesome! Can you make it into a PDF for publishing into the How To section? Thank you, -- Niraj

Silvia SuperStar Android Fan Posts: 54 Reg: Feb 06, 2014 Ibiza 540	02/25/14 10:08 AM (10 years ago) You are the best! Comments You are the best!

EdReyes Lost but trying Posts: 574 Reg: Oct 21, 2013 location unknow... 17,640	02/25/14 10:11 AM (10 years ago) @Silva Thanks for the kind words, glad you requested it, hope it helps you out. Ed Comments @Silva Thanks for the kind words, glad you requested it, hope it helps you out. Ed

Adam Aspiring developer Posts: 247 Reg: Oct 23, 2010 Southern Califo... 4,470	02/25/14 02:38 PM (10 years ago) Hey Ed, Thanks for spending the time to show us how to do all of this. Thanks, Adam Comments Hey Ed, Thanks for spending the time to show us how to do all of this. Thanks, Adam

EdReyes Lost but trying Posts: 574 Reg: Oct 21, 2013 location unknow... 17,640	02/25/14 05:27 PM (10 years ago) @Adam sure no problem glad I can be of service to our community members. Comments @Adam sure no problem glad I can be of service to our community members.

kitkatman Aspiring developer Posts: 24 Reg: Jul 25, 2012 Lagos 1,340	07/21/14 04:14 AM (10 years ago) Guess I found this thread late. Can't seem to find the files for both android and ios Comments Guess I found this thread late. Can't seem to find the files for both android and ios

Login + Screen Name Required to Post Login to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.