There is a plenty of websites in the internet. All of them have got some common features though. One of those features which is a characteristic for almost all the websites is the presence of a navigation menu on the page. Navigation menus can vary from ordinary text links to the most complicated dropdown menus. This tutorial is describing detailed process of creation of “plastic” navigation bar.
Final Result Preview
Step 1
Let’s start with creating the background for the navigation bar. The background is going to be bluish; the color will be alike with the color of your oncoming menu. Create a new document sized 800×259px with background color (#8caab8). Select foreground color (#e1e8eb), create a New Layer and draw linear gradient (Foreground to Transparent) from top to the bottom of the canvas.
Read more…
Google’s online web font collection is a resource that should be added to any web designers tool belt. Using web fonts that are unique and appealing help to increase your users experience and help with readability and the overall look of the website you are designing. It is also important to note that now a days you are not only developing for the web, but you also have to remember readers using tablets and smart phones.
Readership via a smart device is on the rise and will only become more prevalent in the future. Choosing a font that is easy on the eyes and also appealing visually will really make the design of the site pop and show a level of professionalism that will get you recognized above other designers that choose not to utilize this technique.
The other great aspect to Google Web Fonts is that they are complete free to use in your design as long as it is not a commercial site / store. Other sites like typekit.com allow for monthly subscription based type utilization and this makes it difficult to include their fonts in a project you are building out for a client. You can’t pass on a monthly subscription for fonts used on the site to the client and expect them to be happy. This is the reason I stick with Google’s collection in most of my online projects.
Read more…
This tutorial will focus on how to draw a stopwatch icon in Adobe Illustrator using gradients and shapes. The best thing about vector artwork is that it can be re-sized to as small or as large as you need for any online or offline design project. The stopwatch is housed in a metallic casing with glass facing. We will use metallic gradients and glass sheen to make the icon hyper realistic.
Adobe Illustrator is a very powerful vector creation utility and is a great asset to any designers program suite. Vectors are useful in design because you can make the as small or as large as you want and they never become pixelated. Vector based designs can be used in web design, print ads, packaging, posters, and beyond. You name it, you can use a vector to create it. Below you will find a link to the best Illustrator tutorials of all time and there is over 100 of them. Prepare for greatness and be ready to learn a lot from these impressive and professional Adobe tutorials.
This tutorial contains steps on creating a realistic looking ripple effect in Photoshop for use on corners, showing movement or just adding a unique twist to your print or web design.
Step 1
Start with an image (any image will do).
Step 2
Add a new white layer and paint soft black lines across it using a soft brush. Like shown at the right.
Read more…
