Create a Shiny Earth with Photoshop 3D Layers

Tutorial here.

I believe this is my first experience using the 3D tools in Photoshop. I think my final image came out decent but it definitely doesn't look as 3D as the image in the tutorial. I started out with a blank canvas and then opened a flat map of the earth. Then I went to 3D- new shape from layer- sphere. It was really cool to be able to rotate the earth. Using the 3D palette, I made adjustments according to the tutorial. I also added another earth image that shows the 'bumps' in the earth's surgace. The tutorial used CS4 and I have CS5 so my palette looked different but I tried to follow along as best as I could. I had to adjust the Infinite Light, and in the tutorial, there were three light settings but I only had two, so my earth came out different. Next I added the cloud image and made the adjustments according to the tutorial. Again, mine came out different because my settings were different. I merged all these layers together and created a drop shadow on the earth layer. I used the elliptical marquee tool to create the shadow with black, and then used gaussian blur and motion blur. I duplicated this layer and downsized it so it would be darker right under the earth. I duplicate the earth layer, flipped it vertically and positioned it below the earth layer. Next, I used a gradient to make the reflection of the earth fade. Then on the background layer, I added a blue to white gradient. I didn't like how my earth looked so I adjusted the hue and saturation to make it brighter and more blue. I think it still looks 3D, it's just not as shiny as the tutorial image.

Create an Energy Drink Ad Design

Tutorial here.

When I first looked at this tutorial, I thought it would be a lot harder than it actually was. I began by filling the background in with a lime green color and then used a radial shape filled with a similar color and another radial shape on top of that. Then on a new layer, I used the brush tool to create a series of circles with different sizes in a purple color, with the opacity at 60%. I made some green circles on top of that, and bright purple circles on top of that. Next, I merged all of those layers together and did a radial blur. I changed the blending mode of this layer to difference and merged it with the background layer and adjusted the hue. Then I used the quick mask tool and filled the whole thing in and erased from the middle and outwards using a soft brush with scattering. Then I used a gaussian blur, and I think I messed up something in this step because my circles came out too blurry compared the the final image in the tutorial. Next, I added the can image, changed the hue to make it blue and used the burn tool to darken the bottom of the can. I used quick mask mode again to erase the bottom of the can, then went to layer- layer mask- hide selection which made the can blend into the circles. On a new layer, I used filter- pixelate- mezzotint, and then used a radial blur. The tutorial said to set the mode to color burn, but it made mine super dark so I lowered the opacity. Then I just added some text in the color with a gradient overlay and an outer glow. My final image was quite dark, so I adjusted the color to make it much brighter and more blue-toned. I like how this turned out, I just don't know why the circles came out so blurry.

Displace Filter

Tutorial here.

This tutorial showed how to use the displace filter to create a realistic looking flag. First, I opened up an image of silk and made it black and white. The particular image I was using was really dark so I lightened it a lot. Then I used Gaussian blur at 2.5 pixels, and saved it as a .psd file. On the flag image, I used the displace filter with the default settings and clicked the silk .psd file. At first, the image looked really weird and squiggly. Then I placed the silk image over the flag layer and set the mode to hard light. The flag came out super bright and I played around with some other blend modes and nothing else really looked right so I used lowered the brightness. I have never used the displace filter before and I made another image without using it and you can really see the difference. Without using the displace filter, the lines of the flag are still straight so it doesn't look realistic, with the filter, the lines go along with the curves of the silk texture.

With displace filter:

Without displace filter:

3-D text with some extreme lighting

Tutorial here.

I thought this tutorial looked interesting. I began by making 'Sz' in Illustrator and I used Arial font. I think if I used a thicker font, or an actual logo, my end result would have looked a lot better. My text was pretty thin so it didn't end up looking very 3D. I am not great at creating highlights and shadows in images, so it was nice to practice with this tutorial. I used the 3D Extrude and Bevel effect in Illustrator and then opened it up in Photoshop. I opened the wood texture and placed it behind the text layer. I used the elliptical marquee tool to select parts of the wood to make darker, and the lower right corner to make a bright yellow color, which is the 'light source' of the image. I just did a fill and changed the blend mode to overlay. For the front part of the text I used a red to yellow gradient overlay and for the sides, I adjusted the curves until they were very dark. I used the line tool to make a guideline for creating the shadow. Following the guidelines, I used the polygonal lasso tool to make a triangular selection around the text and filled it with black. I used a layer mask and a soft brush to erase the black around the text to create a shadow. I also lowered the opacity of shadow because it looked too dark. I used a grunge texture as an overlay over the text and erased the excess around it. Then I used Bevel and Emboss on the text layer. Lastly, I adjusted the brightness and contrast of the entire image.

Design Beer Glass and Bottle

Tutorial here.

This tutorial showed how to place labels on bottles and make them look realistic. I began with the background, and added a purple gradient. The tutorial used a stock image for the glass and bottle, and I used the quick selection tool to cut both of them out. Then I began working on my labels. In the tutorial, the person used labels that were already made but I decided to make my own. I saved separate pieces of the labels so I could later customize what I wanted to use. I used brushes and text that I had downloaded earlier. Next, I added my labels to the glass and bottle. I used the transform tools to be make the labels look more realistic. Then I used a water drop texture on a new layer and changed the mode to overlay, so the labels will have water drops and like they are a part of the glass. I duplicated the glass and bottle layers, flipped them upside down and lowered the opacity so they look like shadows. Next I used the polygonal lasso tool to create a triangle shape. I used the shapes, filled them in (white for the highlights and black for the shadows) and then used gaussian blur and motion blur to make the triangles blend in and create dimension.

Sci-Fi Style Urban City Scene

Tutorial here.

The majority of this tutorial was blending images together and using adjustment layers. I haven't used adjustment layers very much before the last couple tutorials I did. I usually only adjusted colors and other things once I was done with the image, and then those adjustments were applied to the whole image. I learned that I could create a clipping make so that the adjustment layer is only applied to layer below it. A layer mask is automatically created so you can over the parts that you don't want the adjustment layer applied to. This tutorial used a adjustment layers to get half the image a blue-ish color and the other layer is a fiery orange colors. My image came out much darker and way too saturated when following the exact steps in the tutorial, so I adjusted the color and levels to my liking. I also omitted the girl stock image from the tutorial (mostly because the link didn't exist anymore) but I still like how the tutorial turned out. There is a lot of different colors throughout the image that I don't think I could have achieved without using adjustment layers.

Paper "Mountain"

Tutorial here.

This was just a quick and easy tutorial that I did while I was looking for something more advanced. I started with a crumpled paper image and did a Curve Adjustment and Channel Mixer to make the paper black and white and show the highlights and shadows. Then I used an unsharpen mask, despeckle, blur tool, and smudge stick filter to make the "mountains" look more textured. I used a lens flare in the upper left corner and used liquefy to make a glowing star shape. Then I added a new layer and added in the different colors, and changed the layer mode to overlay. I used a tiny star brush all over the image and then used a  motion blur.

Chilling Photo Manipulation

Tutorial here.

Clearly photo manipulation tutorials have become my favorite. I have been looking for more advanced level tutorials, and this one was labeled as advanced. I think the instructions were clear and I didn't have too many problems with this one, it just took me a while to finish.

I began by adding the pier and sky backgrounds and blending the seam between them. Then I added the body and head of the mermaid-thing, which were two separate parts. The head had to blended in to the sky more, so I used a layer mask and painted over the edges. I cut out the eyes from an animal skull and pasted them in, and used a small soft brush to make the eyes look like they are glowing. Next I added the ice layer, and I used Select > Color Range to select on the white parts of the image. The next couple steps involved some shading and adding in the hourglass and blending that in. Then I added the waves, and I used 5 different wave images for this. I used Select > Color Range to select the waves, but I found that I had to invert the selection or I would just end up selecting the area around the waves. I added in the person/wizard/magician and used a soft brush to make it look like there is an energy coming from him, like he is summoning the mermaid-thing. Next I added the lighting, and I just used a brush set. I added a mist effect using a gradient overlay. Then I added some color and lighting adjustments until I liked the result. I really like how my image turned out. It actually looks close to what the tutorial image looks like for once.

Supernatural Dark Scene with Fiery Effect

Tutorial here.

I came down with a bad cold last week and it really kicked my butt so I haven't been able to post as much as would have liked. I thought this tutorial looked cool and I think it turned out okay. I started with a black background and used a crack-pattern brush for where the girl would be standing. The link to the brushes in the tutorial was broken so I used some brushes that I already had, and the effect didn't turn out quite the same. Next, I used the quick selection tool to cut out some flames to put over the crack area. The tutorial said to use the crack pattern brushes to erase some of of the flames. This didn't turn out very well, maybe because I was using a different brush set. Then I added the girl and added a few adjustments to that. Next I added the flames on the side, which had to be scaled, rotated and warped. At first, the flames looked exactly like how they did in the tutorial and somehow ended up looking very different. Then I added in the crow. After that I used some feather brushes and made some adjustments with the color and contrast.

Create an Out of Bounds Fantasy Illustration

Tutorial here.

This is the 7th tutorial I've tried to get through this week and nothing has been turning out right. With the more advanced tutorials, it takes me so much longer and without detailed instructions, things get really complicated. I decided to go ahead and post this one, even though I don't like how it turned out. I thought this tutorial looked really cool, but halfway through it really started to suck. Half of the stock images didn't exist and I had to find other images that were similar. The completion time given is 2-3 hours. It took me at least 8. Most of this tutorial was using stock images and adjusting them, adding textures, etc to fit with the rest of the image. To make the waterfall, I used the lasso tool to cut pieces of an actual waterfall. For the break apart effect (which you can't see too well in mine) I used the lasso tool to move little pieces of each object. I added a radial blur over everything and used a layer mask to 'un-blur' the objects. Next I used Topaz Adjust (which was a pain in the butt to install but I figured it out eventually) to adjust the color. I also used Adobe Lightroom to change some settings. I have never used either of these programs so it was nice to see how they work. In the last step of the tutorial, you were supposed to copy the green channel and paste it over the blue channel, which didn't work and I couldn't figure it out.

