Set the rotation at – 45 degrees to achieve this gradient angle. However, this time, the lighter blue will be at the top left while the darker blue will be at the bottom right. Start the gradient with a light blue hue #acced6, and end it with a darker blue #7cbece. The gradient we will be adding is going to the exact same gradient as we applied to the blue background of the whole icon in the very beginning of the tutorial. Open up the Blending Options of the pencil layer to add a gradient overlay. The icon will need to have an added gradient overlay, as well as an inner shadow. Now that you have imported and positioned the pencil icon let’s style it. The last two steps in designing the iOS App Icon are styling the pencil icon. In the upper bar enter 62.32 degrees by the small triangle icon. In order to get the icon to be vertical rotate it by 62.32degrees. Use the iOS template guide to help you size the image into the smallest circle. If you are using the same pencil icon as me, you’ll want to resize the icon down around 50%. Import the icon into your file and resize it. It was created by Molly Bramlet and you can download it here. If you want to use the pencil icon I chose, you can download it from the Noun Project. Make sure the icon is big because the file we are working on is more than 1000px tall and wide. Find an icon on Sliceberry or the Noun Project and throw it into your PSD. The last thing this icon needs is an icon. You should have something like the image below. Next, decrease the distance to 0px but increase the size to something slightly larger. Within the drop shadow, change the opacity to 10%. It will make the circle, as a whole, stand out from the blue background. This will give the thick border (stroke) more definition. The very last thing you need to do is add a drop shadow to the circle. The white glow should be peaking outside of the stroke a bit so set the size of it to something like 140px. Set the Blend Mode to normal decrease the distance to 0px. Technically the inner shadow is a white glow – you’re welcome to use an inner glow instead. Set the angle at – 45 degrees to achieve this. The gradient needs to be set diagonally with the lighter blue atop and darker blue towards the bottom. The gradient starts with lighter blue #d1e4e8, and ends with a slightly darker and more saturated hue, #a9deeb. The colors used for the gradient are a lighter version of the background gradient of the icon. Additionally, the stroke will include a gradient. Set the stroke to be positioned inside and make sure it’s thick. The stroke around the circle is supposed to look like a thick border. Also, max out the Scale and set it to 150%. Make sure that the white is in the center and the light gray on the outside of the gradient. This is a radial gradient because we want to give the middle of the circle some shine. The gradient is formed from #ffffff and #d9d9d9. The gradient in the circle is straightforward. The circle should have a stroke, shadows and gradient added to it so let’s add one by one. Now that we have the circle, we need to style it. You can adjust the size of it in the Properties panel if it’s not perfectly aligned with the grid. Create a circle roughly 890px tall and wide. You want to use the Elliptical Tool which is under the button U. Try Startup App Try Slides App Other Products Step 3 – Create an Inner CircleĪ big part of this icons design is a white circle in the middle. With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |