articles on
Apple iPhone X Live Wallpapers - Illustrator Tutorial
The iPhone X, the most anticipated phone that Apple has ever built since the iPhone 4 (in my opinion). If you go beyond the actual phone, one thing I always loved about Apple is how they produce stunning visuals either it is for print, web, videos and social media platforms. They are doing such a good job in finding ways to sell their products with strong visuals as you probably saw the iPhone X ads literally everywhere. Like many others, I would watch many unboxing videos on YouTube. And I couldn't help to notice what they called the "Live Wallpapers" on the packaging. From the Space Grey iPhone X, you will a wallpaper that is filled with warm colours like pink, red combined with white. The other wallpaper which is the Silver iPhone X with the accent colours of cyan, navy blue, and orange. This is what we are taking a look in the tutorial, how to easily create your own Apple iPhone X Live Wallpapers using Illustrator. More precisely using the Mesh Tool (U) for which after my second attempt, I was able to accomplish a result that I was quite happy about. So here we go! iPhone X Live Wallpapers I also wanted to point out that it was a nice feeling to get back to my roots. Not just making tutorials but just trying to figure things out. The simple act of creating! Before the industry shifted all of us designers into being UI/UX designers or product designers. There were amazing tools like Illustrator, Photoshop, and InDesign. There wasn't a wide range of design tools like we do now, I really think there should always have room to design things in many different ways instead of having us using one "ULTIMATE" tool. Some food for thoughts. More Links Follow my tweets @aoirostudio Follow my pictures on Instagram Illustrator Tutorial Step 1 Start with a new file with the iPhone X screen dimensions which is 1125px (W) x 2436px (H). Afterwards, add a background colour #1C51A5 using the Rectangle Tool (M). We will try to make our own version of the wallpaper for the Space Grey iPhone X. Step 2 Select the Mesh Tool (U) and I am using #FAF4F1 to start it off with the white colour. Some readers will first make a grid using the Mesh Tool (U) without any colour, I prefer using a fill colour, it removes the extra anchor all over the artwork, you will understand what I mean later. In the end, it's whatever works the best for you. Step 3 Still using the Mesh Tool (U) and I am adding the pink fuschia colour #FD0186. You should add also the accent of red #FF0026 for the top left corner. Now, this is where the fun starts. You will now switch gear by using the Direct Selection Tool (A) which is next to the Selection Tool. Whenever you click on one of the anchors, you will have the choice to move the anchor as you please or also play with the shape using the anchor handle. This is where the creativity kicks in. Step 4 Once you are satisfied with the result, you can start adding more colours including the orange #FF0026. Also the combination of colours at the lower right corner which is orange #FF0026 and a lighter shade of orange. Step 5 A tip, at some point. Try to add fewer anchor points with the Mesh Tool (U), instead play with the Direct Selection Tool (A). You can simply select an anchor and choose another colour. I would say to experiment as well with the anchor handles. As a reference, I added a screenshot the final result where you can see the different anchor positions. In Conclusion I would say this tutorial is fairly easy where 20% is about the technique and the other 80% is about your creativity. It took me two attempts to actually achieve the final result. You need to experiment and try/fail rather than a step-by-step tutorial. Hopefully you have loved the direction on how easily you can create your own Apple iPhone X Live Wallpapers. First Attempt Bonus If you wanna try to re-create the wallpaper of the Silver iPhone X, see the images highlighting the colour palette and the image revealing different anchor positions. Enjoy! One more wallpaper... Using the very same technique, I made another version where I used purple as a base colour. I love the final result, this is actually my current wallpaper. What's great is that you can rock a beautiful iPhone X Live Wallpaper on an Android phone. Give it a whirl! Download Wallpapers and Files Click here to download the Zip file used for this tutorial
Wallpaper of the Week: Notchless. Hide the notch on your iPhone X
It's been a little while since our last WPW; following up our comeback with the Wallpaper of the Week series, it’s crazy to imagine there’s more than 350+ wallpapers available to download for your different screen resolutions. Things have changed ever since so we decided to change the formula, each week we’ll try our best to publish one of our own pictures as a challenge. Let us know of your thoughts or suggestions so we can adjust for future endeavors. For this week’s wallpaper, we are sharing this collection from notchless.space, by the name of the site, I think it's pretty clear that its purpose is to hide the mighty notch on your iPhone X. Whenever you like it or not, now there's an option to hide it with a thoughtfully curated feed! All images were thoughtfully curated from Unsplash to match the device’s minimal aesthetic. We put careful consideration into the status bar height and corner radius to create an unobtrusive and optimized composition. More Links Learn more about notchless.space
iPhone X: Free Mockups
Apple has introduced the iPhone X, we heard so many mixed comments about Apple's latest "innovation". On the other hand, it proves how much their products affect our opinions because we do use them every single day. I personally think that Apple did a superb job at building an ecosystem where once you are inside, you are fine as it is. Nobody likes changes! As a tradition of any new iPhone release, there is plenty of mockups popping around. So we decided to put together a collection of free iPhone X mockups for you guys. Image by Amrit Pal Singh Image by Moe Slah Image by Graphicpear Image by Danish Designs Image by Virgil Pana Image by Ruslanlatypov Image by Greg DlubaczGreg Dlubacz Image by Michael Flarup Image by Rfayet Uday More Links Follow my tweets @aoirostudio Follow my pictures on Instagram Cover Design by Sandor
Embracing the Peculiar iPhone X Notch
A few days ago Apple announced their new lineup of phones including the widely expected and leaked iPhone X. There was nothing new due to the huge amount of leaks and prototypes that were being reviewed months before and the biggest thing about the new phone is the screen. It pretty much takes the whole front face of the phone but has a very distinct cutout at the top to case the cameras and sensors, the iconic and weird, iPhone X Notch. Personally I don't like it. It looks like a badge that when the screen is using white or light colors. With black it looks dope. However the most amazing thing for me and the reason of this post is to highlight how much the design community embrace any new Apple release. It's not a rant, it's just an observation. Many devices in the past had to create workarounds due to similar constraints and they were always fiercely criticized by designers. The best example was the Moto 360 smartwatch. But enough of comparisons, below you can see a compilation of recent Dribbble posts already adopting and promoting the new look of iPhone X. iPhone X Notch
iPhone X: Interface Guidelines
Today we've witnessed the latest from Apple, whatever you feel it was amazing or not; they have released the new iPhone. It's here and it's what Apple think will be the future of the smartphone. Introducing the iPhone X, coming with a new size of 5.8-in with a "super" retina display. Wait! We are not going to go through its features but more into their human interface guidelines. Basically what has changed on the UI aspect of things that will probably affect our work somehow if you are in iOS Design. Let's dig! Apple also shared their UI Design Resources, how cool is that? They provided files for Photoshop, Sketch and Adobe XD where based on the iOS SDK, it's just a really good and reliable resource to dig through for your next project or just by curiosity. ...a large, high-resolution, rounded, edge-to-edge display that delivers an immersive, content-rich experience like never before. Image via Apple Developer Site Screen Size In Portrait, the iPhone X has the same width as its predecessors (iPhone 6, iPhone 7, and iPhone 8) but the display is actually higher of 20% on the vertical space for the content space. To be specific, it's 145pt taller. For our UI assets, they will have to be @3x to support its high-resolution display. • Portrait Dimensions: 1125px × 2436px (375pt × 812pt @3x) • Landscape Dimensions: 2436px × 1125px (812pt × 375pt @3x) Layout "Safe" Area There are many things to think about when designing for the iPhone X including the newly sensor housing on the front. Make sure to remember about the backgrounds to give a fully immersive full-screen experience to the edges of the display all the way to the bottom. Apple is advising us to design with a mindset of having the content centered, looks right with the different orientation and to stay away from the corners including the sensor's area. Please take a look at the different possible situations below. We gotta think about the aspect ratio as well especially how your UI will behave with auto-hiding for like playing videos or photo slideshows for example. Gestures Since Apple got rid of the "home button of the iPhone X, they had to rethink about the gestures. Just to add to the list, now we have home screen, app switcher, notification center, control center and also Face ID. Regarding iOS 11, I am not a huge fan of how you have 3 different ways to swipe down, from the home screen. We can leave these thoughts of the full release of the next iOS. Links on Apple Human Interface Guidelines Overview for iPhone X Apple UI Design Resources More Links Follow my tweets @aoirostudio Follow my pictures on Instagram Images via Apple Developer Site