The Pen Tool

You would think that at an intermediate/advanced level, I would have mastered the pen tool by now, right? Wrong. I avoid it like the plague, and I go to drastic measures to work out around. Until today. I found a tutorial from psd.tuts (here) that has a file where it gives you a guide that gives you step by step instructions while using the pen tool to trace around some letters. It took me a while to get started but I eventually got the hang of it. I wouldn't say that I'm an expert at this point, but I think I could do some basic things with it.

"Cosmic Love Goddess"

Tutorial can be found here here.

I thought this would be a fun tutorial to get back into Photoshop with. I omitted a couple steps and I really like how to final product turned out without them.

The first step was to take the photo of the model and use the Quick Selection and Refine Edge tool to get rid of the background around her. I also ended up using the Magic Wand tool and the eraser for some of the smaller areas. Then I used two different sky images and a wave image blended together to create the background. After placing the model into the background, I resized and rotated her. I did the same thing with the wings. I duplicated the wings layer and placed one layer under the model layer and one layer above it. Then I used a layer mask to erase the part of the wing that was covering the arm. Next I used some of the hair brushes (link from tutorial) to make her hair super long. I haven't used many brush sets, so it's always nice to use something new and try it out. I added the stars using a soft brush and used the Brush Palette to vary the size and spacing, then set the layer mode to overlay so they blended in the background better. Then I made three different layers for Color Balance, which I have not used before. In the tutorial, it showed different settings for the shadows, midtones and highlights for each of the three layers. The settings created a pink-ish color. Then I used the eraser tool with a soft brush to erase in the middle of the second two layers to get the effect that you see above.

Interface Problems

I had to shrink this to get it to fit, but my interface is there, and then the template is below it. First of all, the interface only takes up about half the width of the page, so I don't know if I need to remake and make it bigger or if this can be adjusted. Then I thought the interface would override the template. Do I need to open a blank page and then put the interface in? I'm really confused as to how to get the interface into Dreamweaver and I can't find a tutorial that explains it. I've been hung up on fixing this for two weeks now and I can't keep remaking this interface.

Designing Web Sites from Photoshop to Dreamweaver

This tutorial included a bunch of different websites that are useful for graphic and web design . One is www.mioplanet.com/product/pixelruler for easy measuring.

