iklan

WELCOME TO MY BLOG

Selasa, 12 Oktober 2010

Sejarah Photoshop

Sebuah image (gambar/foto) dapat berfungsi sebagai media yang dapat memberikan informasi yang disampaikan kepada masyarkakat. Orang lebih mudah memahami sebuah pesan hanya dengan melihat gambar dibanding harus membaca teks. Ketika menemukan sebuh pamflet, brosur, maupun booklet yang pertama dilihat adalah gambarnya kemudian informasi yang disampaikan. Untuk membuat perpaduan gambar dan teks diperlukan keterampilan khusus dalam mendesain sebuah image. Selain dituntut mampu mengembangkan ide juga sedikitnya harus tahu tentang mengkombinasikan warna maupun mode warna yang ada. Graphic designer lebih dikenal sebagai peran utama dalam menciptakan sebuah image yang berkualitas yang dapat membuat tampilan beberapa publikasi seperti sampul buku maupun majalah, brosur, booklet, leaflet, banner, katalog dan publikasi lain yang sejenis menjadi impresif

SEJARAH SINGKAT

Seorang profesor dari Michigan (USA) bernama Glenn Knol membuat sebuah eksperimen untuk mengolah foto secara digital. Dengan alat seadanya, sang profesor bekerja keras di ruang gelap (dark room) milik pribadinya. Beliau memiliki dua orang anak yang bernama: John Knoll dan Thomas Knoll. Kedua anak tersebut meneruskan cita-cita ayahnya untuk membuat sebuah program pengolah gambar secara digital tersebut. Singkat cerita, akhirnya kedua saudara tersebut berhasil menciptakan sebuah program aplikasi pengolah gambar yang saat itu masih sederhana. Atas penemuan tersebut, sebuah perusahaan bernama Image Scan memberikan lisensi. Namun selang satu tahun, lisensi diambil alih oleh Adobe Corporation. Kemudian program pengolah gambar tersebut diberi nama Adobe Photoshop. Versi terakhir adalah lebih dikenal dengan Adobe Photoshop CS5. Memang, pada awal terciptanya Photoshop hanya ditujukan untuk keperluan pengolah gambar (fotografi). Thomas Knoll bersama timnya akhirnya mengembangkan Photoshop untuk berbagai keperluan seperti: web design (Image Ready), publishing (Photoshop), animasi (Image Ready), digital painting (Photoshop), dan bidang lainnya. Para web design maupun graphic design cenderung lebih banyak menggunakan program Adobe Photoshop untuk membantu pekerjaan di bidang masing-masing karena mudah digunakan, memiliki warna cerah, mendukung plug-in dari pihak ketiga, dan hasil output yang fantastik

Jumat, 08 Oktober 2010

Recreate the Epic 80′s Metal Text Effect in Photoshop

It’s funny how trends reappear through the years. The bright and shiny chrome text effect could be found everywhere in the 80s, then it disappeared altogether when people realised how hideous and gaudy it was. Recently though, this text styling seems to be making a comeback in the world of digital art as the 80s generation are implementing inspirations from their childhood into their designs and artworks. Follow this tutorial to recreate the epic metal text effect for yourself, making use of modern day digital design techniques in Photoshop.

Epic metal text effect


1980′s Inspiration

80s chrome metal text research

WWF Wrestling, Metallica’s Ride the Lightning album, Robocop, Amiga games and Transformers are all examples that I can relate to. As a little initial research, collect a few logos and graphics to refer to when creating your own text effect. Look closely at the colours used, the style of text and what seems like a desert landscape in the reflection of the text.

We’ll begin in Illustrator for the first couple of steps to lay out our type. Set out the wording of your choice in an appropriate font and convert the text to outlines (CMD+Shift+O). Here I’m using the font Viper Squadron, and the word ‘Epic’.

With the shapes selected, go to Object > Path > Offset Path. Enter 3mm in the options box. Right click on the objects and select Ungroup.

Add a couple of basic gradient fills to the two shapes to make it easy to identify them. A sky blue to white on the inner shape and a red to blue gradient on the outline will do the trick.

Draw a temporary rectangle around the text, then select this along with the outer shape. Paste the objects into Photoshop. Repeat the process but this time with the inner shape. The temporary rectangle will maintain the proportions between the two objects when copied through to Photoshop.

