| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

View
 

Jacob Albrecht

Page history last edited by jaalbrecht 10 years, 3 months ago

Week 11

Step 1

Create a new document, apply a Layer Style on the background layer. Add a Gradient Overlay from black to a dark brown (#443501).


Step 2

Create a new Layer and apply Filter>Texture>Texturizer. Make sure that the foreground color is white and the background is black. After that, change the Blend Mode to Multiply.


Step 3

Add some text. I used Times New Roman, and for the “A” I used the “V” letter and flipped it vertically and horizontally.


Step 4

Now we start creating our gold layer style. We’ll set up the Gradient Overlay first, as shown below.


Step 5

Now we’ll add a Stroke. For the Fill Type use Gradient. The position of the gradient will vary for different typefaces, so experiment and see what looks good.


Step 6

Add Bevel and Emboss, as shown below.


Step 7

Finally, add some Shadow, again following the specs below.

This Photoshop effect is very useful because it can create a very slick, clean looking title for a website, movie, book, or anything that could use a title that looks like this. It is very clean looking and can be very attractive if used right.

Resource Link: http://www.photoshoplady.com/top-50-stunning-text-effect-photoshop-tutorials/

 

Week 10

Create a document of a reasonable large size with black background. Using Type tool, with size 280pt and Trajan Pro font, type a number “1″. You can download the font here. Otherwise you may also use other fonts of your preference.
 
 
Right-click on the type and choose Blending Options. Check on Outer Glow and key in the following settings.
 
 
Check on Color Overlay and key in the following settings.
 
 
Check on Satin and key in the following settings.
 
 
Check on Inner Glow and key in the following settings.
 
 
Right-click on your type layer again and choose Rasterize. Using the Eraser tool with size 200px, fade off the top portion of the type.
 
 
Go to Filter > Liquify. Select the Forward Warp Tool and key in the following settings. Using the Forward Warp tool, create some waves on the border of the type.
 
 
Download the Fire image from Shaedsofgrey. Go to Channels tab and select the Green layer. Ctrl + left click on the Green layer to load selection of the highlight areas.
 
 
Go back to Layers tab and use the Move Tool to drag any part of the selected area into the document with the “1″ you done earlier. Place the fire above the type.
 
 
Using the Eraser tool with 15px, erase all the excessive fire, leaving only those parts that is waving around the type.
 
 
Duplicate the fire layer. Set the Opacity of the original fire to 30%. Set the Blend Mode of duplicated fire to Overlay.
 
 
Repeat the processes to cover the type with more flames. And there you got your first flaming type!
 
 
Create more flaming letters according to your own preferences.
 

This Photoshop text effect is very useful because it can create a very cool fire text that can be very attractive and can attract someone to whatever you made it for. Here is the resource link for this Photoshop effect: http://10steps.sg/tutorials/photoshop/text-on-fire-effect/

 

Week 9

Step 1: Open A New Photoshop Document

Open a new document in Photoshop by going up to the File menu and choosing New…, or by using the keyboard shortcut, Ctrl+N (Win) / Command+N (Mac). You can choose your own width and height for your document, but if you want to follow along, I chose the 640×480 size from the list of available presets to keep things simple. I’ve also left my Resolution value set to its default of 72 pixels/inch. Since I’m creating this text effect for the web, it makes no difference what I set the resolution value to, so the default value is fine:

Photoshop Text Effects: Creating a new document in Photoshop

Create a new document in Photoshop. To follow along, use the “640×480″ preset size.

Step 2: Add Your Text

With your new blank document open, grab the Type tool from the Tools palette or by pressing T on your keyboard. Make sure black is selected as your foreground color. If it isn’t, just press D on your keyboard to reset it to black. Choose your font in the Options Bar at the top of the screen. Thick, heavy fonts work best for this effect. Then, go ahead and enter your text. I’m going to use “Impact”, and I’ll type the words “LIGHT BURST”:

Photoshop Text Effects: Enter your text

Choose a thick, heavy font, and with black as your foreground color, enter your text.

Step 3: Resize Your Text With Free Transform

With your text layer selected in the Layers palette, use the keyboard shortcut Ctrl+T (Win) / Command+T (Mac) to bring up the Free Transform box and handles around your text. Hold down Shift+Alt (Win) / Shift+Option (Mac) and drag out any of the corner handles to make your text larger and fill up more of the document area. Holding Shift constrains the text proportions, and holding Alt/Option resizes the text from the center:

Adobe Photoshop Text Effects: Resize the text with Free Transform

Resize the text with Photoshop’s “Free Transform” command.

Make sure to still leave plenty of room around the text for our light burst effect. Press Enter (Win) / Return (Mac) when you’re done to accept the transformation.

Step 4: Rasterize Your Text

We’re going to be applying several filters to our text, but Photoshop doesn’t allow us to do that without first rasterizing it, which simply means to convert it into pixels. So again with the text layer selected, go up to the Layer menu at the top of the screen, choose Rasterize, and then choose Type. This will convert our text into pixels. It will still look the same in the document window, but in the Layers palette, the Type layer will now be a regular layer:

Photoshop Text Effects: Rasterize the text

After rasterizing the text, the Type layer in the Layers palette becomes a normal layer.

Step 5: Add A Selection Around Your Text And Save It

Ctrl-click (Win) / Command-click (Mac) directly on the thumbnail preview area of the text layer in the Layers palette to quickly load a selection around your text:

Photoshop Text Effects: Ctrl-click (Win) or Command-click (Mac) directly on the tex thumbnail in the Layers palette

“Ctrl-click” (Win) / “Command-click” (Mac) directly on the text thumbnail in the Layers palette.

Your text will now have a selection around it:

Photoshop Text Effects: The text is now selected

The text is now selected.

With the text selected, go up to the Select menu at the top of the screen and choose Save Selection. When the Save Selection dialog box appears, just click OK. There’s no need to name it or make any changes to the options.

Once you’ve saved your selection, press Ctrl+D (Win) / Command+D (Mac) to deselect your text.

Switch over to your Channels palette for a moment (it’s grouped in beside the Layers palette) and you’ll see your selection saved as a new channel named “Alpha 1″ at the very bottom. We’ll be coming back here a bit later to load our selection again:

Photoshop Text Effects: The selection saved as a new channel in Photoshop's Channels palette

The selection is now saved as a new channel, “Alpha 1″, in Photoshop’s Channels palette.

Step 6: Use “Fill” To Fill Your Text Layer With White And Set The Blend Mode To “Multiply”

Switch back to your Layers palette once again, and with the text layer selected, go up to the Edit menu at the top of the screen and choose Fill, or press Shift+F5 on your keyboard to quickly bring up Photoshop’s Fill dialog box. When the dialog box appears, set the Contents to White and change the Blending Mode to Multiply:

Photoshop Text Effects: Photoshop's Fill dialog box

Photoshop’s “Fill” dialog box”.

Click OK when you’re done. Nothing will seem to have happened in your document window, but if you look at your text layer’s thumbnail in the Layers palette, you’ll see that all of the empty space around the text has now been filled with white, while leaving the text black thanks to that "Multiply" mode.

Step 7: Apply The Gaussian Blur Filter To The Text

Go up to the Filter menu at the top of the screen, choose Blur, and then choose Gaussian Blur. When the Gaussian Blur dialog box appears, enter a Radius value of about 4 pixels and click OK to apply a slight blurring to the text:

Photoshop Text Effects: Photoshop's Gaussian Blur filter dialog box

Apply the Gaussian Blur filter to the text.

Here’s the text after applying Gaussian Blur:

Photoshop Text Effects: The text is now slightly blurred

The text is now blurred slightly.

Step 8: Apply The “Solarize” Filter To The Text

With the text layer still selected, go back up to the Filter menu and this time choose Stylize, and then choose Solarize. This will turn the document black, and your text will appear as a white stroke:

Photoshop Text Effects: The text after applying the Solarize filter

The image after applying the Solarize filter.

Step 9: Lighten The Text With Levels

The text is looking a little dark, so let’s lighten it. Use the keyboard shortcut Ctrl+L (Win) / Command+L (Mac) to bring up Photoshop’s Levels command, and drag the white point slider on the right in towards the left until you reach the right edge of the histogram:

Photoshop Text Effects: Photoshop's Levels dialog box

With the Levels dialog box open, grab the white point slider on the right and drag it to the right edge of the histogram to brighten the text.

Click OK. The text will now appear much brighter:

Photoshop Text Effects: The text is now much brighter

The text is now much brighter after applying Levels.

Step 10: Make A Copy Of The Text Layer

We need to make a copy of the text layer at this point, so to do that, with the text layer selected, use the keyboard shortcut Ctrl+J (Win) / Command+J (Mac), which will add a copy of the layer above it in the Layers palette:

Photoshop Text Effects: Copy the text layer

The Layers palette now showing both the text layer and the copy above it.

Make sure the copy of the text layer is selected because all of these next steps are to be done on the copy. We won’t be touching the original again until near the end.

Step 11: Apply The “Polar Coordinates” Filter To The Text

Go back up to the Filter menu, and this time choose Distort, and then Polar Coordinates. We’re going to send our text to the North Pole. Alright, no we’re not. What we are going to do is make it look very strange. When the Polar Coordinates dialog box appears, select the Polar To Rectangular option at the very bottom and then click OK:

Photoshop Text Effects: Photoshop's Polar Coordinates dialog box

Photoshop’s “Polar Coordinates” dialog box.

Your text will now look very strange indeed:

Photoshop Text Effects: The text after applying Polar Coordinates

The text after applying the “Polar Coordinates” filter.

Step 12: Rotate The Canvas 90 Degrees Clockwise

Go up to the Image menu at the top of the screen, select Rotate Canvas, and then choose 90° CW to rotate the canvas 90 degrees clockwise:

Photoshop Text Effects: Rotate the canvas 90 degrees clockwise

Rotate the canvas 90 degrees clockwise.

Step 13: Invert The Image

Use the keyboard shortcut Ctrl+I (Win) / Command+I (Mac) to invert the image, so black becomes white and white becomes black:

Photoshop Text Effects: Invert the image

Invert the image with “Ctrl+I” (Win) / “Command+I” (Mac).

Step 14: Apply The “Wind” Filter Three Times

Go back up to the Filter menu once again, choose Stylize, and then choose Wind. When the Wind filter’s dialog box appears, make sure Method is set to Wind and Direction is set to From the Right:

Photoshop Text Effects: Photoshop's Wind filter

Photoshop’s “Wind” filter.

Click OK to apply the Wind filter once. Then press the keyboard shortcut Ctrl+F (Win) / Command+F (Mac) twice to apply the same filter two more times.

Step 15: Invert The Image Again

Press Ctrl+I (Win) / Command+I (Mac) to invert the image once again:

Photoshop Text Effects: Invert the image once again

Invert the image once again using “Ctrl+I” (Win) / “Command+I” (Mac).

Step 16: Apply The “Wind” Filter Three More Times

With the image inverted, press the keyboard shortcut Ctrl+F (Win) / Command+F (Mac) three more times to apply the filter to the image three more times:

Photoshop Text Effects: Apply the Wind filter three more times

Apply the “Wind” filter to the image three more times.

Step 17: Brighten The Image Again With Levels

We need to brighten the image again using Levels, but this time, we’ll let Photoshop do the work for us by using Auto Levels. To do that, press Shift+Ctrl+L (Win) / Shift+Command+L (Mac) to apply the Auto Levels command to the image, which will brighten it up:

Photoshop Text Effects: Apply Auto Levels to the image to brighten it

Apply the “Auto Levels” command to brighten the image.

Step 18: Rotate The Canvas 90 Degrees Counterclockwise

Go back up to the Image menu at this point, choose Rotate Canvas once again, and this time choose 90° CCW to rotate the canvas back to the way it was originally:

Photoshop Text Effects: Rotate the canvas back to the way it was originally

Rotate the canvas 90° CCW.

Step 19: Apply The "Polar Coordinates" Filter Again

Go back up to the Filter menu again, choose Distort, and then choose Polar Coordinates. This time choose the Rectangular to Polar option and click OK:

Photoshop Text Effects: Apply the Polar Coordinates filter again

Apply “Polar Coordinates” again, this time choosing “Rectangular to Polar”.

Your image should now look something like this:

Photoshop Text Effects: The image after applying the Polar Coordinates filter a second time

The image after applying the “Polar Coordinates” filter a second time.

Step 20: Set The Layer Blend Mode To "Screen"

Go up to the blend mode options in the top left of the Layers palette and change the blend mode of the text copy layer from “Normal” to Screen by clicking on the down-pointing arrow and selecting "Screen" from the list:

Photoshop Text Effects: Changing the blend mode to Screen

Change the blend mode of the text copy layer to Screen.

This reveals the original text layer beneath it:

Photoshop Text Effects: The original text layer is now visible

The original text layer is now visible as well.

Step 21: Apply A Gradient Fill Layer To Add Color

Click on the New Fill Or Adjustment Layer icon at the bottom of the Layers palette:

Photoshop Text Effects: Click the New Fill Or Adjustment Layer icon

Click the “New Fill Or Adjustment Layer icon.

And select “Gradient” from the list:

Photoshop Text Effects: Select the Gradient fill layer option

Select a Gradient fill layer.

When the Gradient Fill dialog box pops up, click inside the gradient preview area at the top:

Photoshop Text Effects: Click inside the gradient preview area

Click inside the gradient preview area.

This will bring up the Gradient Editor dialog box. Click on the gradient swatch in the top left, the black to white gradient first, and this will make sure that both colors on either side of the gradient have their opacity set to 100%:

Photoshop Text Effects: Select the black to white gradient in the top left

Select the black to white gradient swatch in the top left to make sure both colors are set to 100% opacity first.

Then set your gradient colors to whatever you like. I’ve set the color on the left to a reddish-orange, and the color on the right to a yellowish-orange:

Photoshop Text Effects: Set your gradient colors.

Set your gradient colors.

Exit out of the gradient dialog boxes once you’ve chosen your colors.

Step 22: Change The Blend Mode Of The Gradient Fill Layer To “Color”

With the Gradient fill layer selected, go back to the blend mode options in the top left of the Layers palette and change the layer’s blend mode to Color:

Photoshop Text Effects: Change the blend mode to Color

Change the blend mode of the Gradient fill layer to “Color”.

The image is now colorized with the colors from the gradient:

Photoshop Text Effects: The image is now colorized

The gradient colors are now applied to the image.

Step 23: Apply A Radial Blur To The Original Text Layer

We’re done with the text copy layer at this point. We’re going to finish off the last few steps by working on the original text layer, so click on it in the Layers palette to select it. Then go up to the Filter menu, choose Blur, and then choose Radial Blur:

Photoshop Text Effects: Photoshop's Radial Blur dialog box

Photoshop’s “Radial Blur” dialog box.

Set the Amount to about 65 pixels, the Blur Method to Zoom, and the Quality to Best, as circled above, and then click OK to apply the filter to the original text:

Photoshop Text Effects: The Radial Blur applied to the image

The Radial Blur applied to the image.

Step 24: Load The Saved Text Selection

Only a couple of things left to do. First, switch over to your Channels palette again like we did earlier. We’re going to reload that selection we saved. To do that, simply right-click (Win) / Control-click (Mac) anywhere on the Alpha 1 channel at the very bottom, which will load the selection back into the document window:

Photoshop Text Effects: Load the saved selection

Right-click (Win) / Control-click (Mac) anywhere on the “Alpha 1″ channel to load the saved text selection.

Switch back to the Layers palette when you’re done. The selection is now loaded in the image:

Photoshop Text Effects: The selected now loaded in the image

The selection now loaded into the image.

One thing left to do…

Step 25: Fill The Selection With Black

With the original text layer selected in the Layers palette and black still as your foreground color, press Alt+Backspace (Win) / Option-Delete (Mac) to fill the selection with black and finish the effect.

Press Ctrl+D (Win) / Command+D (Mac) to remove the selection, and you’re done!

After all that, here’s the final “light burst” text effect:

Photoshop Text Effects: The final effect

This Photoshop text effect can create a very attractive and good looking image or images that you can put on your website to attract viewers. The best use for this could be as a title on a website or as a title screen in some sort of video on a website.
Here is the resource link for this text effect: http://www.photoshoplady.com/tutorial/colorful-light-burst-text/316

 

 

Week 8

Start a new document about 800x300.

Reset your foreground and background color to black and white (Press "D").

Then go to Filter » Render » Clouds.

Select the type tool and create your text. Make it fairly large, and position it towards the top.

CTRL+CLICK the text layer to load the selection, then go to SELECT » Feather, and enter 3. Now hide the text layer.

Set your foreground color to white and background to light grey. I used:#7E7E7E.
Now create a new layer, then go to Filter » Render » Cloud. Then go to Layer » Image » Flatten Image. (if prompt for "Discard Hidden Layers" Click ok.)

Now go to Image » Rotate Canvas » 90CW. Then Filter » Stylize » Wind:
Method: Wind. Direction: From the Right. Press CTRL+F about 7 times to reapply the wind filter. Then Image » Rotate Canvas » 90CCW to turn the image back to normal viewing.

Now Filter » Sharpen » Unsharp Mask. Amount: 500%. Radius: 2. Threshold: 0.
Then Filter » Sharpen » Sharpen. Reapply twice.

Now open the color balance box and play with the color sliders to get some nice colors.

This Photoshop effect can be very useful for creating cool titles and headings for websites, posters, or other mediums.

Resource Link: http://www.photoshoplady.com/tutorial/3d-cliff-text/207

 

Week 7

<marquee behavior="scroll" direction="left"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /></marquee>

This code is useful as it allows people to add more style and interesting designs to their sites with scrolling images. This can help keep the reader/audience interested.

Here is the resource link for this html code: http://www.quackit.com/html/codes/scrolling_images.cfm

 

Week 6

<marquee behavior="scroll" direction="left">Your scrolling text goes here</marquee>

This code will make text scroll across the screen continually going to the left. This can be helpful for making websites more creative and original so they can stand out more than usual.

 

Week 5

<embed
src="/music/song_name.mp3"
width="180"
height="90"
loop="false"
autostart="false" />

This code will embed music files onto your website. This is very helpful for any websites that are for music groups, record labels, etc as their audience and listeners can hear their work on their website.

 

Week 4

<!DOCTYPE html 
      PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
[…]
</head>
[…]
</html>

This code adds a favicon to the tab of your website. This is very helpful as it can distinguish your website from others by presenting a logo/icon to the viewers.

 

Week 3
<FORM action="mailto:you@yourdomain.com" method="post" enctype="text/plain">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%">
<TR>
<TD width="30%"><DIV align="right">
<B>Name:</B>
</DIV>
</TD>
<TD width="70%">
<INPUT type="text" name="name" size="20">
</TD>
</TR>
<TR>
<TD><DIV align="right"><B>Email:</B></DIV>
</TD>
<TD>
<INPUT type="text" name="email" size="20">
</TD>
</TR>
<TR>
<TD><DIV align="right">
<B>Comment:</B>
</DIV>
</TD>
<TD><TEXTAREA name="comment" cols="30" wrap="virtual" rows="4">
</TEXTAREA>
</TD></TR>
<TR>
<TD> </TD>
<TD>
<INPUT type="submit" name="submit" value="Submit">
<INPUT type="reset" name="reset" value="Reset">
</TD></TR>
</TABLE>
</FORM>

This code adds a form that people can put their contact information such as first and last name, email address, or a phone number in. This is very helpful as it allows website owners to create a contact/email list to send new information out to.

This is the resource link for this html code: http://www.web-source.net/html_email_form.htm#.UkWnybzaucI

 

Week 2

<!-- DC Twitter CSS -->

<link href="dreamcodes/twitter_tweet/jquery.tweet.css" rel="stylesheet">

 

<!-- jQuery Library (skip this step if already called on page ) -->

<script type="text/javascript" src="dreamcodes/jquery.min.js"></script> <!-- (do not call twice) -->

 

<!-- DC Twitter JS -->

<script src="dreamcodes/twitter_tweet/jquery.tweet.js" charset="utf-8"></script>

This code adds a twitter feed of your choice to your webpage. This can be helpful for providing updates to viewers and getting your thoughts and ideas out to your audience.

Here is the resource link for this code: http://www.dreamtemplate.com/dreamcodes/documentation/tweet.html

 

Week 1

<form action="/html/tags/html_form_tag_action.cfm" method="post">

Comments:<br />

<textarea name="comments" id="comments">

Hey... say something!

</textarea><br />

<input type="submit" value="Submit" />

</form>

This code will add a comment box to your webpage so others can comment on your page. This can be very helpful in getting feedback on your website.

Here is a resource website for this code: http://www.quackit.com/html/codes/comment_box_code.cfm

Comments (11)

Lori said

at 10:09 am on Sep 19, 2013

Entry #1: 4/4. Excellent job. All required elements are provided and this is a very useful code for collecting feedback.

Lori said

at 9:54 am on Sep 27, 2013

Entry #2: 4/4. All required elements are provided. Live feeds are excellent to implement into Websites. They are able to provide interactivity for the user.

Lori said

at 9:48 am on Oct 9, 2013

Entry #3 & #4: 4/4. Both excellent and useful entries with all the required elements provided

Lori said

at 10:29 am on Oct 28, 2013

Post #5: 3/4. This is a useful code but make sure that is works on all Web browsers. Also, you need to include a resource link in each post.
Post #6: 3/4. This is also a useful code when used correctly. Be sure not to create to many distractions on your site when implementing scrolling text. Also, you need to include a resource link in each post.

Lori said

at 11:23 am on Nov 18, 2013

Post #7 & #8: 4/4. All required elements are provided. #7 Provide the directions of where to place the code and be more specific about the img src. #8 When providing step by step directions format them into an easy to read list.

vltrofimov said

at 12:24 pm on Jan 10, 2014

I like flames too!!!!!!!!!!1

bebaptiste said

at 12:26 pm on Jan 10, 2014

Week #5 - I like the idea of being able to add audio files to a site. This may be very useful especially for a music group or any site relating to music. Good work.

emmoncata said

at 12:28 pm on Jan 10, 2014

Your posts about different styles of typography are really cool. Each one has a unique effect that could be used in different situations.

Lori said

at 5:44 pm on Jan 12, 2014

Post #9, 10 & 11: 4/4. Model work! Excellent and resourceful posts on various Photoshop tutorials. Your directions are clear and your visuals add to the content.

romartino said

at 1:34 pm on Jan 14, 2014

I love the fire affect, very innovative. I can see that effect being very useful when designing digital artwork.

adcadman said

at 1:43 pm on Jan 14, 2014

The fire effect in photoshop was really cool! I like the idea of using fire creatively.

You don't have permission to comment on this page.