iOS Photoshop Actions & Workflows Download: Bjango Actions 3.1 Pixel Snapping On and Pixel Snapping Off These enable and disable Snap Vector Tools and Transforms to Pixel Grid. Please note that you need Photoshop CS6, CC or CC 2014 for these actions to function. New iPhone and iPad icon Actions These Actions create new documents at the correct size for iPhone and iPad icons, with iOS 7’s icon grid and lots of handy backgrounds. New Apple Watch, iPhone and iPad document Actions These Actions create new documents at Retina device sizes, at 72PPI with some handy elements, and no colour profile attached. New iPhone Portrait (all models) An action that creates a 414×736 document (the size of the iPhone 6 Plus, in iOS points), with guides for all iPhone models, including iPhone 6, iPhone 5 and the original iPhone. New 512×512 and 1024×1024 document Actions As above, but for 512×512 and 1024×1024 pixel documents, mostly for icons. Don’t Colour Manage Set Global Light to 90° View Shadow Detail Add Colour Blindness Testing Show Optimal Size
La boite à outils de la parallaxe Bientôt deux ans que les effets de parallaxe font parti du quotidien sur le web. Si vous n’avez pas encore sauté le pas, c’est le moment de vous y mettre ! Petite piqure de rappel sur la parallaxe avec cet article « 11 sites avec effet de parallaxe » mis en ligne début 2011. L’effet ne date pas d’hier, utilisé sur le web à l’époque, notamment avec Flash, la parallaxe donne de la profondeur et du relief aux interfaces plates. Cet effet de profondeur est obtenu au déplacement de plusieurs éléments sur différents plans et à des vitesses différentes. L’ancien site Nike Better World avait remis l’effet au goût du jour en utilisant un subtil mélange de Javascript et d’images PNG transparentes. Peut-on imaginer voir cette tendance se développer même avec l’ampleur que prend le responsive design ? Voici l’intérêt de cet article, qui est en quelque sorte une boite à outils et à utiles. 1 – Pour commencer, quelques exemples : Lois Jeans Mario Kart Wii Iutopi Dentsunetwork Activated Drinks Von Dutch
iPhone 4 GUI PSD (Retina Display) Thanks for you patience on this one. It took a good deal longer to complete given the sheer size and level of detail the retina display has. It wasn’t a simple scale-up from the last file. It was clear as we created it that Apple has spent a lot of time considering how each element should be translated to such a dense resolution. What were single pixel elements are now two or three pixels thick and effects are exaggerated to become visible. For anyone designing for the retina display (640 x 960) it really is quite a different experience. The file is huge, both in file size (62.7MB) and dimension (4074 x 2986). Pay whatcha’ like We’ve always just created this file for ourselves and shared it freely. Download PSD (Retina Display) License: This file may ONLY be used for mocking up iPhone apps.
CSS Sprites Revisited 50 tips for designing brilliant iOS apps 1 A touchscreen interface might be flexible and intuitive, but it’s not perfect. Consider what people are doing while they’re using your app, and how they’re holding the device. Remember that fingers cover a much greater area than you might expect, and are far from accurate at selecting items. 2 Take a device-centric approach to design: don’t just think about the size of the screen, but also where and when it will be used. The peak hours of iPad usage for entertainment purposes might be 8-11pm, before bed, whereas an iPhone might be used standing in the bus queue or in a coffee shop. Take different usage scenarios into consideration throughout the design process – including things like how far the screen will be held from users’ faces. 3 Think of your app one screen at a time. 4 Designing for a mobile phone or tablet is very different from the web, or even a standard desktop app – every element has a fixed position on screen, which must be considered carefully.
SVG, le dessin vectoriel pour le web SVG est un format d'images vectorielles basé sur le langage de balisage XML. Il répond parfaitement à des besoins graphiques légers, qu'ils soient statiques, dynamiques ou interactifs. SVG (Scalable Vector Graphics) est un format de dessin vectoriel, élaboré à partir de 1998 par un groupe de travail comprenant entre autre IBM, Apple, Microsoft, Xerox. Il a mis du temps à être estimé à sa juste valeur sur le Web, notamment à cause de sa lente adoption par les navigateurs. En effet, Internet Explorer ne l'a pris en charge qu'a partir de sa version 9. Avantages SVG est un format d'image léger lorsqu'il s'agit de représenter des formes simples, car seules les informations décrivant ces formes sont stockées (coordonnées, couleurs, effets) contrairement aux images bitmap (JPG, PNG, GIF) qui doivent mémoriser le contenu pixel par pixel. SVG est dans la lignée de HTML : spécifié par le W3C, ouvert, libre, simple d'utilisation. Outils Intégrer SVG à sa page web La balise <embed> La balise <object> <?
Designing Icons - 35 tutorials Every person who is using internet must watch the icons, because icons are the part and parcel of every site and we can say that icons also make some extra attraction in your site. Icons not only play an important role for a website but also in many fields of the graphics designing. If you are also a designer then today I am going to provide you something interesting and valuable, so now for your icon designing isn’t a big deal you can easily improve your designing skills, below you can see the 35 creative and useful tutorials for all the people who want to have icon designing skills at their finger tips. USB Hard Drive Device Icon – Photoshop Tutorial USB Hard Drive Device Design. Create a Download Folder Icon in Photoshop In today’s tutorial we will demonstrate how to create a download folder icon using different shapes and reflections in Photoshop. Design a Vintage Radio Icon in Photoshop Photoshop Tutorial: Make A Glossy Flash Drive Icon From Scratch Radar Icon in Photoshop
Fresh & Impressive Collection Photoshop Tutorials Photoshop is an excellent image files editor used by a number of photographers and designers. It provides you with a possibility to edit photos, develop web site designs, create ads, and plenty other functions of the sort. If you are a beginner designer, you will certainly need some help with Photoshop assimilation. Sure, you can attend some Photoshop training courses to learn from coaches. However, it would be much cheaper to learn to use Photoshop following the instructions of effective Photoshop tutorials. We offer you a set of categorized Photoshop tutorials to learn using this creative design software. All the instructions are comprehensive and straight forward, many lessons are illustrated in details, PSD files with a detailed instruction are attached. Creative Photoshop Text Effect Tutorials Create an Instagram Widget How to Create a UI Sliders Set in Photoshop Funky Retro Wavy Text Effect Cool Text Effect with the Puppet Warp Tool Retro-Style Text How to Create Code Editor Design
How To Design A Gorgeous Big UI Button In Photoshop In this tutorial we’re going to be creating a gorgeous and modern user interface button suitable for the web or a mobile interface design. We’ll be using a handful of Photoshop techniques that are bound to come in handy for more than just creating buttons; in fact, the techniques we’ll be using are often used in most UI elements. Step 1 Create a new Photoshop document (I’ve used a 1000×1000 pixel RGB 72dpi document for this tutorial – keep in mind this will need to be a high resolution if you’re designing for a mobile device with a high resolution display such as an iPhone 4). To add a nice little bit of texture to our background I’m using a lovely vintage-style photograph of a cloud. With the textures layer selected, go to Image > Adjustments > Desaturate to turn your image black and white. Lower the opacity of your layer to somewhere in between 5-25%. Step 2 Select the Rounded Rectangle Shape Tool from your Tools Panel. Step 3 Now click on the Inner Shadow tab. Step 4 Step 5 Step 6 Step 7
30 New Photoshop Text Effect Tutorials Typography – you use it a lot if you are a web designer. Starting with the name of your website and menu buttons to the content itself. Now one thing to consider is that there is definitely a text on a website that has to be different and stand out from the rest of the content. Of course you can find fonts that would match your desires in a way or another, but still it is hard to find one that would be convenient for the design of your website, especially if it’s something unique. One trick you can try is adding different effects to the text you would like to be different. Below you will find a collection of great tutorials that will teach you how to add different cool effects to your texts. Retro Text The Sugar Bag Effect Retro Pop Style Create a Frilly Typo Create an Awesome Grass Texture in Photoshop License Plate Text Effect A Slick Supernatural Text Effect Suspended Text Effect Text in Stitches Create A Beautiful 3D Text Composition An Awesome 3D Text Composition in Photoshop