Double click the inner shape layer and begin adding some layer styles. Start by replacing the fill with a Gradient Overlay. Use dark blue (#426bc7), light blue (#719cff) and white (#ffffff) swatches and run the gradient vertically from the top.

Next, add a soft Inner Glow using a mid-blue (#76a5cd), set the opacity to 100%, blending mode to Normal, size to around 8px and add a 2px stroke to accommodate the stroke in the next step.

Add a 2px stroke in white, then set the alignment to the Inside and blending mode to Color Dodge. Adjust the opacity to around 60%.

Hold the CMD (Mac), or CTRL (Windows) key while clicking the thumbnail of the inner-text layer to load the selection. Grab the Rectangular Marquee tool and hold Alt while dragging a selection across the upper portion of the text, leaving just the lower half selected. Fill this with white on a new layer.

Double click the layer to open up the layer styles and add a vertical gradient running from dark indigo (#261528) to mid-indigo (#241e53) to white (#ffffff) to a very light indigo (#b6b4c7).

Zoom right in and draw a circular selection at each end of the reflection gradient layer on each letter.

Use the rectangular marquee tool to remove the middle portion between each circle. Repeat the process on every other letter.

Load the selection of the reflection layer, then go to Select > Modify > Contract. Enter 2px to reduce the mask size to accommodate the stroke, then inverse the selection (CMD+Shift+I) and delete.

The text is beginning to develop some definition with the gradients and stroked outlines. Now let’s start work on the chamfered edge.

Zoom in and draw around each edge of the outer outline with the Polygonal Lasso tool. Close the path by cutting diagonally across the outline at each corner. Fill each edge with white on individual layers.

Add a simple black to white gradient on one of the shape layers. Right click the layer and select Paste Layer Style, then select all the other layers and paste the same layer style.

The gradient is running in the wrong direction on the horizontal shapes, so tweak each one by adjusting the angle of the gradient fill.

Repeat the process on every other letter. Aim to contrast black against white on each shape to highlight the diagonal edge lines.

CMD-click the layer of the original outline shape and fill a new layer with white. Then CMD-click the original inner shape layer and delete this selection from the fill.

Replace this white fill with a blue (#283891) to red (#f07b71) gradient using the layer style options.

Change this layer’s blending mode to Linear Burn to allow the gradient overlay to replace the colour of the white to black gradients underneath.

Dab a few spots of white across the text to add a variety of highlights and tones. Load and inverse the selection of the text layer and delete out the excess from the highlights layer.

On a new layer, draw some 1px white lines across the straight edges of the text to act as highlights.

Add a layer mask to the highlighting lines layer and erase out the ends of the lines with a soft brush.

Find a stock lens flare and paste in multiple copies to highlight the edges and corners of the text.

Load the outer text selection and fill a new layer with white. Add a Noise filter (Filter > Noise > Add Noise) with the settings 10%, Uniform & Monochromatic. Change this layer’s blending mode to Color Burn to allow the texture to interact with the text.

The text effect is just about complete, but let’s finish off the design with a subtle background. Use some Subtle Grunge Brushes to add some background texture to the design. Reduce the opacity down to around 30%.

Dab some large spots of colour above the texture layer, but below the text. Use samples of blue, red and purple from the outer edges of the text.

Change the blending mode to Color Dodge at 80% to allow the colours to interact with the textured background.

Finally add a soft Drop Shadow to the outer text outline layer to anchor the text with the background.

Epic metal text effect

How To Create a Gothic Blackletter Typographic Design

Blackletter or gothic script fonts are hugely popular in a range of modern cultures. Metal bands, tattoo artwork and extreme sports brands all make use of the awesome blackletter style. Often the sharp letter shapes are enhanced with elaborate swirls and decorations. Follow this step by step guide to customizing your own gothic typographic design, we’ll be modifying the original vector letters in Illustrator before moving over to Photoshop to add a cool distressed and metal effect finish to the artwork.

Gothic blackletter typography design

The design I’ve been working on features the word ‘Cobra’ – Simply because it sounds pretty bad-ass! The blackletter type has been customised and modified with additional swirls, curls and various pointy bits which add plenty of visual interest while disguising the original wording.


The first stage of the design process will be in Illustrator, here we’ll create and tweak the gothic script lettering. The first step is to pick out a bunch of blackletter style fonts. There’s a huge range and different styles to pick from. I wanted a font that used straight edges on most of the letters, as opposed to being rounded. I eventually picked out Cloister Black as my typeface of choice.

I wasn’t too keen on the shape of the letter A, so I took a copy of the O, created outlines from the text (CMD+Shift+O) then used the Direct Selection Tool to take portions of the original letter A to build my own customised version. The original letter O, the little point at the top and the terminal at the bottom were all combined with the Merge option from the Pathfinder palette.

The new letter A was combined with the rest of the word and all the letters converted to outlines making them ready for customisation.

One of the first tweaks was to extend the letters to make the whole word taller, which was the main reason I wanted a font with straight edges. The lower half of the text was selected with the Direct Selection Tool and moved downwards (holding Shift to constrain the axis).

Elsewhere a new brush was created. A small circle was drawn, then the left hand point dragged outwards with the Direct Selection Tool. The bezier curves were removed from this point with the Convert Anchor Point tool to give a sharp point.

The rounded edge from the opposite end is then clipped off using a temporary square along with the Subtract option from the Pathfinder palette. This shape is then added as a New Art Brush by clicking the littler ‘new icon’ at the bottom of the Brushes palette.

This new brush is used with the Brush Tool to draw some smooth swirly lines across the text. My Pen Tablet came in handy here, but the same effect could easily be created with a mouse. Double click the Brush icon to edit the Smoothness settings in order to generate nice flowing curves.

Smaller flicks were drawn and carefully positioned over key points of the text. When the edges are lined up the shape flows seamlessly.

More flicks were drawn and duplicated across the inner sections of each letter, giving a a kind of thorny or teethed appearance.

Some of the longer lines overlap the text, which seems a popular feature in this style of gothic typography design.

Various swirls, curls and sharp pointy bits later and the vector version of the type design is complete. Any tight angles and the position of each individual piece were adjusted to perfect the design.

In order to migrate the design to Photoshop while keeping the various objects separate, I had copy and paste each set of elements individually. To ensure they all remained aligned in Photoshop a temporary blank rectangle was also used with each selection.

As each element was pasted into Photoshop the temporary rectangle would keep everything aligned and scaled correctly, with each piece being placed on a new Photoshop layer.

A rough stone texture was added over the black background and set to soft light to generate a cool and distressed background for the type to sit against.

Each layer of typographic elements was then given a Drop Shadow. The settings were tweaked to create a subtle shadow by lowering the opacity and increasing the size.

The Drop Shadow layer style in the layers palette was then rasterized into a layer of its own by right clicking and selecting Create layer. This then allowed a Layer Mask to be used to erase out portions of the shadow with a soft brush, leaving shading in key places to give a three dimensional effect.

Drop Shadows were added to the other typographic pieces and each one adjusted with a layer mask. This shading allows the swirls to either blend into the type or flow on top of the wording.

Once all the shadows are in place the design is given an extra level of depth and dimension, as well as bringing a little legibility back to the wording.

A selection of the whole design was made by CMD-Shift-clicking the thumbnails of each layer in the Layers palette. This selection was then filled with white on a new layer.

A subtle noise texture was added using the Noise filter. A small about of 3-4% is all is needed to give a tactile feel to the otherwise unrealistic smoothness of the white fill.

A Gradient Overlay was also added as a layer style to this new layer. The gradient flows from grey to white vertically up the design.

An Inner Shadow and Stroke combination also helped add a subtle chamfered edge effect. The Inner Shadow gives a thin 2px white border while the Stroke adds a darker grey border to the outside.

The selection of the whole design is loaded once again, then filled with a black to white gradient on a new layer. Setting this layer to Hard Light allowed the black to interact with the grey from the layer below adding more shading.

Additional spots of black were dotted around the design, which were also given the Hard Light blending mode to add more levels of shading and tone.

A spray paint Photoshop brush was used to create some splattery textures across the type, adding more detail and subtle marks which all help give a more tactile feel.

All these additions of texture and tone help give a metallic feel to the design.

Two thin vertical lines were added to each letter. One filled with white, the other in grey, which gives a chiselled line effect. Layer masks were added to each line to both fade out the upper and lower edge as well as mask out where any swirls overlap the text.

These chiselled lines help add that little extra to the metal effect, while enhancing that impression of multiple dimensions where the swirly lines clearly flow over the top of the letters.

The Pen Tool was used to draw small selections over the pointy areas of the text, then a quick dab with a soft brush helped add a bit of dimension and visual interest to these elements.

Gothic blackletter typography design

The final gothic blacketter typographic design is complete! The customisation of the letters is made easy with Illustrator’s editable paths, then Photoshop brings it all to life with realistic textures and different levels and shading and tone.