In the tutorial, Sue Jenkins creates an interface in Photoshop. It was kind of the same concept as the other interface tutorial. She adds a lot more content though. It was really cool to watch her put everything together. She used the guides on Photoshop, which made it much easier to use the slice tool. She also talks about how to optimize web graphics, and the difference between saving things as a gif, jpeg or png. I learned what a favicon is and how to make one in Photoshop as a 16x16 graphic.

She opened a blank page in Dreamweaver to start.

Interface: Round Two

I decided to remake the interface using the tutorial and opened it in Dreamweaver. This is what happened when I preview it in Firefox.

Spry Menu Bar

I created a spry menu bar instead of using the links from the template. It was really easy to do, especially from watching the tutorial a few posts ago. I deleted the logo section of the page so that the links are now right under the header. I still have to figure out how to center them. Then I just deleted the links codes from the template as well. I removed the sub-menus for now, but I can always add them again later. I like the look of the spry menu bar much more than the sidebar links. I still might make a custom nav bar or spry menu bar if I can figure out how to do it.

Photoshop Interface

I went and did the interface tutorial for Photoshop. I'm not going to repost it since I already made it last Spring. I'm now working on create my own interface that I'm going to use for my own website. Images will be posted soon.


Top of interface:

I'm working with a template in Dreamweaver. I put the image from above as my header and I'm not sure yet if I want to use the header by itself or make a complete interface. I want to create a nav bar and make the links horizontal but it isn't work out so well. I can't find a decent tutorial that explains how to do this.

Interaction Design Fundamentals

This tutorial isn't directly related to Dreamweaver, but applies to Graphic and Web Design in general. Interaction design covers a variety of different fields and jobs. People from different fields often collaborate for interactive design projects. Designs are created to meet the needs to people.

Design Interaction Process:
1. Define the project
2. Research: ideas, prototypes
3. Ideate: create possible solutions and choose best idea
4. Design and Prototype
5. Iterate: have people view and evolve design, usability

Essential Principles: important for creating successful designs
Consistency

Perceivability

Learnability

Predictability

Feedback 

Having a good navigation system on your website is also important, so people can easily find what they are looking for. Taxonomy is a good way to keep links organized. Sitemaps are also helpful.

Typography with CSS in Dreamweaver: Part 2

Drop shadow effects:

A new property is added by using the 'text-shadow' and then the following four values are put in: an x offset, a y offset, the blur radius and the color.

The second half of the tutorial was a little bit over my head. The topics were: Using Advanced CSS Text Effects, Structuring CSS Text and Defining Lists with HTML and CSS. Seeing how to make the different text effects was interesting and informative but I think it would take some practice to get them right. In the Structuring CSS Text part, the narrator showed how to make a CSS3 multiple column layout. There was a lot of steps involved, but it was nice to see how it was done. Overall, I like these tutorials so far. I don't think I use would everything that they explain but I am enjoying learning more about CSS.

Typography with CSS in Dreamweaver: Part 1

When you make your text bold, it creates a <strong> tag, and when you make it italicized, it creates an <em> tag under the HTML properties. Under the CSS properties, you can change what these tags are supposed to look like.

After switching from HTML to CSS, you are now able to edit or create new rules for your text. 

I also learned a few different ways to change the color of text and how to make semi-transparent text.

Under properties, the man in the tutorial writes rgba(255,255,255

255 is the value for each of the color channels, followed by the alpha transparency level, which is between 0 and 1. The value .5 is used.

How make make drop caps (when the first letter of a paragraph is capitalized and the rest of the text flows around it).

First you need to create a new CSS rule. The narrator says to hit 'Less Specific' and then type in first letter to make the drop cap.

Creating a First Web Site with Dreamweaver CS5

I thought this tutorial would be a good refresher to get back into Dreamweaver. I re-discovered the Page Properties, which I always forget to use. This keep the different font types/colors consistent throughout the web page. The text can also be edited through the CSS Styles panel on the right side of Dreamweaver. Fonts can also be changed by adding a new rule under Rules in the CSS panel. Live view is helpful for seeing how your links will look. I also learned how to use and edit pre-made layouts. I learned how to make and edit a spry menu bar. Overall, the tutorial was a good refresher and I learned some tips and tricks for when I'm ready to start building my website.