Create a cool graffiti text in photoshop

In this tutorial, we will learn how to create a cool graffiti text effect in Photoshop. Tutorial Details Program: Photoshop CS5 Estimated Completion Time: 20-25 Minutes Tutorial Assets The following assets were used in the creation of this tutorial. * Brick wall texture * LEMON DAY font Step 1 Create a new document in Photoshop with width 800px and height 650px. Step 2 Open the ‘Brick wall texture’ in Photoshop. Press Ctrl+ A to make selection around the texture, and then press Ctrl+ C to copy the selection. Come back to your document and press Ctrl+ V to paste the texture here. Step 3 Now to give the texture desired color, click on the icon of ‘Create new fill or adjustment layer’ present at the bottom of the layers panel and select ‘Solid color’. Use # 95856f color here. Change the blending mode of this layer to ‘color’. Step 4 Next, we’ll type in our text. Set #ffc000 as your foreground color and select the ‘type tool’ to type your text. We’ll be using ‘Lemon Day’ font for this tutorial. Now click on the text layer to select it and go to Layer > Layer style > Stroke. Use the given values here. Step 5 Now we’ll give the dripping paint effect to the text. Create a new layer by going to Layer > New layer. Place it below the text layer. Now select the ‘Pen tool’ with ‘Shape layers’ settings to draw the shape as below. Keep on drawing such shapes to get the effect as shown below. Step 6 Now press Ctrl+ Click on the text layer to make selection around the text. While the selection is still on, create a new layer, click on it and go to Edit > Stroke. Use the given settings for stroke. Create dripping paint effect for this violet stroke in the same way as explained in step 5. Step 7 Now set # 000000 as your foreground color. Select the ‘Pen tool’ with ‘Shape layers’ settings to draw the shape around the text on a new layer. Place this layer just above the background brick wall texture layers. Next, create dripping paint effect for this black text background using ‘Pen tool’. Step 8 Next, collect all the graffiti layers in a group. To do so, select all the text and dripping paint layer by pressing ‘Shift key’ and clicking the layers thumbnails and then go to Layer > Merge layers (Ctrl+ E). Now duplicate this merged layer twice by going to Layer > Duplicate layer. Now change the blending mode of original graffiti layer to ‘Overlay’ and of its two copies to ‘Soft light’ to get the effect as shown below. Step 9 Next to blend the graffiti click on the original graffiti layer and select the ‘smudge tool’, soft round brush with 50% strength. Now apply the brush over this layer in batches especially over the yellow text areas near their borders. Step 10 Click on the icon of ‘Create new fill or adjustment layer’ and select the option of ‘Curves’. Use the given settings here. That’s all guys. Hope you enjoyed the tutorial and learned something useful. We’ll be waiting for your feedback

Importing a Photoshop File in Flash CS5

19

This is a tutorial on how to import a photoshop file in Flash CS5 and what are the important measures that we need to take care while doing so. In this tutorial, we will use the photoshop file that we created in our earlier tutorial on Creating a web template using Photoshop (click here to download the photoshop file).

Note: If you have added any effects on either the text or the images in the photoshop file then undo them. The link given above for the photoshop file does not have any effects.

1. Start Adobe Flash CS5 on your system and choose File > New from the main menubar; the New Document window is displayed, as shown in Figure.
   
   
   
   
2. Select Actionscript 3.0 from the General tab and choose the OK button to open a new flash document.
   
   
3. Choose File > Import > Import to Stage from the main menubar or press CTRL + r from the keyboard; the Import window is displayed, as shown in Figure.
   
   
   Navigate to the place where you saved the downloaded photoshop file. Select the file and choose the Open button from the Import window; the Import “entheos_jewel.psd” to stage window is displayed, as shown in Figure.
   
   
   
   The left panel of this window displays the layers that were there in photoshop and the area on the right side displays the options related to the selected layer.
   
4. Select the top most layer “Cutting Edge Earings”, the options related to the selected layer are displayed on the right, as shown in Figure.
   
   
   
   
5. Check the Create movie clip for this layer check box option. Use this option to change the bitmap image into a movie clip in flash.
   Adding the instance name is not required at that very moment. You can add the instance name to a movie clip even at the later stages.
6. In the Publish Settings area, choose Losseless option from the Compression drop-down list.
   
   The loseless option avoids the image from getting distorted from any loss of data.
   
   
7. Next, choose the “Jewel Cuffed Bracelets” text layer, the properties of the respective layer are displayed on the right.
   
   
8. Select the Editable Text radio button from the Import this text layer as: option area. This will help you to edit the text even in flash. Also, choose Losseless option from the Compression drop-down list.
   
   Repeat these steps for all other layers, taking into consideration that whether they are the image layers or the text layers.
   
   
9. Next, make sure that Flash Layers is selected in the Convert layers to: drop-down list and select the Place layers at original position check box. Also, select the Set stage size to same size as Photoshop canvas (1280 x 768) check box.
   
   This option will resize the flash documents with the size of the photoshop document. After doing all these changes, choose the OK button.
   
   
10. Choose Control > Test Scene from the main menubar to publish the flash file; a separate window is displayed displaying the static website layout, as shown in Figure. You can also press CTRL + ENTER key from the keyboard to do so.
    
    

Click here to download the .fla file.

Creating a web template using Photoshop

40

This is a tutorial on how to create a website main page template using Photoshop as the medium.

This is part of a 6 part tutorial series on how to create a Flash website using Flash CS5. The tutorial covers the following : Creating a web template using Photoshop Importing a Photoshop file in Flash CS5 Adding sounds and animation to buttons Adding Animation and Button interactivity Adding a Preloader Publishing the Flash content

Please note:
1. You need to have Photoshop CS3 or higher version of photoshop installed on your machine.
2. You need to have the images used in this tutorial to follow the given steps. You can download the images.zip (click on the link to download) or follow the links adjacent to the images in the steps.

1. Open Photoshop (which ever version you are having, we are using Photoshop CS3) and choose File > New from the main menubar; the New window is displayed. Set the parameters in this window as shown in Figure. Choose the OK button; a new photoshop file is opened.  
   
   
   
   
2. Create a new layer and rename it as background and open the background.jpg (click to download this image) in the photoshop file. The background is displayed, as shown in Figure.
   
   
   
   
3. Create another layer and rename it as jewel cuffed braclet. Choose the Rectangular Marquee Tool from the Tool box and create a vertical rectangle selection, as shown in Figure.
   
   
   
   
4. Choose the Gradient Tool or press G to activate this tool. Set the hex values for right side gradient color node to #000000 and left side gradient color node to #850900. Add radial gradient to the selection.
   
   
5. Next, add any HD image of a bracelet to the gradient box. Select the two layers (the gradient box layer and the bracelet layer) and press CTRL + e to merge them together, as shown in Figure. (Click on this link to download this image).
   
    
   
   The ring image seems to be merging with the background layer because both of them has the same color. To make the ring stand out we will add outer glow to it. But, if you want to import this template in flash then prefer adding these effects in flash itself for better quality.
   
   
6. Double-click on the rings layer; the Layer Style window is displayed. Set the following settings for the Outer Glow parameter in this window, as shown in Figure.
   
   
   
   
7. Similarly add bangles.jpg, ravishing _rings.jpg, and the earings.jpg to the photoshop file. Also, add the Outer Glow parameter to these images, as discussed in the previous step. Align all the four images, as shown in Figure.
   
   
   
   
8. Use the text tool to enter labels to the images as RAVISHING RINGS, CUTTING EDGE EARINGS, JEWEL CUFFED BRACELETS, FASHION PULSE BRACELETS (Font: Aparajita, Type: Regular, Size: 18pt, Color: White) respectively from left to right. Add outer glow to these text as discussed earlier in the tutorial.
   
   
9. Also enter the name of the company as ENTHEOS Jewels (Font: Rage Italic, Type: Regular, Size: 72pt, Color: White). Apply drop-shadow on the Entheos layer; Layer Style window will be displayed. Choose the Drop-Shadow option from this window and choose the Ok button.
   
   
10. Also write the text, COLLECTION OF THE BEST KEPT SECRETS ON EARTH (Font: Trajan Pro, Type: Regular, Size: 14pt, Color: White). Align all these texts as shown in Figure.
    
    
    
    
11. Enter text COLLECTIONS, TIMEPIECES, FRAGRANCES, STORES, EVENTS, DOWNLOADS, CONTACT US (Font: Orator Std, Type: Medium, Size: 18pt, Color: White) from left to right. Make sure that all the texts are on different layers.
    
Enter text FULLSCREEN and MUSIC (Font: Orator Std, Type: Medium, Size: 12pt, Color: White). These two texts should also be in separate layers. Align the texts added in step 9 & 10, as shown in Figure.



12. Create a new layer and rename it as hanging_pendant and open the hanging_pendant.jpg (click to download this image) in the photoshop file. You can add drop-shadow to it but avoiding adding if you want to import it in flash. Align this pendant, as shown in Figure.
    
    
    

The web template is ready. You can also add images and menus of your choice in this template and enjoy. But remember, if you want to create the entire website in flash CS5 then do not add any effects on the images or on the text.