background preloader

31 Practical Website Interface Design Tutorials

31 Practical Website Interface Design Tutorials
Designing a website has never been easier. If you asked a web designer who been long enough in the industry, they could tell you there’s actually not much resources, articles nor communication channels regarding web design/develop in the older days, let alone high quality free tutorials. If you intend to create your own personal websites or perhaps redesign your blog theme, it’s not something too hard already. Headers and Navigation Creating effective navigation for websites are essentially important as they determine how visitors surf and navigate your website. Retro Dark Blue Header DesignHow to create a dark blue header with a retro spin on it. Full Layouts For those who wish to create a website and with no idea at all, here are tutorials that guide you through designing the entire webpage layout, head to toe. The Art Institute Photoshop TemplateEasy steps to create a sleek template. Author: Hongkiat Lim

Creative Studio Web Page October 28th, 2008 by ART-D Posted in Adobe Photoshop, Web Layout In this detailed tutorial we will learn how to create impressive layout for Creative Studio. Begin your work by creating a new file of 845×900 px and 72 dpi. Select after that the Paint Bucket Tool (G) to give it the color #151616 Using the Rectangle Tool (U), try to represent a kind of illumination on the background’s top part. Select for this layer the parameters from below: Fill 0% Blending Options>Gradient Overlay Gradient’s parameters: Introduce now the site’s name, keeping the next shown demands: creative studio The layer’s parameters: Blending Options>Drop Shadow Blending Options>Gradient Overlay Using the Line Tool (U), try to make a horizontal line, colored with #323537 Make a copy of the last made layer and select the Free Transform option to situate the copy the same way indicated below: Now it’s time for drawing the buttons on the site’s header. Insert now the name of the buttons for the site’s menu: Post Pages: 1 2

Simple Underwater Scene in Photoshop A few weeks ago I received an email from a reader asking me if I could write a tutorial showing an underwater scene. I have written some tutorials on this subject like the 3D type made out of water or the underwater scene for Digital Arts in 2008. However I was watching TV this weekend when I started to watch I, Robot. The opening titles of that movie is awesome and really inspired me to write this tutorial. In this tutorial I will show you how to create a underwater scene with some bubbles and light effects. Step 1 Open Photoshop and create a new document, I'm using 2560x1440 pixels so I can use it as wallpaper. Step 2 Add another layer and fill it with green (234b44) Step 3 With the green layer selected go to Layer>Group Layer. Step 4 Select the green layer now and go to Layer>Layer Mask>Reveal All. Step 5 Add another layer on top of the others and with the Brush Tool (B) and a very soft brush, paint a red spot light like I did in the image below. Step 6 Step 7 Step 8 Step 9 Step 10 Step 11

Photo Effects Film Inspired Photo Borders In this Photo Effects tutorial I'll show you how to extract a photo border from it's background and make it infinitely more versatile for your photography projects. High Dynamic Range (HDR) Photos – Part 1 In this Photoshop Tutorial I'll take you through my process for creating stunning High Dynamic Range (HDR) Images with tonal ranges just not possible to achieve with a single photograph. 2 Step Grunge Photo Effect In this tutorial I'm going to show you a quick and easy 2 step process grunge photo effect that I stumbled upon while attempting to accomplish something completely different. Grunge Photo Edges In this Photoshop tutorial I'm going to show you a quick and effective way to create a cool photo edge effect using a single Photoshop grunge brush and a series of clipping masks. Artistic Sepia / Colorizing Effect Calculations And Colorization High Contrast Black And White Ad It seems like cool black and white photo effects are all the rage lately.

Glossy Emblem Text Effects – Photoshop Tutorial In this tutorial, we’ll demonstrate how to create the following nice looking Glossy Emblem Text Effect with Adobe Photoshop in 4 simple steps. With just one text layer and a few layer styles you can have yourself a deliciously glossy emblem text effect in no time. Since the entire effect is done on a vector text layer, you’ll be free to change the font face or letters to suit your needs and still retain all of its styling. Recommended Reading: More Photoshop Text Effects! Step 1 Fire up Photoshop and set your canvas to 800×600. Step 2 Next, lay out your type. Step 3 Now lets slap on a barrage of layer effects. A closer look at the color ramp for your Gradient Overlay: And here’s what your stroke’s gradient should look like: You should now have a beautifully reflective emblem with metal trim. Step 4 Ctrl (Command for Mac) + click on your text layer’s thumbnail (the white box with the capital ‘T’) in the layer’s palette to select it. Download final .PSD file. More Text Effects

Super Slick Dusky Lighting Effects in Photoshop One of the best sites around for desktops has to be Desktopography. I've been inspired by their amazing work, so today we are going to put together a sunset image mixing some vector shapes and dusky lighting effects to produce a slick image that would make a nice album cover for a chillout mix! Steps and Assets As always you can download the PSD file to follow along at the bottom of this tutorial. It's a pretty large file so be warned! Additionally we are using a few assets including a photo from iStockPhoto and some vectors from Arsenal's Freebie Section. Step 1: So here's our original photo from iStock. Step 2: First off we duplicate the photo, press Ctrl-Shift-U to desaturate the image to Black and White. Step 3: Now go to Filters > Blur > Gaussian Blur and apply a mild blur of 2px. Step 4: Now we set the blurred black and white layer to blending mode Overlay and Opacity 50%. Step 5: So in a new layer, use the Paintbucket to fill with a bright pink color. Step 6: Step 7: Step 8: Step 9:

How to turn your photo into movie-like effect using Photoshop? « ebin What you need to have: Adobe Photoshop What you will learn: colour mood adjustments + depth of field effect + film effect PS: ⌘ key for Mac users / CTRL key for Windows users Colour mood adjustments 1. Adjust the Hue/Saturation: ⌘U/CTRL-U 2. Depth of field effect 3. 4. 5. 6. Film effect 7. 8. 9. 10. 11. Cinemascope (optional) 12. You can also add an extra step to twist the colour into this mood by using ‘Color Balance’(⌘B/CTRL-B). I like this post I’d like to donate to ebin.wordpress.com for the contribution.digg Like this: Like Loading...

Eery-Eye Photo Manipulation Welcome to PhotoshopStar.com! If you find this site useful, you might want to subscribe to our free newsletter for updates on our new Photoshop Tutorials and Articles. In this Photoshop tutorial I will be walking you through the making of an interesting art piece, “The Eye, the Key of the Soul.” In this tutorial we will use the burn tool, dodge tool, brushes, layer modes and more to add an interesting effect to an otherwise regular stock photo. Preface Before we get started I would like you to know that this tutorial was written by Krinos, and the stock photo used is by xerolime, you can download it from here. Open up the stock photo you’ve chosen to be working with for this tutorial. Using the burn tool now, pass in turn of the pupil of the eye and in turn of the eye. Again using the dodge tool, make some ‘rays’ just outside of the iris, and lighten up any other areas you think may need it. Now it’s time to recolor the center of the eye. Thanks

How To Make Digital Photos Look Like Lomo Photography The following tip on getting digital images to look like Lomo Images was submitted by DPS reader – Frank Lazaro. You can see his photography at his Flickr page and see some of his Lomo shots here. From the first time I saw a photo that looked like this, I wanted to shoot one of my own. But, for the longest time I couldn’t figure it out how people took photos look like this. Then one day searching the web, I realized I needed a Lomo LC-A camera. This is a Russian made camera that was a knock off of another camera. Low and behold I went out and bought 2 of these babies. I searched and searched and after trying several different Photoshop methods, I finally came up with my own using a mix of different techniques. Get Free Weekly Digital Camera Tips via Email Here is my step by step on how I take a digital photo and make it Lomoified. Getting Started – Creating a Vignette Once you have set the feather (shown above) and have drawn the circle, you must invert the selection.

Le détourage parfait des cheveux avec Photoshop Cs5 Le détourage parfait des cheveux avec Photoshop Cs5 Pour commencer importez l'image que vous voulez dans ce tuto j'ai utiliser celle-là téléchargeable en grande format par ici Prenez l'un de vos outils de sélection classique et sélectionner la tête du personnage personnellement j'ai utilisé l'outil baguette magique (w) comme ceci Maintenant cliquez sur le bouton Améliorer les contours en dessous de la barre du Menu ou bien allez dans Menu > Sélection > Améliorer les contours Ne quittez pas la fenêtre précédente vous allez remarquer quand vous passer votre souris sur l'image la forme du curseur change c'est juste l'outil amélioration du rayon (E) et pour avoir une sélection parfaite des cheveux vous devez utiliser ce dernier sur tout les contours de la sélection n'hésitez pas de la refaire 2 ou 3 fois sur la même zone. vous pouvez aussi choisir le mode d'affichage cliquez sur Ok et puis faite un copie coller de votre sélection

Multimedia Détourage d'une image 3. Sélection par Plage de Couleurs Devant l'enthousiasme général déclenché par les deux épisodes précédents, voici le troisième volet de la saga "Détourage d'une image". Aujourd'hui, la sélection par plage de couleurs. Cette méthode est efficace dans le cas d'images à détourer se détachant sur un fond de couleur différente, comme cet oiseau par exemple. La sélection par plage de couleur, permettra de sélectionner le ciel bleu en une seule opération, tout en conservant le joli petit oiseau sur son arbre. Dans le menu choisissez Selection / Plage de couleurs. Le curseur pour la tolérance vous permettra de régler l'étendue de la plage de couleur sélectionnée. Résultat avec une tolérance à 180. pour sélectionner votre plage de couleur, utilisez la pipette pour cliquer sur une partie de l'image contenant la couleur à sélectionner. Dans ce mode de prévisualisation, tout ce qui est en rouge dans l'image représente la partie de l'image qui sera conservée. Validez votre choix.

Adobe Photoshop Tutorials from Beginner to Advanced How To Slice The CleanPortfolio Psd Layout This tutorial will teach you how to slice the CleantPortfolio psd layout. This template has been published some days ago on another photoshop tutorial. Your web site design is now finished. But this result is only a simple picture you cannot update to change or to add actions. It is the reason you need now to cut it off in several graphical parts, one for the icons, one to illustrate the buttons etc…. These graphical parts will be added to your HTML web site pages using CSS proprieties, even you are going to create a web site with HTML5/CSS, CSS proprieties are going to take place of several pictures (internal shadow, shadow, gradient etc…). Step 1 Creation of HTML file It is time now to enter into the HTML part of this tutorial. Step 2 Basic tags Step 3 First HTML5 tag Code back to the code source located in your index.html file, drop some lines between the tags. Step 4 The Top Enter now into the high import step of the subject. Step 5 The links Step 6 The searchengine Step 7 Block dark grey

Related: