Since its emergence, the digital photography market has gradually supplanted the traditional one. APN and digital SLR cameras entered our lives, and some people announced the death of silver-based images. This is not all lie, and yet old-fashioned images have been particularly popular in the past few years. All we do seem to do now is try to recreate the atmosphere of those bygone times anyway. Blurry, distorted and over-saturated images are not just a fad anymore. People have became familiar with the style and even consider it a full-fledged photographic genre.And this is where toy cameras play a role. These devices, made entirely of plastic, including often the lens itself, are not only toys. Sure, they cost next to nothing and have no controls to speak of, but this is what people like about them: they create unpredictable pictures, with equally unpredictable vintage effects. Once you understand this, the rest is a beautiful game. Take them anywhere, anytime, and photograph whatever you like. Photo credit: Pirouetting, by helenannsiaHow does this apply to modern design? Now that vintage websites are so trendy, why not look to this type of image for inspiration? You probably don’t want to go through the trouble of taking up silver-based photography because that would mean buying, developing and scanning film, maybe even making prints. That takes time and is expensive.What you can do, though, is use the magic of Photoshop to make your ultra-sharp, high-definition images look like they were taken with one of these cameras. Below are a list of the most famous toy cameras and some tutorials that can be used to recreate their famous effects. Most of them are part of the Lomography movement, but you might also want to consider some other options in trying to recreate that authentic look. You also may be interested in our previous article “The Disturbing Beauty of Oversaturated Pictures and Lomography.”By the way, what was the last time you visited our sister site Noupe? Subscribe to Noupe's feed for more inspirational and design-related articles.Famous Toy CamerasToy cameras are cheap, low quality and yet functional. As such, the deformations in the photos they produce are pronounced, and not all images are guaranteed to be perfectly exposed. Still, there are just so many of them these days that picking a few is hard. The ones presented here have paved the way for the success of the others. You may know them but not the stories behind them?DianaLet’s start where it all began. Picture yourself in Hong Kong in the early ’60s, when a factory starts producing the Diana. This inexpensive plastic-body camera was at the time usually given away as a novelty gift. Occasionally, it would be used by actual photographers who took advantage of the various effects it produced. And many effects there were. Because of the poor quality of materials used, the Diana camera was disposed to light leaks, leading to film damage, an effect typically fixed by sealing the seams with light-proof tape. Handy, huh?But the plastic body wasn’t the most interesting part: it was the lens, also made out of plastic. Not only did it enhance the already low contrast created by the light infiltration, but it also made for odd color rendering, chromatic aberration and blurry images. As if this weren’t enough, the image circle only marginally covered the diagonal of the film frame, which is why Diana images have heaving vignetting. Photo credit: elZekahAs photographers started to deliberately exploit these characteristics, production grew through the ’70s and opened the way for other toy camera manufacturers. Photo credit: chomdeeLomo LC-AThis is where things get a bit tricky, so pay attention. It’s now the beginning of the ’90s, and for a few years the Russian factory Lomo PLC has been producing the Lomo LC-A camera, which basically has all of the characteristics of a toy camera (vignetting in particular). But production was stopped, and the camera was all but forgotten until two Austrian students found one at a flea market in 1991 and decided to exploit its marketing potential. They convinced the director of the Lomo PLC factory to relaunch production and negotiated an exclusive contract for distribution with their brand-new company: Lomography AG. Photo credit: maakuAnd here begins the Lomography movement. If the term is familiar to you, you probably know at least two things about it. First, it promotes casual snapshot photography. Second, it is associated with over-saturated and high-contrast images. To confuse things, this second characteristic has nothing to do with the LC-A camera itself or with any other cameras for that matter. It is actually the result of the way the film is processed, which would usually be cross-processing. But Lomography is a movement, not a technique, and it was certainly the first to promote camera imperfections as an aesthetic. The success of the LC-A camera helped spread this aesthetic. Photo credit: citronnadeHolgaWith the success of this movement, Lomography AG became interested in other low-cost cameras, such as the Holga, which had been produced in China for a decade. Even though it was made by a different manufacturer, the Holga was considered the successor of the Diana. Inspired by its predecessor, the Holga was designed as an inexpensive mass-market camera. And like the Diana, it is not of the best quality and has the same flaws. Photo credit: babyabby10But the Holga became popular and was even exported to the West over time, mostly for photo-reporting, for which its low profile was appreciated. Its problems were no longer problems, and now it is not surprising to hear of Holga photos winning awards. Because it is entirely manual, one can create effects, such as double exposure and panoramas, by not winding the film. Photo credit: Bill Hansen (website)ActionSampler, SuperSampler, OktomatThese three cameras don’t have many differences. They all take multiple shots in a set period of time, thus creating micro-images that look like short animated movies. The Actionsampler and Supersampler have four lenses each, while the Oktomat has eight, fitting eight frames into the standard 35mm. Photo credit: amylynnthompsonTo make them a bit more fun, what you see through the viewfinder is not exactly what you get. Photo credit: golfpunkgirlLomo Fisheye 2As the name suggests, the Lomo Fisheye camera has a fish-eye lens. It was the first 35mm compact camera to offer such a wide angle (170°), and unlike the other toy cameras covered here, it gave surprisingly good results for the price. The second edition came with several enhancements, such a viewfinder that covered the same angle as the lens (it was blocked off before). Photo credit: aapnootmiesThe effect created, often seen in sport images, can serve many other purposes. But the user should be aware of two major characteristics: strong deformation and light leaks. Photo credit: fahaPhotoshop Tutorials And ResourcesNow, let’s put all this into practice. Even if you are familiar with these effects, have ever actually tried to replicate them? There are a lot of different effects, and you can combine them to create unique images.Faking the Holga Camera and Fisheye LensHow to Fake a Holga Photograph This tutorial shows you how to fake Holga photographs in a few simple steps.Another Way to Fake a Holga Photograph Another tutorial on faking Holga photographs.Fish-eye effect This shows you how to create a fish-eye effect for a picture taken with a regular lens. This one is a video and it addresses two important points: the lens circle border is not supposed to be so sharp when taking a fish-eye photograph, and one often deals with light infiltration.Fish-eye effect Another fish-eye tutorial. It doesn’t show how to distort the image, so you will have to add this step yourself, but it adds a nice final touch to the image by using a picture of the inside of a fish-eye lens.Recreating Low-Quality Camera FlawsVignetting A very simple tutorial on recreating the vignetting effect.Soft-Focus Lens Effect What if you’re already happy with the contrast and color saturation of your image and just want to recreate the effect of a soft-focus camera lens or diffusion filter? In this tutorial, you’ll learn a fast and easy way to add a more traditional soft-focus lens effect to images.Faking Barrel Distortion and Chromatic Aberrations Here is a nice Photoshop plug-in to fake barrel distortion and chromatic aberrations. Adding these effects to your pictures will make them look even more authentic.Light Leaks Effect, Part 1 and Part 2 Of course, this article wouldn’t be complete without a great tutorial on light leak effects. Here is an awesome one, divided into two parts, each covering a different effect: a white-blur light and a colored bar leak.Working on Colors and Light ExposureGetting That X-Pro Lomo Look This tutorial is fairly quick and easy. It shows you how to get that great x-pro Lomo look by tweaking color. You’ll be exploring a new method of vignetting, and you’ll be widening and blurring the image a little.Cross-Processing Tutorial With so many possible permutations of film stock and processing techniques, there is no single, identifiable look to cross-processed images. The most common combination is C-41 as E-6, in which slide chemistry is used to process color negative film; and mimicking it in Photoshop is a quick job. Image contrast is usually high, with blown-out highlights, while shadows tend towards dense shades of blue. Reds tend to be magenta, lips almost purple and highlights normally have a yellow-green tinge.Cross-Processing Another cros-processing tutorial.Vintage Effect Age your images a give them a vintage effect.Using Textures and Double ExposureThrough the Viewfinder Did you know that Flickr has a Through the Viewfinder group? The idea is that you shoot through the viewfinder of an old camera using your modern digital or film camera and create an interesting framing effect. Here is a tutorial on how to create this effect.Resources of Speckle Pattern Yes, there is also a Flickr group called “Noise and Dust Through the Viewfinder.”Paper Texture Effect Here is a quick and easy tutorial for those who want to learn the art of taking a photo and turning it into an old-fashioned vintage picture.Some More Paper Texture Effect Another tutorial (this one a video).Filmstrip Effect Download a filmstrip template and use it to create negatives of your pictures.Double Exposure When you take a double-exposed photograph, the results are usually a bit unpredictable. With Photoshop you have much more control over the result.Another Way to Create Double Exposure While the most common way to create a double exposure is by using a different blending mode on the top layer and adjusting its opacity, this method accurately simulates how a camera takes a double exposure.Other IdeasNo tutorials are needed to create these effects. They are included here merely to give you more ideas. You’ll still need to work on your pictures to get that vintage look. Then, just put them together and enjoy.Shoot Series Like the Oktomat and the Actionsampler Draw inspiration from the Oktomat and Actionsampler cameras. You’ll get either four or eight images in the same frame, each of them having been shot after an interval of only a few seconds. Photo credit: Look!, by MoyöShoot Series like the Supersampler The Supersampler effect is quite similar to the Actionsampler: four images in the same frame, but spaced differently. And remember that you can arrange layers both horizontally and vertically. Photo credit: moving clocks run slow, by aleinsomniacPanorama 1 Panorama images don’t necessarily have to be perfectly arranged. Here is an example of what else can be done. Photo credit: Christophe Dillinger (website)Panorama 2 Another inspiring panorama. Photo credit: bruceberrienPanorama 3 The panorama view can be combined with a filmstrip effect. It simulates a double-exposure panorama taken on a manual camera. Photo credit: mikrofoniuszWant More?PolaroidIf cheapness is a defining characteristic of toy cameras, it surely isn’t for Polaroids. The Polaroid camera itself is not expensive, but because Fuji is now the only company that produces the film for it, getting affordable ones has become difficult. But this may change in the next few months thanks to the Impossible Project.Going back a bit, the world’s first commercial instant camera was the “Land” camera, unveiled in 1947. Since then, Polaroid has become synonymous with instant photography, because most of the cameras have been created by the Polaroid Corporation. Nowadays, the cameras are used by photographers mainly to preview their work before actually shooting. But as toy cameras, they are fun to play with and can make for nice effects. Photo credit: paine666Polaroid and Transfer EffectRetro Polaroid Coloring on Your Photos This is a simple tutorial on how to get that retro Polaroid coloring in your photos.Polaroid Transfer Effect This Photoshop tutorial shows you how to create a cool old photo transfer edge effect using a piece of stock photography, an alpha channel and the burn and dodge tools.Showcase of Beautiful PicturesConsidering that Flickr has a group for almost every subject, it is no surprise that there is one for toy cameras. Here is a showcase of the most beautiful images from it. Photo credit: have I told you lately, by cHr1st1an S Photo credit: ubu84 Photo credit: 000038, by qwj Photo credit: 54330027, by etara Photo credit: Ipanema Beach – Brazil, by marcelo_maia Photo credit: Hélicoïdal, by Cathy Lehnebach Photo credit: Purgatoire, by stiveune Photo credit: untitled, by Greg Zauswoz Photo credit: untitled, by bradbrochill Photo credit: .., by cjlomo Photo credit: spree1, by hellomelly Photo credit: Love me two times, by laszlo_ototh Photo credit: exit, by renaishashin Photo credit: untitled, by Sergio Conde Sánchez Photo credit: Akhirnya buat lomba juga -__-, by febryanyovi Photo credit: Cosy Clausterphobia, by miss_michelle Photo credit: svema_test1, by ashtonleee Photo credit: untitled, by poppart Photo credit: lomographicsocietyinternational Photo credit: La Bòfia – Redscale, by fgali1964 Photo credit: chomdee Photo credit: offcenter Photo credit: Holga Tennis, by Nick Whitmoyer Photo credit: golfpunkgirl Photo credit: eyetwistFurther ResourcesOld Toy Camera – Photoshop action This Photoshop action makes images look as though they are aged prints, shot on a toy or antique camera. Also included are two actions that create borders similar to those seen on photos from many antique and toy cameras.Toy Camera Contest FILE presents here a selection of images submitted for its Toy Camera Contest. This collection gives an idea of the challenge facing the judges to find three winners. The range and quality of the submitted images are impressive.Gallery This project is home to photos taken with toy cameras. Most are plastic: Holga, Diana, Dorie, Debonair, Lubitel, Banner, Snappy and Yunon. Distortion, blur and imperfection are some of the characteristics that endear these cameras to enthusiasts.Abduzeedo: 60 Interesting Lomo Fisheye Shots Gathered here are a few Lomography fish-eye shots. Some were taken with Lomography cameras such as the Diana and the LC-A+ with a fish-eye lens adapter attached.Lomography.com Lomographic Society International Website.(al)© Jessica Bordeau for Smashing Magazine, 2010. | Permalink | 11 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: photography, photoshop, toy camera, tutorial, Tutorials, vintage
-
I posted to smashingmagazine.com
Uncovering Toy Cameras and Polaroid Vintage Effects (With Photoshop Tutorials)
http://feedproxy.google.com/~r/SmashingMagazine/~3/ZKDn1CvlvM0/
19 Hours, 10 Minutes ago | Comments »
-
I posted to smashingmagazine.com
Best Tutorials For Cinematic Visual Effects
http://feedproxy.google.com/~r/SmashingMagazine/~3/ckdxuTfjQVw/
It doesn’t matter whether you are a designer, a developer, an artist or an amateur learner – at some point you need to improve the quality of the original picture or video. You may want to retouch and enhance his or her photographs and videos, make it look better, more spectacular and more original. It could be for personal or commercial use. Most of us know how to edit and enhance the digital photographs using our favorite image editing software. But when it comes to videos, the techniques are completely different from that of classic image editing. In this post we present best tutorial for visual effects in movies (with Adobe After Effects, 3DSMax etc.) that will (hopefully) teach you how to create impressive videos which can be used for your presentations or websites. Visual effects are used in post production which involves integration of live-action footage and computer generated imagery. You can use it to enhance or manipulate videos, just the way you usually do with image processing tools. Best Tutorials For Visual Video Effects The 007 Intro This tutorial shows you how to achieve the classic introduction of James Bond films using only basic After Effects plug-ins.
Create a MoGraph Urban Jungle Use 3D Match moving to create stunning Urban Jungle effect where vector graphics are perfectly tracked to a city footage.
Energy Create a complex energy scene with CC particle world in Adobe After Effects. Also learn to animate particles in 3D with multiple instances.
Droste Effect This tutorial demonstrates the use of new Pixel Bender plug-in to obtain “Droste Effect”.
Light Streaks This tutorial shows you how to create light streaks inside live action footage
Car Racing Scene Create a scene of cars racing down a road towards camera. This can be added to your car chase footage. Although the title states the use of photographs, it can be also used with your moving footage as well. Part 1 and Part 2
3D Shadows Learn how cast 3D shadows onto live action footage.
Disintegration Build a furious procedural disintegration effect in Adobe After Effects.
Futuristic HUD Create 3D interface display in Adobe After Effects inspired by Iron Man’s helmet.
Underground Blast Simulate a dramatic underground explosion that ripples and dislodges the ground.
Aurora Borealis Learn how to create the Northern Lights.
The Juno Opening Credit Look Adobe After Effects tutorial to create famous handmade juno opening sequence.
Artistic Look Creating an Artistic Look with Minimax and Overlay in After Effects .
Realistic Camera Move with Parallax Need to add realistic camera moves? This tutorial will help you to achieve it. Also you can refer to “Virtual 3D Photos” tutorial to get more deeper into it. “Virtual 3D Photos” tutorial will teach you to create a video footage from photos with “realistic camera move” effect.
Historic Naval Battle Scene This is another tutorial that will teach you how to create a VFX naval battle scene from an ordinary footage.
3D Crater Create a realistic crater into a live footage. This tutorial has been divided into 3 parts - 3D Crater p1, 3D Crater p2 and 3D Crater p3.
Creating an interior scene This tutorial shows you how to make an interior scene using 3dsmax with realistic rendering in Vray. It could be used with your green screen video footage later.
Better Compositing with Particles This tutorial shows you a technique for placing layers inside the middle of a particle system - crucial to truly integrating your CGI effects with your live action footage or motion graphics.
Realistic Car Hit
Old Film look
Particle Half-tone Effect
3D Rain This tutorial will teach you how to turn an aerial video footage into a cold nighttime storm with torrential rain and lightning.
Lightsabers Apple Motion tutorial for creating lightsabers.
Healer Adobe After Effects tutorial to create a realistic self healing effect.
Time Freeze Adobe After effects tutorial to a create illusion of frozen world around a person.
Breathtakingly Awesome Rain Scene Adobe After Effects tutorial shows how to create the dramatic slow motion rain drops falling scene. Part 1 and Part 2
Slow Motion Create a slow motion video footage without use of high speed camera.
Car Light Trails Create car light trail effect in Adobe After Effects with help of 3d stroke effect.
Instant Freeze Adobe After Effects tutorial will explain how to add instant freeze effect to a footage. Also shows how to add camera lens frost over and crack to give it a realistic look.
Futuristic Floating Hologram Effect This tutorial will show you how to make a futuristic floating hologram over a cellphone.
Track Live Video to a Postcard This tutorial shows how to track video to a Postcard using scripts which are freely available. Also shows how to recover highlights from the tracked footage and apply them back over the moving video for a very convincing effect.
Compositing Fog Daniel Broadway shows the correct way compositing fog elements in a video footage.
War scene This tutorial shows you how to create a realistic war movie from a video footage shot using only one actor and a camera man. This is an advance tutorial in which color correction and effects like realistic camera shake and bullets hitting the ground are used to give it a realistic look. Part 1 and Part 2
Soul Removal Create soul removal effect using particle system in Adobe After Effects. This tutorial also shows you to add facial Distortion and handy expressions to make it more realistic.
Object Removal In this tutorial you will learn techniques for removing unwanted objects from the footage.
Body Shatter Effect This shows you how to create a body shattering effect.
Meteor Crash Create ground destruction using 3D Max and Adobe After Effects. Tutorial has been divided into 2 part Meteor Crash 3D p1 and Meteor Crash AE p2.
Simulated Lighting Make explosions and muzzle flash.
CE ColorCorrection Adobe After Effects tutorial will teach you to change the look and feel of your footage easily with Color correction plug-in.
Kamehameha Learn how to make a kamehameha using Adobe After Effects with Trapcode’s Shine.
Day to Night Conversion Tutorial to transform daylight footage to night footage along with artificial lights and illuminate windows.
Bleach Bypass Effect This tutorial shows you how to get bleach bypass look to your footage in Adobe After Effects. You can also have a look at similar tutorial which uses color correction filters available with Final Cut Pro.
Lava from dry field image This tutorial shows you how to create lava from a dry lava field image.
Sky Replacement One of the most useful tutorial for your everyday videos, to fix blown out sky.
3D Eyeball Tutorial for creating a 3D eyeball that can look around the room, using CC Sphere to create a material of the eyeball.
Demon Face Very useful tutorial if you want to create a horor film. You can also have a look at the similar tutorial Vampire fang growth.
Water Drops This tutorial will teach you to create water droplets on the camera lens with DOF.
Old TV Footage Effect
Skin Displacement Simulate the look of bugs crawling under the skin using Adobe After Effects.
Turning to Skittles Tutorial is quite detail (but no explanation) which shows how to create those skittles using 3D Max and compositing it in Adobe After Effects. It makes use of many techniques like rotoscoping, tracking etc. The final output it similar to Hilarious Skittles Commercial. This tutorial is split into two parts Part 1 and Part 2
Sin City look Tutorial for adding sin city look to a footage. This tutorial makes use of Silhouette Roto plug-in.
Blemish Removal You must have gone through several skin enhancement Photoshop tutorials before. But when it comes to video, the technique totally differs to that used for digital photos.
Blood Splatter Learn how to make blood stick to things.
Assisted Suicide Tutorial for compositing digital blood burst and a muzzle flash.
EarthQuake Tutorial to add earthquake effect in a video footage.
Flashback Effect This tutorial shows you how to add flashback look to your footage, like in the film “The Bourne Ultimatum”.
Set Extensions This tutorial will help you to customize or extend a live action set with custom matte painting. You will also learn to link several motion trackers into one null object.
Frosty Breath Create the illusion of cold breath on a warm day.
Orbing and Beaming Effects
Talking Head The fastest way to create talking creatures without the use of keyframes.
Invisible Effect
About the author Vailancio Rodrigues likes to learn new things and share them with others. He likes to work in the creative field and is constantly improving his skills. You can follow Vailancio on Twitter. Related posts You may be interested in the following related posts:
Adobe Illustrator Video Tutorials Best Adobe Photoshop Video Tutorials
© vailrodrigues for Smashing Magazine, 2009. | Permalink | 56 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: adobe, ae, after effects, effects, Tutorials, video
May 4 2009, 7:17am | Comments »
-
I posted to smashingmagazine.com
Space Explosion Photoshop Tutorial
http://www.smashingmagazine.com/2009/02/22/space-explosion-photoshop-tutorial/
by Tyler Bramer Digital space art is one of the most inventive and beautiful art genres of this era. This tutorial shows you how to create your own space scene using three stock photos and Adobe Photoshop. The majority of the effects use the brush tool, layer effects and the filter gallery. You may want to set aside an hour or two before starting this tutorial because it requires quite a bit of work to accomplish. So get those creative juices flowing and let’s get started! Download the files Before we begin, we need some resources to use for this tutorial. Let’s also preview the image that we will have created by the end of this tutorial. You can also download the full source files.
Download images Download full Photoshop source files (.zip, PSD)
- Note: Planet and moon were found on Google Images. The rock was taken from stock.exchng. Step 1: Placement of Planets Create a new document that is 1200 x 1600px with a black background. Then, place the image of the planet in your document and move it to where you want it located. Because the colors of the planet are a little dull, let’s modify a little. Duplicate your planet layer by right clicking it and selecting Duplicate Layer. Set the new layer’s Blending Mode to Overlay. Go back to your original planet layer and grab your Burn Tool. Set the brush size to 300 px and make sure the Range is Midtones and the Exposure is 50%. Burn the lower left half of the planet, making sure you follow the curve of the planet as you do so.
Place the image of the moon in the upper-right area of the planet. Like we did with the planet, duplicate the moon and set the layer to Overlay.
Step 2: Creating the Environment Before creating an environment for our space scene, you may want to look at some resources and art work done by others to get some inspiration and knowledge. PSDTUTS has a great post with some amazing artwork done by talented artists. Make sure all of these layers are located beneath the planet layer. You may also want to put them in a group. Creating the Coloration Create a new layer and fill it with White. Grab a 300 px soft brush with 75% opacity and turn Scattering on.
Erase across your layer so that there are random areas of white and gray. Then set the layer opacity to 25%.
Create a new layer. Make sure your foreground and background colors are black and white, and go to Filter > Render > Clouds to fill your document with some black and white “clouds.” Then apply Filter > Render > Difference Clouds about three or four times.
Set the blending mode to Overlay, the Fill to 75% and apply the following Gradient Overlay.
Create two new layers. On each of them, render some clouds and apply difference clouds on only one of them. Set both of them to Overlay.
Creating the Stars Make a new layer and fill it with black. Go to Filter > Noise > Add Noise. Set the Amount to 10%, Distribution to Gaussian, and make sure Monochromatic is checked.
However, this adds way too many stars to our document. To fix this, go to Image > Adjustments > Levels. Set the left slider to 50 and the right slider to 100. This will keep only the larger stars and a few medium ones in the image. Then, set the blending mode to Screen so that only the stars show up and that the black areas of the layer are hidden. You may want to create multiple layers with this technique and lower the Opacity to create more depth.
Create a new layer and grab a white 5 px soft brush. Then change the brush settings to the following:
Brush areas of the new layer to add some larger stars. Don’t add too many, and try to put them in places that make them pleasing to the eye. Then add a white Outer Glow, with the blending mode set to normal.
More Coloration Create a new layer and fill it with a dark blue color, such as #1b1464. Grab a large 300 px soft eraser brush with 75% opacity. Turn the Scattering on and erase areas of the layer so that only certain parts are colorized. Try to leave more in the upper-right area of the layer, because this is the focal point of the graphic. Set the layer to Screen, and lower the opacity to 40%.
Repeat this process again with a different color, such as with a green, #20410a. Set this layer to 50% opacity.
Create a new layer and grab a large soft black brush, between 300 px and 800 px. Brush once or twice behind the upper-right corner of the planet. Lower the opacity to 40%, and then apply Outer Glow of the white, set to Overlay.
Color Balance Now for the fun part. This next step brings the background environment together! Go to Layer > New Adjustment Layer > Color Balance. Shadows:
Cyan/Red: +20 Magenta/Green: -3 Yellow/Blue: +20
Midtones:
Cyan/Red: -1 Magenta/Green: +23 Yellow/Blue: +31
Highlights:
Cyan/Red: +52 Magenta/Green: -17 Yellow/Blue: -76
Light Bursts Create a new layer. Grab a 300 px soft white brush, set to Dissolve, and brush once on the layer in the upper right. Then go to Filter > Blur > Radial Blur. Set the amount to 75, Zoom, and Best. Set the layer to Overlay. Repeat the process using a larger brush and apply it further down.
Empty Space On a new layer, grab a 500 px black brush and brush around the outer edges to create some nice black space. Make sure the bottom-left corner has more because we want that area to be dark.
Step 3: Planet Effects Make sure the following layers are all placed beneath the moon layer, so that they only apply to the planet. You may also want to put them in a group. Darkening Areas Duplicate your planet layer. On the bottom planet layer, apply a Filter > Blur > Gaussian Blur of 3 px. Then apply an Outer Glow of white, set to Overlay.
Create a new layer above your planet. Then, select your planet by Ctrl + clicking on the layer thumbnail of the planet. Fill the selection with black, and set the layer to Overlay. Then lower the opacity of the layer to 40%.
Create another new layer, and once again select your planet. Grab a 500 px soft black brush and brush around the outer edge of the planet, but leave the upper right untouched, because we want this to be the bright side of our planet.
Creating an Inner Glow Create a new layer, and select your planet. Grab a 300 px soft blue (#00aeef) brush, and brush around the outer edge of the selection, making sure you get more blue on the upper right of the planet because this is where our bright side is.
Create a new layer and select your planet. Fill the selection with white. Drag the selection diagonally down and to the left, and delete most of the white. Then apply a Gaussian Blur of 5 px.
Then give the layer an Outer Glow of white, set to Overlay.
Color Balance Once again, select your planet. Then go to Layer > New Adjustment Layer > Color Balance. You’ll notice that the color balance layer now has a mask applied to it of the selection we made. Shadows:
Cyan/Red: +6 Magenta/Green: -1 Yellow/Blue: -3
Midtones:
Cyan/Red: -78 Magenta/Green: 0 Yellow/Blue: +29
Highlights:
Cyan/Red: +47 Magenta/Green: -8 Yellow/Blue: -33
Glow Effects Once again, create a new layer and select your planet. Grab a 300 px white soft brush and brush around the bottom ¾ of the planet. Try to make the brushes fit the curvature of the planet. Then set the layer to Overlay, and lower the opacity to 50%.
Create another new layer and select your planet. Using a 300 px white soft brush, brush inside the upper-right side of the planet. Then set the layer opacity to 20%.
Create another layer, similar to the last one, except create more white space on this layer. Also, change the layer to Overlay and the opacity to 50%.
Create another new layer. This time, grab a 300 px brush and a nice red-orange color (#e6602b). Select your planet and then brush an orange area underneath the moon. Change the brush color to a yellow (#fdfc92) and brush a smaller area underneath the moon. Lower the layer opacity to 50%.
On a new layer, select a 200 px black brush and then brush around the bottom ¾ of the planet. Don’t restrict the selection to the planet this time. Let some of the brush overlap the background.
Intermission! I would like to take this moment to congratulate you if you’ve made it this far. This is quite a long tutorial and requires a lot of dedication from you to follow. Don’t be frustrated, either, if your example doesn’t look like mine. It takes years to develop your skills in Photoshop. Keep experimenting, and find some great inspiration and resources to keep you moving along. When working on a document of this complexity, make sure you keep all of your layers organized and labeled. Below you can see how I currently have my groups and layers organized and labeled, so that I can easily recognize them when I look back at them later. Ignore the hidden layers, those will come later.
Large view
Step 4: Moon Effects and Explosion Make sure all of the following are located above the moon layer. You may also want to put them in a group. Glow Effects Remember when we used a red brush and a yellow brush to create a glow in the upper right of the planet? We are going to do the same thing to the lower edge of the moon. Grab a 200 px red-orange (#e6602b) brush, and brush around the outer edge, ¾ of the way around the moon. Repeat the same process with a 100 px yellow (#fdfc92) brush. Then lower the opacity of the layer to 20%.
Remember how we created the white glow in the upper-right area of the earth? Repeat the same process for the moon. Select the moon on a new layer, fill it with white, move the selection down some and then delete most of the white. Apply a Gaussian Blur of 1 to 2 px. Then give it an Outer Glow of white set to normal.
Explosion Create a new layer and grab a 65 px white soft brush. Then brush a small area where the moon meets the planet. This layer will add to the effect that the next two layers create.
Create another new layer and keep your 65 px white brush. Brush a larger area underneath the moon. Make sure you follow the curvature of the moon as it meets the planet. Then, grab a small 3 px brush and turn Scattering to 1000% and Size Jitter to 75%. Brush some white particles around the area that you just brushed white.
While still on this layer, apply an Outer Glow with the color #ffa800, set to Overlay.
Create a new layer and fill it with black. Then go to Filter > Render > Lens Flare. Set the Brightness to 100% and the Type to 50 to 300 mm Zoom. Move the flare so that it is positioned towards the bottom left, and then press “Okay.”
Erase most of the layer, only leaving a small area around the main part of the flare. Then position the center of the flare over the moon. Then set the layer to Linear Dodge.
Create a new layer. Use a number of soft brushes with a nice red color (#ed1e26) to create a red hotness above the moon. Then lower the opacity of the layer to around 10 to 15%.
Step 5: Creating the Asteroids To create our asteroids, we are going to add another stock image to our document. There’s a great picture of a huge rock over at stock.xchng, so we’ll use that! Normally, you would use the pen tool to cut the rock out yourself, but I’ve done it for you to speed up the process.
Large view Open the image, and select the white background using the Magic Wand Tool. Then go to Select > Inverse to invert your selection, so that the rock is selected. Copy and paste it into your document. Then position it over the planet, rotate it so that the light part is facing the explosion, and finally resize it to a nicer size. Then duplicate it, and set the new one to Overlay. Press Ctrl + E to merge the two layers together so your asteroid is one layer again.
Duplicate your asteroid multiple times, resize it and rotate it. Do this until you have a nice little cluster of asteroids. If any of the asteroids gets blurry, go to Filter > Sharpen > Sharpen to sharpen it up a bit.
If you have any asteroids above other asteroids, they need to cast a shadow. Select the asteroid that has a shadow cast on it. Then, on a new layer above that asteroid, use a small soft black brush to brush a shadow in.
As before, use a nice orange (#e6602b) and yellow (#fdfc92) color to color the edges of the asteroids. Do this by Ctrl + clicking on the layer thumbnails and then using a large soft brush to brush the edges on a new layer. Set the layer mode to Multiply and the opacity to 50%.
Repeat the process multiple times for the other asteroids. Try to find other pictures of rocks to get some different sizes and shapes.
Step 6: Final Touches These next steps are for really going in and chiseling out the look we want. This stage usually involves a lot of experimentation and patience to get the look you want. Create a new layer on the top level of your document. Go to Image > Apply Image and press “Okay” to paste a merged copy of your document onto the layer. Go to Image > Adjustments > Desaturate to make the image grayscale.
Then go to Filter > Blur > Gaussian Blur and apply a blur of 2 px. Set the layer to Overlay and lower the opacity to 50%. What we just did was make our dark colors darker and our light colors lighter, and also add a small blur between them to give it a glow.
Large view Final Step: Pat Yourself on the Back There we have it: our Space Explosion is complete! I don’t know about you, readers, but I’m exhausted. Normally, pieces like this take days or weeks to put together, and now that you know how to do it you can create some original pieces of your own. Below, you will find some links to works that inspired this tutorial and others that are for inspiration. Resources
PSDTUTS: 40 Mind-Blowing Digital Space Paintings deviantART: Art deviantART: Brushes
About the author Tyler Bramer loves graphic design and game development. He constantly seeks to improve himself and find as much inspiration as he can. He passes any knowledge he has on to others as best as he can. You can follow Tyler on Twitter. (al)
© Tyler Bramer for Smashing Magazine, 2009. | Permalink | 22 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine
Post tags: explosion, photoshop, tutorial
February 22 2009, 6:14am | Comments »
-
I posted to smashingmagazine.com
Ask SM: How To Create A Colorful Sitemap With jQuery?
http://www.smashingmagazine.com/2009/01/22/ask-sm-how-to-create-a-colorful-sitemap-with-jquery/
We like to experiment with new ideas and concepts. We like to challenge ourselves and provide our readers with new formats. This post is the first in our “Ask Smashing Magazine” series, in which well-known developers from the web design community answer our readers’ questions and suggest solutions to common problems. Today, we are glad to welcome Chris Coyier, who you may know from his articles on CSS-Tricks, to our Smashing Magazine Editorial Team. From now on, Chris will regularly answer your CSS- and jQuery-related questions and present answers to the most interesting, useful and original ones in his articles on Smashing Magazine. Welcome, Chris! Of course, you can send any CSS- and jQuery-related question you want. To ask a question, you can do any of the following:
Send an email to Chris at ask [at] smashingmagazine [dot] com with your question, Post your question in our forum, putting “[Ask SM]” in the thread title (yes, the forum is not officially launched yet, but it is running!), Or, if you have a quick question, just tweet us @smashingmag or @chriscoyier with the tag “[Ask SM].”
Please note: Chris will do what he can to answer most questions, but he will certainly not be able to answer all of them. However, we hope that our forum may help you to solve your problem in case Chris couldn’t help you out. How To Design A Colorful Sitemap With CSS And jQuery? Let’s start with the first question from one of our readers:
“I was asked to design a sitemap for our new corporate project, but I wasn’t able to find any good tutorials on the Web. Could you help me out? We are looking for a well-organized, clean and colorful sitemap with dynamic effects (jQuery-based if possible).” Martin Tortier Chris Coyier answers: Content-heavy websites with a deep navigational structure can benefit from sitemaps. A sitemap contains links to every important page on a website, often visually organized in a hierarchy. They generally should not have opening and closing mechanisms to display the hierarchy. If you are forcing someone to click five times to drill down to what they are looking for, that is “navigation,” not a sitemap, and isn’t very helpful. Having every link visible at once is ideal for people searching the page for what they are looking for. Admittedly, though, visually browsing a large and deep sitemap can become confusing quickly. In this demo article, we will build a visually interesting sitemap that makes the hierarchy clearer through the use of color.
View Demo | Download Files Semantic HTML Markup The perfect HTML structure for a sitemap is the unordered list (<ul>) element. Each list represents one layer of the hierarchy. We can nest lists inside of other lists to build downward and complete the sitemap hierarchy. We will use a typical university as an example. University websites are often monstrosities of content, with pages ranging from information about the campus and admissions to sports to academic work to alumni foundations. Let’s take a look at some clean unordered-list markup. <ul> <li> <a href="#">Visiting Campus</a> <ul> <li> <a href="#">Tours</a> <ul> <li><a href="#">Undergraduate</a></li> <li> <a href="#">Walking</a> <ul> <li><a href="#">Guided</a></li> <li><a href="#">Unguided</a></li> </ul> <!-- END Walking --> </li> <li><a href="#">Group</a></li> <li><a href="#">Field Trips</a></li> </ul> <!-- END Tours --> </li> <li><a href="#">Campus Map</a></li> <li><a href="#">Events Calendar</a></li> <li> <a href="#">Athletics</a> <ul> <li><a href="#">Football</a></li> <li><a href="#">Baseball</a></li> <li><a href="#">Soccer</a></li> <li><a href="#">Volleyball</a></li> </ul> <!-- END Athletics --> </li> <li><a href="#">Arts</a></li> <li><a href="#">Science</a></li> <li><a href="#">Hospital</a></li> </ul> <!-- END Visiting Campus --> </li> <li><a href="#">Admissions</a></li> <li><a href="#">Student Life</a></li> <li><a href="#">Academics</a></li> <li><a href="#">International</a></li> <li><a href="#">Research</a></li> </ul> This markup, all by itself and completely unstyled, serves as a completely useable sitemap.
Styling with CSS Some very simple CSS will have this boring ol’ list spiffed up in no time. Indenting each child list, just as the browser does by default, makes good sense for establishing a hierarchy. We’ll keep that idea but house each list in its own box. We’ll shade the background of the boxes in shades of gray, from darkest gray at the “base” of the page (or highest level in the hierarchy) to lightest gray at the “top” (or lowest level in the hierarchy).
ul { padding: 8px 25px; list-style: none; background: #282828; } ul ul { background: #393939; } ul ul ul { background: #4b4b4b; } ul ul ul ul { background: #5a5a5a; } Of course, we have already performed a basic CSS reset, set up some basic typography and applied some background images for extra spiffiness. You can view the complete CSS if you want to see it in its entirety. Here is what we have so far:
Bonus CSS for WebKit Browsers Our effect is starting to look like boxes stacked on boxes. For a bit of progressive enhancement, we can build on this look with the CSS3 box-shadow property. Currently, only WebKit browsers support this feature with a proprietary extension, but it works! To create this effect, add this CSS:
ul { -webkit-box-shadow: 2px 2px 5px black; }
Hey! Why do those inner lists look faded out like that? Don’t worry, that doesn’t have anything to do with the drop shadow. We are going to be working with that in our next step! Adding the Color Effects with jQuery We are going to use the jQuery JavaScript library to really make this sample sitemap sing. Remember, the goal is to keep the hierarchy defined through use of color. The idea here is, when the mouse cursor hovers over a list, that list will brighten up a bit and fade to a unique color. When the mouse cursor is removed, the list will return to its original color. For example, our “outer” list will fade to a purple color when the mouse hovers over it. This is a distinctive effect and allows your eye to follow the purple border and see all the other list items that are a part of that list, despite it being broken up by sub-lists. We will be animating both the color and opacity of the list. jQuery can animate opacity out of the box, but animating color requires use of the jQuery color plug-in. For the sake of speed, let’s load jQuery from Google, and then link to our own JavaScript file where we’ll be writing our code:
<script src="http://www.google.com/jsapi" type="text/javascript\"></script> <script type="text/javascript\"> google.load("jquery", "1.2.6"); </script> <script type="text/javascript\" src="js/jquery.color.js"></script> <script type="text/javascript\" src="js/sitemap.js"></script> Now we can dig into our own sitemap.js file. The first order of business is to execute our code only when the DOM is ready for it. Then we will set the opacity level of each of our lists to 50%.
$(function(){
$("ul").css("opacity", "0.5");
// Do fading stuff
}); Avoiding Repetitious Code, Building a Plug-In Each of our lists will get the same “fading” effect, but each will be just slightly different in that it will fade to a different color. To avoid a bunch of unnecessary and unwieldy repetitive code, let’s abstract the fading effect into a simple plug-in we’ll call “doFade.” Now we can call that plug-in function on each “layer” of the list and pass the color with a parameter.
$(function(){
$("ul").css("opacity", "0.5");
$("ul").doFade({ fadeColor: "#362b40" }); $("ul ul").doFade({ fadeColor: "#354668" }); $("ul ul ul").doFade({ fadeColor: "#304531" }); $("ul ul ul ul").doFade({ fadeColor: "#72352d" });
}); Let’s take a look at the entire function and discuss its functionality a bit.
jQuery.fn.doFade = function(settings) {
// if no paramaters supplied...settings = jQuery.extend({ fadeColor: "black", duration: 200, fadeOn: 0.95, fadeOff: 0.5 }, settings);
var duration = settings.duration; var fadeOff = settings.fadeOff; var fadeOn = settings.fadeOn; var fadeColor = settings.fadeColor; $(this).hover(function(){ $(this) .stop() .data("origColor", $(this).css("background-color")) .animate({ opacity: fadeOn, backgroundColor: fadeColor }, duration)}, function() { $(this) .stop() .animate({ opacity: fadeOff, backgroundColor: $(this).data("origColor") }, duration) });
}; The function accepts parameters passed to it that it reads as “settings.” The first thing we do is set defaults for those settings, in case the function is called when they are not supplied. This is exactly the case of our code, because we will provide the “fadeColor” but not the duration or fadeOff or fadeOn values.
fadeColor: the background color that the element will fade to. duration: how long the animation takes to complete, 1000 = 1 second. fadeOn: opacity percentage when element is hovered on, 0.95 = 95%. fadeOff: opacity percentage when element is not hovered on, 0.5 = 50%.
Then we set up the hover function, which binds itself to the element that we called the function on. Hover is actually two functions. The first runs when the mouse hovers over the element, and the second is a callback function when element is no longer being hovered on, essentially a mouseout. We do three things in the first function. First we .stop(), which ensures any animation being run on the element is stopped. This prevents animations from queuing if the element is hovered on and off quickly, which looks awkward. Then we use jQuery’s brilliant .data() function to store the original color of the element. Remember, each of our lists has its own unique shade of gray; so to avoid hard-coding nonsense, we’ll just auto-detect this color with the .css() function and save it to a variable we’ll call “origColor.” Then we animate both the opacity and the background color to the settings. In the callback, we’ll again .stop() the animation. Then, all we need to do is animate it back to the original color (which we have stored) and revert to the “off” opacity value. So there you have it, Martin!
View Demo | Download Files Become the author of the “Ask SM”-section! Please notice that we are looking for professionals and experts who know Photoshop, Illustrator, PHP or Ruby On Rails and have a long experience with these tools / languages. If you can regularly answer questions from our readers (in posts on SM, in the forum or on Twitter), please let us know. We’ll pay you, of course. What should the new section focus on? What do you think about the new section on Smashing Magazine? What should it focus on? What problems and solutions would you like to see covered in our posts? Please vote in the poll and let us know how we can improve this new section on Smashing Magazine by commenting on this post! Your input is very important to us! Thanks. What should the “Ask SM”-section focus on? ( polls) (al)
January 22 2009, 4:27pm | Comments »
-
I posted to smashingmagazine.com
50 Excellent Adobe Illustrator Video Tutorials
http://www.smashingmagazine.com/2009/01/04/50-excellent-adobe-illustrator-video-tutorials/
Adobe Illustrator is the industry-standard when it comes to the creation of vector graphics. Though a very robust tool - the learning curve involved in mastering it can be high. Thankfully, there are abundant resources on the web that allows you to “learn by doing”. Video tutorials (in general) enable the learner to witness – step-by-step – how a particular technique works. We often learn best by seeing how things are done and following along with the instructor (much like in a classroom environment). In this article, we present to you 50 excellent Adobe Illustrator video tutorials. We’ve broken down the video tutorials into several categories that include creating objects, effects, and general tips and techniques. So fire up Illustrator, watch a few of these videos, and hopefully you will have learned a tip or two by the end of your adventures into these Illustrator video tutorials! General Tips and Techniques Patterns and Shapes in Adobe Illustrator This tutorial is based on an advertisement that uses patterns and shapes to create a unique design effect.
Importing and Manipulating Images in Illustrator Learn the concepts of importing and manipulating external images in Illustrator.
Creative Masking Techniques See a method for using complex masking techniques in Illustrator.
Making a Custom Art Brush Create your own custom Art Brush that you can re-use in multiple projects via this Illustrator video tutorial.
Using Kuler with Illustrator This tutorial walks you through the process of interfacing with kuler (a community website for sharing color themes) via Illustrator so that you can easily select your color pallete.
Live Color in Illustrator CS3 Learn about the Live Color option in Illustrator.
Complete Guide to the Pen Tool Master the Pen tool (one of the most used and complex features in Illustrator) in this video tutorial.
All about Masking Learn the concepts of masking in Illustrator in this video tutorial.
Adobe Illustrator Masking Tutorial This short and sweet tutorial will cover the basics of masking in Adobe Illustrator.
Opacity Mask You’ll learn about a technique for performing opacity masking (usually done in Photoshop) in Adobe Illustrator creative selecting with the Marquee tool.
Clipping Masks Learn about clipping masks to streamline the creation of complex objects in this excellent Illustrator video tutorial.
Vespa Speed Trace In this video, you’ll see a method for speed tracing a stock image (in this particular case, a Vespa scooter is used as the reference image).
Offset Path tool Master the Offset Path tool by following along this video tutorial.
Using the Paintbrush Tool You’ll discover the powers of the Paintbrush tool in Illustrator in this excellent video tutorial.
Working with Layers and Groups Understanding layers and groups in Illustrator (which is slightly different in Photoshop) can be a daunting task – but not so if you watch this video tutorial.
Working with Gradients and Blends Learn the concepts and techniques behind utilizing gradients and blends to add graduated colors onto your Illustrator objects.
Select Objects Faster and More Efficiently Maximize your workflow by learning how to select different objects on your Illustrator document in this video tutorial.
Creating Objects Creating an iPod In this video tutorial, you’ll see the process involved in rendering an iPod Nano from scratch using the 3D Effect tool (among other tools and techniques) in Illustrator.
Creating 3D Shapes in Illustrator Utilize the Revolve tool in Illustrator to create a great-looking 3-dimensional shape.
Draw Fluffy Clouds Create an illustrated cloud using the Pencil tool in Adobe Illustrator via this video tutorial.
How to Draw an Eye In this video tutorial, you’ll learn the process of drawing an eye in Illustrator.
Drawing Face Witness a process for creating a vectorized face using a reference photo.
Create a Gear You’ll witness the creation of a complex gear object in this Illustrator video tutorial that involves a variety of techniques and tools like the Pathfinder tool.
Drawing a Gel Progress Bar Learn how to create a stylish progress bar (inspired by the iPod progress bar) using a combination of techniques including the use of gradients and masking techniques.
Create Swirling Rainbows with Ease Create the popular swirling rainbows graphic in Adobe Illustrator by following along this video tutorial.
Make a Fully Vector Metal Help Icon/Button Make a metallic, shiny vector (and thus flexible in scale) icon via this Illustrator video tutorial.
3D Brochure Add a bit of flare onto your print design mock-ups by making them 3-dimensional. This video tutorial shows you how to do it with a brochure, but it can easily be adapted to CD labels, software boxes, and other print design objects.
Watermelon Learn how to render a watermelon in Adobe Illustrator via this excellent video tutorial.
Vector Drawing: “Dog” In this fast-paced video, you’ll witness the steps involved in drawing a dog in Illustrator.
Creating Vector Swirls and Swooshes This tutorial shows you how to create trendy swirls and swooshes using the Pen tool.
Roundtrip Logo from Illustrator to Photoshop Find out the methods of an effective workflow that utilizes the power of Illustrator and Photoshop to create a grungy logo design.
Batman Logo Create the Batman logo via this tutorial that shows you the true powers of the Illustrator’s Pathfinder tool.
Feynman Diagrams Create a Feynman diagram in Illustrator for presentations and reports.
Create 3D Pyramid This Illustrator video tutorial will walk you through the creation of a 3-dimensional pyramid.
Drawing a Nice Vector Golden Badge Award In this video tutorial, you’ll be using a variety of Illustrator techniques including masking and working with the Pen tool to create a gold badge.
Vectoring an EyeBall Learn to vectorize a human eye using a reference photo.
Creating Seamless Pattern You’ll be creating a seamless floral pattern in this Illustrator video tutorial.
Tribal Sun Vector Create a tribal Sun illustration by following along this excellent video tutorial.
Effects Simple Silhouettes in Illustrator CS4 Apply silhouettes onto objects by utilizing the Gradient Mesh tool.
Create Wood Effect Using Gradients Create a wood texture in Illustrator by using the Gradients tool.
Creating a “Firebrush” Logo Make a fiery, fierce abstract logo design in Adobe Illustrator video tutorial.
Brushed Metal Effect Give objects scalable “brushed metal” (also known as “brushed aluminum”) texture by following along this Illustrator video tutorial.
Vector Grunge Patterns and Distressed Text Give text a distressed/worn effect via this Illustrator video tutorial.
Creating Glass, Shining, Reflective, and Vector Text Go Web 2.0 in Illustrator by creating this sleek, shiny, glossy text effect.
Creating Comic Book Style Text Give your text a comic book look-and-feel by following along this video tutorial.
Creative Background Effects In this video tutorial, you’ll learn how to create abstract backgrounds/textures in Illustrator.
Abstract Vector Background Create a stylish vector background by viewing this excellent Illustrator video tutorial.
Adding Texture You’ll learn how to give your vector objects some texture in this video tutorial.
Create Intricate Patterns Learn to create complex patterns in Illustrator via this detailed and highly-involved video tutorial.
Creating Vectorized Shining and Sparkling Heart Artwork and Icons Make a vector heart piece by following along this wonderful Illustrator video tutorial.
Related content
Adobe Illustrator Tutorials - Best Of Adobe Illustrator Tutorials - Best Of: Part 2 Designing Websites In Illustrator?
About the Author Jacob Gube is a Web developer/designer and author of Six Revisions, a blog on Web development and design. If you want to connect with the author, you can follow him on Twitter.
- Tags:
- Tutorials
- illustrator
- adobe
- video
January 4 2009, 1:50pm | Comments »
-
I posted to smashingmagazine.com
60 Beautiful Christmas Photoshop Tutorials
http://www.smashingmagazine.com/2008/12/16/beautiful-christmas-photoshop-tutorials/
By Dirk Metzmacher Christmas is a holiday of love and family. It is the time of year when people come together to celebrate, when they realize that some things are more important than others. So why don’t you impress the people who are important to you with some unique Christmas cards or beautiful personal desktop wallpaper? In this post, we present 60 beautiful Christmas Photoshop tutorials. You’ll learn how to design Christmas trees, snow globes, snowflakes, Christmas candles, Christmas balls and much more. Some designers go even further, taking the time to draw Christmas illustrations or replace old icons with festive ones. Often, designers will draw Rudolph the Red-Nosed Reindeer and friends or create a Christhmas theme for their website layout. You may be interested in the following related posts:
Christmas Wallpapers Christmas Icons and Christmas Wordpress Themes 50 Beautiful Winter Wonderland Photos
Christmas Wallpapers
The Santa Claus WallpaperLearn how to create a funny, festive Christmas wallpaper with Santa Claus.
Night Before ChristmasThis illustration is well suited for children. Allover rounded corners.
Beautiful Christmas Vision TutorialThis tutorial teaches you how to use pen tool, paths, smudge tool to to create a Christmas 3D effect in Photoshop.
Abstract Christmas WallpaperAbstract wallpaper in red with some gifts and stars.
Christmas Night - Making ofA sophisticated collage. The sky over Christmas.
Creative CardsA snowman in a suitable landscape.
Christmas ornaments wallpaper Warm colors are always perfect for Christmas. Golden balls, some loops and stars.
Christmas BackgroundsChristmas balls with reflection.
Christmas Balls WallpaperRed Christmas balls with a frame made of stars.
Snow LandscapeA snowy landscape with large snow buildings. Santa Claus lives there maybe.
A Very Snowy TutorialDozens of snowflakes in detail.
Christmas Tree
Merry Christmas GreetingLearn how to create a flashy Christmas illustrations with snowflakes and a Christmas tree.
Tree in snowCreate a Christmas tree in a snow landscape.
Draw a Christmas treeThe perfect Christmas tree. Large, straight and discreetly decorated.
Christmas TreesComic Christmas trees in a rounded style.
Many treesMany Christmas trees in a beautiful snowy landscape.
Abstract Christmas tree A Christmas tree, whose shape is formed from stars. Some curves support to keep the tree form recognizable.
Merry Christmas tree designAgain: Stars guarantee for the shape of the tree.
Fresh Christmas TreeSome ornaments and stars give a Christmas tree.
Christmas WallpaperAn abstract Christmas tree. As in a dream or underwater.
Christmas tree designIn an illustration styles shaped Christmas tree.
Christmas Balls
Christmas OrnamentLearn how to make a shiny glass ornament with a snowflake motif for the holidays.
Christmas Tree OrnamentChristmas ball with a motive. A snowman over the self-designed ball.
Christmas Balls Design Two Christmas balls with bands and stars.
Christmas Glass OrnamentsShiny balls, which were decorated.
Christmas lights ballsGolden Christmas baubles with glowing lines in the interior.
Glowing christmas ballThis tutorial describes how a ball gets a shine.
Ornament ballsAn illustration with several balls and stars.
Christmas BallsThree Christmas balls with a reflection.
Christmas ornament ballsThree balls, three samples. A good alternative to the shiny versions.
Decoration
Decorate with Colored LightsCreate a garland only in Photoshop.
Christmas Candle BridgeSome candles on a nice stand.
3D Snow GlobeNot only the snowman or the landscape is designed in this tutorial. Even a snow globe.
Cute X’mas CandleA candle with a bit of decoration and a stand. All thanks to Photoshop.
Christmas Holly tutorialThe traditional decoration in comic style.
Holy Text
Wrapped Text EffectA few letters wrapped as gifts.
FrostAn ice-cold lettering. Frozen letters in Photoshop.
Snow on TextCreate artificial snow on the letter.
Merry ChristmasA very simple effect for beginners.
Merry Christmas CardA Merry Christmas. Includes a wreath.
Christmas Cards
Christmas cardA Santa Claus, some fir trees and congratulations revealed this beautiful card.
Christmas color conceptual graphicA rather abstract illustration with a few stars and lines.
Gifts snowingGifts fall from the sky. A dream comes true.
Christmas Greetings PostcardVery large packages. Here is the result of a card in the grunge style.
We wish you a Merry ChristmasA cute snowman in a beautifully designed snowy landscape with some trees.
Christmas GreetingIt has everything: candles, pine branches, Christmas balls and stars.
A nice Christmas cardA Christmas card in the Web 2.0 style.
Last-Minute Holiday e-CardGolden glitter forms a Christmas tree. That also like Santa.
Draw Merry Christmas IllustrationSome Christmas balls with different design.
More Christmas Stuff
Christmas Shiny BackgroundHow to make a sock with a seasonal pattern in Photoshop.
SnowflakesCreate your own Snowflakes step by step in Photoshop.
Christmas RSS IconAdorn the RSS icon with a Christmas tree.
Santa’s Sleigh DrawingSanta has forgotten his sleigh. Your chance to take off.
Pretty Girl in Christmas SuitSanta Claus girl. Very sexy.
Christmas Blue CandleAn abstract candle on a green pattern.
Rudolph the Red Nosed ReindeerRudolph leads us through Photoshop.
Christmas bellDesign a Bronze christmas bell with handle.
Christmas HatThe hat of Santa Claus. Just as we know it.
Web LayoutDesigning a Christmas-Themed Web Layout.
Dancing Santa Claus and Christmas TreeSanta Claus, a snowy landscape and a large Christmas tree in the background.
Christmas Ornament Tutoriala christmas ornament made out of shrinkable plastic and adorned with my favourite itsy bitsy buttons.
Related posts You may be interested in the following related posts:
Christmas Wallpapers Christmas Icons and Christmas Wordpress Themes 50 Beautiful Winter Wonderland Photos
December 16 2008, 2:44pm | Comments »
-
I posted to smashingmagazine.com
50 Excellent Digital Photography Photoshop Tutorials
http://www.smashingmagazine.com/2008/12/07/50-excellent-digital-photography-photoshop-tutorials/
Adobe Photoshop is the industry standard for digital-image editing and graphics creation. Photoshop’s versatility makes it a popular choice among Web designers, graphic designers, digital media artists, print designers, photographers and other professionals in design and image-editing. Whether you’re designing a business card or website or digitally enhancing an image, you can rest assured that Photoshop will give you the necessary tools to get the job done. In this article, we focus on tutorials on digital photography. You’ll find an assortment of top-notch tutorials that deal with applying post-production techniques and effects, color correction, enhancement and photo retouching. So fire up Photoshop and try out some of these wonderful tutorials on your own photos! Without further ado, we present you with 50 Excellent Photoshop Tutorials for Digital Photography. Photo Effects HDR-Style Results Using Layers in Photoshop Learn how to achieve HDR results in Photoshop using bracketed exposures during the production process and then Photoshop layers afterwards.
How to Create Professional HDR Images Here’s an excellent (and very popular) tutorial on creating high dynamic range (HDR) images; the author focuses on realism instead of going overboard with the application of HDR.
Photoshop HDR tutorial This tutorial shows you how to create true HDR using bracketed exposure and Photoshop for post-production.
Using the HDR Feature in Photoshop CS2/CS3 This thorough tutorial walks you through the basic concept of HDR photography and how to use Photoshop to make your photographs pop.
How to Make Digital Photos Look like Lomo Photography In this tutorial, you’ll learn how to apply the “lomography” effect to your digital photos.
Infrared Photo Effect in Photoshop This tutorial shows you a way to simulate the infrared effect with photos taken using point-and-shoot cameras.
Exposure blending tutorial Create an HDR photo by blending exposures with this Photoshop tutorial.
Your photos, 300-style! Give photographs the sepia-toned 300 movie effect.
How to Use Photoshop’s Lens Blur Tool for Tilt-Shift Fakery Tilt-shift lenses are expensive and not very versatile. Save some money by checking out this Photoshop tutorial on how to fake tilt-shift photography.
Tilt Shift Photoshop Tutorial: How to Make Fake Miniature Scenes Here’s another method for faking tilt-shift photography.
The Tilt-Shift Miniature Fake Technique This tutorial walks you through the basics of picking a subject for the tilt-shift effect and using Photoshop’s blur and gradient tools to fake it.
Vignette 2.0 Give your photos a natural-looking vignette effect by following along in this Photoshop tutorial.
Adding a Diffuse Glow to Your Images Apply diffuse glow to your photographs to create a dreamy effect with this Photoshop tutorial.
Image Enhancement and Correction Improving Landscape Photographs Enhance your landscape images by reading through this Photoshop tutorial.
Using Masks to Improve Landscape Images Use the masking feature in Photoshop to improve your landscape images.
Color Correction, by the Numbers Use CMYK values (obtained with the eyedropper tool in Photoshop) to correct colors in a photograph.
Color Correction Using Levels and Eyedroppers In this Photoshop tutorial, you’ll see another method of correcting colors by using the levels-adjustment feature and by sampling colors with the eyedropper tool.
Enhance Your Image with Selective Color Adjustments This tutorial uses a “non-destructive” and selective method for enhancing colors in a photograph.
Black and White Is the Key to Better Color Temporarily convert your image to black and white to improve color enhancement methods in Photoshop.
Understanding Local Contrast Enhancement This excellent Photoshop tutorial explains local contrast enhancement and a method for using the unsharp mask feature.
Local Contrast Enhancement Learn the theory behind local contrast enhancement and learn a practical way of applying the method to enhance images.
Sharpening Using an Unsharp Mask Learn the concept behind the unsharp mask feature in Photoshop to sharpen photographs.
Sharpen Those Photos: Unsharp Mask This tutorial shares a brief history of traditional photo sharpening techniques and how to sharpen images digitally in Photoshop.
Noise Reduction by Image Averaging Reduce image noise in Photoshop by following this in-depth tutorial.
Using the Photoshop Levels Tool This tutorial discusses the concept behind Photoshop’s levels tool, as well as how to use it effectively to enhance photographs.
Using the Photoshop Curves Tool In this Photoshop tutorial, you’ll learn about the curves tool in Photoshop and how to use it to improve photographs.
Advanced Photo Sharpening This Photoshop tutorial shares a more complex method for sharpening photos using a variety of techniques such as using filters and setting threshold adjustments.
Controlled Image Sharpening Learn another method of controlled image sharpening via this Photoshop tutorial.
Digital Blending Learn how to enhance dynamic range by reading through this excellent Photoshop tutorial.
Gaussian Blur Learn how to use Gaussian blur to enhance and soften photographs in Photoshop.
Lens Correction Filter in Photoshop CS2 Learn about the lens correction filter in Photoshop to fix image distortions.
Photo Manipulation and Retouching Add Dynamic Lighting to a Flat Photograph Add dynamic lighting to a photograph to make it pop in this Photoshop tutorial.
Getting a Grip on the Vanishing Point Filter Learn how to use Photoshop’s vanishing point filter to extend certain areas in the photograph.
How to Stitch Photos in Photoshop Learn a method of stitching together two photographs using Photoshop.
Super-Fast and Easy Facial Retouching In this tutorial, you’ll learn a method for hassle-free and speedy facial retouching.
Quick and Effective Facial Photo Retouching Here’s another method for quick and easy facial retouching.
Four Easy Photoshop Techniques to Make Your Pictures Pop! This tutorial shares four simple but effective Photoshop techniques for isolating a subject.
Awesome Photo-Realistic Coloring Techniques Learn the basics of coloring techniques via a practical example (coloring the hair of a black-and-white photograph) in this wonderful Photoshop tutorial.
Removing Objects From Photos Learn the basics of removing objects you don’t want to be seen in your photographs by following along in this Photoshop tutorial.
Black and White with a Splash of Color In this tutorial, you’ll see a method for the selective coloring of a black-and-white photo.
Hand-Colouring a Black-and-White Photo in Photoshop Learn a method of manually coloring a black-and-white photo in Photoshop.
Converting a Digital Color Photo to Black and White Here is another effective method of converting colored photographs to black and white.
Colour to Black and White Using Channel Mixer Convert photos from color to black and white using Photoshop’s channel mixer.
Quick Fix for Cluttered Backgrounds Cluttered backgrounds can be a distraction from the photo’s subject. Here’s an introductory-level tutorial on reducing visual clutter in the background of a photograph.
Antiquing Digital Images in Photoshop You don’t have to wait decades for your photographs to fade in color; simulate the effect using Photoshop.
Change Hair Color Photoshop Tutorial Learn a method of retouching a subject’s hair color via this excellent Photoshop tutorial.
Creating a Sunset Effect in Photoshop Tutorial Give photographs taken in the middle of the day a sunset effect by following along in this Photoshop tutorial.
Photo Retouching: Spotlight Effect In this Photoshop tutorial, you’ll learn how to highlight parts of a subject by giving the area a digitally placed, but natural-looking, spotlight.
Image Retouching: Advanced Skin Softening Learn a method of removing skin blemishes by softening the skin using the surface blur filter in Photoshop.
Nesting Smart Objects for Multi-Mask Effects in Photoshop Learn all about nesting smart objects in Photoshop to smoothen and sharpen details in a photo.
Related posts If you enjoyed this article, you may also want to check out the following Smashing Magazine articles:
35 Beautiful Vintage and Retro Photoshop Tutorials 70 Beauty Retouching Photoshop Tutorials 50 Photoshop Tutorials For Sky and Space Effects 40 Beautiful Grunge Photoshop Tutorials The Ultimate Collection Of Useful Photoshop Actions Photoshop Tutorials To Improve Your Modeling and Design
About the Author Jacob Gube is a Web developer/designer and author of Six Revisions, a blog on Web development and design. If you want to connect with the author, you can follow him on Twitter. (al)
- Tags:
- Tutorials
- photography
- photoshop
- digital
December 7 2008, 1:53pm | Comments »
-
I posted to smashingmagazine.com
Photoshop Tutorials To Improve Your Modeling and Design Skills
http://www.smashingmagazine.com/2008/11/03/photoshop-tutorials-to-improve-modeling-skills/
by Vailancio Rodrigues and the Smashing Magazine Editorial Team You have to use Adobe Photoshop for a really long time to understand its potential completely. There are many things you can do using its endless features. You need to discover them and decide how to use them in new and innovative ways to create the creative, beautiful and realistic digital art. In this article, we look at Photoshop in a different way: as a tool for designers to create realistic objects and 3D models. Below you’ll find over 50 Photoshop tutorials that teach you how to create beautiful realistic objects and 3D models. Let’s see what it takes to turn Photoshop into a design workspace. We also have a plenty of tutorials on using Photoshop to improve the quality of your images:
Adobe Photoshop Tutorials: Best Of 70 Beauty-Retouching Photoshop Tutorials 50 Photoshop Tutorials For Sky and Space Effects Adobe Photoshop Tutorials: Rainbows, Glows and Light Effects 40 Beautiful Grunge Photoshop Tutorials 35 Beautiful Vintage and Retro Photoshop Tutorials The Ultimate Collection Of Useful Photoshop Actions
USB Drives Floating USB This tutorial shows how to illustrate a USB key floating in the air and reflecting on a surface.
USB Stick
Notebooks MacBook Pro Design a MacBook Pro in Photoshop using shapes and different blending options to get a realistic look.
Slick MacBook Create a slick white Apple MacBook in Photoshop.
MacBook Air This 20-step tutorial explains how to make the MacBook Air ad.
Watches Unique Watch
Watch In this tutorial, you will learn how to create a watch from scratch in Adobe Photoshop.
Screens Realistic LCD HDTV This tutorial teaches you how to create a photo-realistic wide-screen LCD HDTV from scratch.
LCD Monitor Learn how to create an LG-style LCD monitor icon from scratch in Photoshop.
Cellphones, PDA & Co. HTC Touch Create a mobile phone styled like the HTC Touch Diamond using Adobe Photoshop.
Loox Pocket PC This tutorial shows you how to create an interesting pocket PC using only Photoshop.
Apple iPhone Designing the Apple iPhone in Adobe Photoshop.
Realistic Blackberry Create a realistic Blackberry-style mobile phone from scratch using Adobe Photoshop.
Sony Ericsson W800 Very detailed tutorial that teaches you how to draw the Sony Ericsson w800 Walkman phone from scratch in Adobe Photoshop.
Speakers Bangin’ Woofer Embedded in Wood Create a realistic speaker, and make a simple wood texture for the background.
3D Speakers Designing 3D speakers in Adobe Photoshop.
Apple iMac Apple iMac Create an Apple iMac in Adobe Photoshop.
Slick Black iMac Turn a white iMac into a black iMac in Photoshop.
Computer Mice Mouse Designing a mouse in Adobe Photoshop.
iMouse Designing the Apple iMouse in Adobe Photoshop.
Music Players Fantastic 3D MP3 Player Learn how to create a 3D MP3 player from scratch using only Photoshop.
Shiny Photo-Realistic Apple Remote This tutorial teaches you how to make a shiny Apple remote.
iPod Shuffle Learn how to create an Apple iPod Shuffle.
Black Zune 2 Designing a black Zune 2 in Photoshop.
iPod Classic Photoshop tutorial to create an iPod Classic or an iPod Nano.
iPod Touch This tutorial shows you how to create an iPod Touch from scratch in Photoshop using no source images.
4th Gen iPod Nano Designing a photo-realistic iPod Nano in Adobe Photoshop.
Cars Mustang Car Illustration Tutorial shows how to use and organize layers in Photoshop to create a car illustration.
Quick car rendering in Photoshop This tutorial shows how to quickly render a car in Photoshop with a marker rendering style.
Porsche This tutorial shows how to create a Porsche illustration in Photoshop starting from a scanned hand-drawn sketch.
Game Consoles Wii Controller A Photoshop tutorial on designing the Wiimote controller.
Retro Style Game Controller “In this tutorial, we’re going to be drawing a retro game console controller. Rather than a perspective look, this one will have an isometric look. This tutorial is extremely detailed, and will be fun for all you classic arcade lovers.”
Nintendo Wii This Photoshop tutorial shows you how to design the console by Nintendo.
Xbox 360 Draw Microsoft’s Xbox 360 console in Photoshop using a reference image, simple techniques, such as the gradient tools, and the pen tool.
Sony PlayStation 3 Create a realistic-looking Sony PlayStation using Adobe Photoshop.
Other Models and 3D-Objects Realistic 3D rack server This tutorial shows a very nice technique for creating 3D servers. Convert 2D Image Into 3D Model Using Photoshop Adobe Photoshop CS3 tutorials on converting a 2D image into a 3D model. Design a Detailed Compass Icon In Photoshop A drawing tutorial for icon lovers in which the authors explains the design of a metallic compass step-by-step.
Making a 3D scene using 3D models In this tutorial, create a nice 3D scene using 3D models in Adobe Photoshop CS3 Extended.
Realistic Wine Bottle This tutorial teaches you how to create a super-realistic bottle of wine completely from scratch. You will learn how to use the pen tool effectively, as well as gradient/pattern overlays and other drawing techniques.
Camera Tutorial for Adobe Photoshop 6 and 7 users that will teach you how to create a photo camera from scratch.
Electronic Torch Light This tutorial explains how to create an electronic torch light icon in Adobe Photoshop.
Vintage Film Style Video Photoshop CS3 Extended allows you to edit video and animations. Also, you can convert an existing video into a Smart Object and apply filters to it. This time we’re going to give a video a vintage feel and mock it up inside an old TV screen.
Dramatic 3D Wood Cup In this basic tutorial, you’ll learn how to create a 3D cup from scratch in Illustrator, how to apply some texture to it in Photoshop, and also how to use the Vanishing Point filter to create a mock-up and apply realistic shadows.
Super-Shiny Pencil This tutorial shows how to create a super-shiny pencil icon.
Matchbox This tutorial consists of creating a digital illustration of a box of matches in Photoshop, creating the matchbox cover design and the striker from a pattern, placing the cardboard texture on the box and then aligning everything into a 3D perspective.
Swiss Army Knife Learn how to create a Swiss Army knife.
About the author Vailancio Rodrigues is an emerging webmaster who also maintains a blog of his own, Technology Tips, which provides reviews, tips and tricks for various gadgets. (al)
November 3 2008, 2:54pm | Comments »
-
I posted to smashingmagazine.com
ExpressionEngine Developer’s Toolbox
http://www.smashingmagazine.com/2008/10/29/expressionengine-developers-toolbox/
While open-source CMS options like WordPress get a lot of attention from bloggers and designers, ExpressionEngine is a powerful, robust choice that many designers and clients would find more suitable to their needs. And as with the other CMS options, there are plenty of online resources for designers and developers who are working with ExpressionEngine. In this article you’ll find a helpful collection of resources to aid you in your work with EE. For more CMS Toolboxes, see:
WordPress Developer’s Toolbox Drupal Developer’s Toolbox
- Tutorials The EE community provides lots of tutorials for learning how to do just about anything in EE. Whether you’re brand new and don’t know where to start, or experienced and looking for some advanced techniques, there are existing resources to show you new things. Here is a look at a sampling of the tutorials that are available. 1.1 Beginner Tutorials Installation InstructionsInstall EE in six steps. An Introduction to ExpressionEngineA solid starting point that gives you all the basics of building a website with EE.
First Steps in ExpressionEngineA good beginner’s guide, with explanations on the basics of EE. Categories and Paths in ExpressionEngineA look at the URL structure created by EE by default.
Quick Start TutorialA beginner’s tutorial from EE that is intended to help new users get up and running quickly. 1.2 Building Websites Building a Small Business WebsiteA 17-part tutorial series that takes you through the entire process of building a website with EE from start to finish (also available in book format).
Building a Church SiteA 27-part tutorial series on building a church website with a blog, an events calendar, photos and more.
Creating Custom Listings with ExpressionEngineDarren Hoyt looks at some problems with creating manageable websites for clients and shows how EE can help, as compared to WordPress (see parts 1 and 2).
1.3 Working with Audio Powering an Audio Archive with ExpressionEngineA tutorial on using custom fields to power an audio archive. ExpressionEngine PodcastingThis tutorial shows the process of publishing a podcast with EE with the help of a plug-in. 1.4 Image Galleries and Slideshows Monoslideshow and EE GalleryThis tutorial will help you set up a Flash slideshow on your EE website.
Member Photo Gallery in ExpressionEngineDisplay a gallery of photos uploaded by members of your website.
1.5 Working with Blogs The ExpressionEngine Phase of My New BlogVeerle takes us through three features of her blog: the header, the related links and the archives.
Add FeedBurner to ExpressionEngineA fairly simple tutorial for EE users who want to use FeedBurner to publish their feed.
AJAX Archives in ExpressionEngineAdd some JavaScript to the standard archives.
How Subtraction.com was Converted to EEThis post provides the details on and tons of code examples for Khoi Vinh’s Subtraction.com.
1.6 Navigation Dynamic CSS Navigation Highlighting with ExpressionEngineA quick tutorial on making the category menu auto-highlight.
ExpressionEngine and Suckerfish MenuA tutorial on adding a vertical drop-down menu.
Auto Navigation Highlighting in ExpressionEngineAnother look at the subject of highlighting the current navigation item.
1.7 Other Tutorials These tutorials don’t fit into one of the main categories. No-Module-Required Static Content in ExpressionEngineLooking to build a website with static content? Some popular modules are options but are not necessary.
PayPal Options and ExpressionEngine’s Simple Commerce ModuleA tutorial on building a more flexible shopping cart than is possible with just the Simple Commerce Module.
Easy Contact Form Validation in ExpressionEngineA tutorial on improving the standard validation of forms in EE.
Secure Downloads in ExpressionEngineLearn how to create a secure area of your website where you can share files with users.
Build an iPhone Template for ExpressionEngineCreate a template specifically for iPhone users.
A Simple ExpressionEngine Search PageA tutorial on setting up a search function on your EE website. EEHowToA blog with a lot of short posts that answer questions from EE users and developers. 1.8 General Tutorials/Articles These articles should help you improve the results of your work with EE. If you’re new to EE, they’ll serve as a good foundation for your work, and if you’re experienced, they serve as a helpful refresher. ExpressionEngine Top Ten TipsSimon Collison presents a two-part series with his tips on getting the most out of EE (see parts 1 and 2). Working Smarter with ExpressionEngineAnother helpful article from Simon Collison on improving your experience with EE.
2. Advanced Training For those who are serious about learning how to build websites with EE, these two resources will provide added learning, if you’re willing to pay for the content. You may be able to find some of this information elsewhere for free, but these courses could save you some time. Train-eeTrain-ee offers screencasts and books for purchase and some free tutorials (several were featured earlier in this article).
Building a Dynamic Website with ExpressionEngineA 12-part video tutorial series (each part costs $5) that includes sections on adding a membership website, preparing a website for clients and more.
3. Modules/Plug-ins/Extensions Much like WordPress, Drupal and other CMS platforms, EE’s out-of-the-box functionality can be adapted and expanded by developers. There is a wide variety of available modules, plug-ins and extensions for EE users. 10 ExpressionEngine Production Add-OnsA list of 10 add-ons to improve productivity with EE.
Tome (Static Pages)This module gives you the ability to create WordPress-style static pages.
Pages ModuleAnother option for using static pages with EE.
RepeetRepeet is a plug-in that allows users to simulate repeating events in a template. eeFlickrA module for integrating your Flickr photo stream in your website. File Manager ModuleImproves file handling and the uploading process and functionality. LogMeInAllows you to automatically log website visitors in from any template without having to collect details from them.
Loop Plug-inPerform loops in any template without enabling or using PHP.
LG TwitterPost tweets from your EE control panel. AkismetThe popular WordPress anti-spam plug-in can be used for EE as well. Simple Pagination Plug-inImprove the core functionality of pagination by separating content into multiple pages without requiring the use of multiple fields.
LG TinyMCEAdd a TinyMCE WYSIWYG editor to EE. LG Social BookmarksThere are a lot of WordPress plug-ins that enable you to add social media icons to posts. This is a similar extension for EE. Multi Dropdown ListAn extension for creating drop-down lists.
RewriteAn add-on for redirecting users from old URLs to new ones.
reCAPTCHAFight comment spam with a CAPTCHA for comments.
First TimerGives you control over the page that members are directed to following their log-in. TextMate ExpressionEngine BundleIf you use TextMate and EE together, this can help you distinguish the EE markup. Not really a plug-in or module but a helpful download that can improve your development with EE and that doesn’t have a place anywhere else on this list.
4. Official Resources The ExpressionEngine website contains many resources for designers and developers. These resources may be a good starting point for you, or you could bookmark them to return in future when you’re looking for a solution to a problem. ExpressionEngine BlogStay up to date on EE through the official blog.
Knowledge BaseThe Knowledge Base has a wealth of information that is well categorized for ease of use.
ExpressionEngine User GuideAll of the official documentation for EE. ExpressionEngine WikiLearn from others or contribute your own knowledge to the official wiki. ExpressionEngine ForumsGet help on your problems from other EE developers, or give back by answering questions of others. Dissecting the Default TemplatesIf you’re new to EE, you’ll need to learn how the template system works.
5. Galleries and Showcases EE can be used to power just about any type of website or blog, large or small, and any design can be used on the EE platform. Still, it’s nice to see what others are doing with websites powered by EE. Showcase from ExpressionEngineThe official website of EE includes a categorized showcase of plenty of great EE websites. The gallery even includes interviews with some of the designers and developers.
CMS ShowcaseThe EE category here has plenty of EE inspiration. CSS GlanceThe EE category here currently has 25 websites on display. 6. Compared to Other CMS Options Wondering how EE stacks up against other CMS platforms? Here are some links to opinions of other users and articles that analyze the platforms’ strengths and weaknesses. ExpressionEngine vs. TextPatternAn article from HicksDesign weighing the pros and cons. Switching Mindsets: From WordPress to ExpressionEngineA comparison from an experienced WordPress developer.
WordPress vs. Drupal vs. ExpressionEngine: Which Blog Software Should I Use?This post examines some of the pros and cons of each, more from a blogger’s perspective. Better than MovableType? ExpressionEngine Launches the ChallengeA detailed look at EE from a new user. 7. Themes If you’re used to working with WordPress, the EE theme system is a bit different. You won’t find as many themes available, but really any HTML/CSS design can be used with EE. Many users find a free CSS-based template or buy a premium one, and then have it converted to include the EE tags. Although there aren’t as many resources for themes, there are some, including control panel themes. Here are a few popular resources: ExpressionEngine Theme GalleryThe official EE website has a gallery that currently includes more than 25 themes to download. Fresh Theme for EEA popular theme based on the old theme of Bartelme Design.
Control Panel ThemesThe EE website also includes six different themes you can use to adjust the look of your control panel. Green n BlueA control panel theme from Mark Boulton.
ExpressionEngine Control Panel ThemeAnother control panel theme, this one from Jesse Bennett-Chamberlain.
About the Author Steven Snell is a Web designer and freelance blogger who can be found on his own blogs: Vandelay Website Design and DesignM.ag. (al)
October 29 2008, 4:47pm | Comments »
1 2