Optik Tutorials |

The first part to your website, after deciding to start it, should most likely be to make a template for it. You can always use free templates, but why not just create your own? Its easy!

Start off by creating a 700×500 document in Photoshop. Now create a new layer, and then use the Rectangular Marquee Tool to create a navigation bar that starts about 1/5 of the way down the page. Have the navigation go all the way across and then make it a light color, I chose “#f4f2f2″.

Next add a stroke to the layer by right clicking on it and going to Blending Options. After clicking, a box will appear and on the bottom left of it click the check box next to Stroke. This will add a red 3px stroke around the navigation, but I changed the color to “#105abe”.

Next click on the text tool, and click on the navigation bar and type in whatever links you want on your navigation bar. I chose font Verdana 12pt and made it black. Put the text towards the left size of the navigation bar, but put a little space between the text and the edge of the template.

Now that the navigation bar is done, use the text tool again and click above the navigation bar. Type in your site’s title and make it whatever color/font you want. I chose Verdana 30pt and made it the color “#105abe”. A trick I usually use is that if the site title is more than one word, I make one of the words bold so it stands out more, and it gives it a little more appeal. Next I used the text tool again to make the slogan right below it. I made the slogan Verdana 20pt and black.

Next we’ll need to make a footer bar, so what I did was just copy the navigation bar layer by right clicking on it and clicking on Duplicate Layer. Then just drag the new layer to the bottom. Next I added copyright text to it.

Thats the basic web layout right there, the only thing to do next is add text. You can add text either while you’re in photoshop or after you export it, and when you have the finished product it should look like below. Remember that you can change any of these steps, add/remove steps, and change the colors to make your own unique layout.

Whenever you create a website you should have a nice looking logo to go along with it. Here are just a few ideas that I’ve had to make logos (one you may recognize)– You don’t have to follow the same steps, and it is recommended that you change things up to give your site a unique logo :). Below are the steps for making two different logos.

LOGO #1

First off create a new layer, and using the elliptical marquee tool make a circle and fill it in with a color of your choice, the color I chose is “#006cff”.

After creating that circle, create another layer and use the elliptical marquee tool again and create another circle about half the size of the first. Make the circle whatever color you would like and move it towards the bottom right of the first circle. The color I chose is “#105abe”.

Next you want to add a stroke around the second circle, so right click on its layer and go to Blending Options. Once you click on this a menu will appear, on the left navigation click on the check box next to Stroke. This will then put a red stroke around the circle, but I changed the color to white and left it at the default thickness of 3px.

Next right click on the second circle and duplicate it. Then select the layer of the duplicate circle and go to Edit > Transform > Scale. You want to scale down the circle so its again about half as big as the previous one. After you do this move it towards the top left of the first circle. You now have made OptikTutorials’ logo. Congratulations!

LOGO #2

To start off with, create a new layer and then use the elliptical marquee tool again to create a small circle and make it whatever color that you would like. I chose the color “#006cff”.

Next right click on the layer and make a duplicate of it. Move the duplicate layer to the bottom right of the first.

Next use the Line Tool and set it to a width of 6 pixels, and create a line going from the middle of the first circle to the second. The line will be on top of one or both of the circles, so click on the line’s layer and drag it below the layers of the two circles. I then set the line color to “#424242″. And you’re done, you’ve made another nice looking logo.

If when you’re making a logo for your site you can’t think of a symbol to go along with your site, simply make your own using letters. Below is an example of this where for OptikTutorials I just used a large O and T to make a stylish logo.

Outcome:

Set the layer to Multiply 100% and you’re done!

Outcome:

Make a new layer and apply image, then duplicate it a few
time onto the layer and move it around and put it in
diffrent sections, then use a splatter eraser and erase unfitting
sections, set the layer to Multiply at 100%.

Apply image again on a new layer and then press Ctrl+T
then right click it and choose perspective, play around
with it to get a nice flow. then using a splatter eraser, erase
sections which do not match then put the layer in your
desired position. Set the layer to Darken 100%:

Write in your signature text, then right click it and select
rasterize, then cut the first letter and paste it onto a new layer:

Slant the first letter nad move it down abit for a cracked
effect.

Write in some random letters in a really small font on a new
layer under your primary text and lower opacity to around
78%

Add a cruves layer fr depth and lighting.

Set the layer to Normal 100%.

Apply image on a new layer and got to Filter>Sharpen>
Sharpen and then turn it to Darken 100% for a cartoon
look and using a softbrush erase unfitting sections.

Apply image again on a new layer and go to Image>
Adjustment Layer and select Brightness/Contrast, then
change the brisghtness for some lighting and erase some
of the layer where needed. Keep the layer on Normal at
around 46%.

Create a Gradient map with some bright vibrant colours.

Outcome:

Create a new layer and then do some black brushing where you
would like darkness, then turn the layer to Multiply 100%:

Next a default Photoshop shape has been used to create a interesting
figure. First select the custom shapes tool and create a
arrow (this is included in Photoshop).

Now right click the arrow’s layer and select blending options. From
here apply the below settings.

Turn the layer to Darken at 100% and you should have a nice shape like below.

Next I used a stock lightening photo and put on the face. To get the lightening I used click here.
Alternativly if your good at using the Pen tool
you can create a lighting type shape using that, but using
a stock photo is just as good.

Go into blending options for the lightening layeron this layer and apply these
settings:

The signature is coming along nicely. Keep the lightening layer to Normal 100%.

Create a new layer and use the Magic Wand tool (W) to select a area over the
face and fill it in with White. Keep the layer
to Normal and lower opacity to around 87%:

Go to Layer>New Adjustment Layer>Gradiant Map to create a Gradiant Map for shadows and depth and use these
settings:

Set the layer you just made to Multiply at 78% and using a black softbrush,
brush in areas which you dont want the gradiant map to
apply to like below.

Outcome:

Begin by making a new canvas any size that you would like, I chose 450×120. Fill it with black.

Now insert a stock photo into the center of the document. Don’t worry about the edges not blending in. For the photo I used, click here.

I used another stock photo with some nice blue colors in
it, and then positioned it on the left side of the document. Then get out a
default hard edged size 9 brush, go to Window > Brusges, and apply these
settings to it. To get the stock image I used, click here.

Set the strenth of the brush at 100%, and start smudging the edges of the blue layer so it looks eroded and it starts working its way into the face image.

Now press Ctrl+J to duplicate the blue layer and
then using a softbrush erase the right side and move the duplicated layer towards the center of the document so it fills up the black section of the background layer.

Duplicate the first blue layer then go to Edit>Transform>Flip Horizontal and then move that layer to the right side like below.

Duplicate the layer that you just flipped and move the new layer towards the center, like you did with the other side. Use a brush to delete the overlap.

Make a new layer (Ctrl+Shift+N) and go to Image>
Apply Image so you have the whole image in one layer. Now go
to Filter>Sketch>Chrome and choose some fitting settings
you like, then Flip/Rotate the layer into a un-noticable
position. Then get out a splatter eraser brush and erase
sections from the center and leave the sections on the outside
of the sig, then turn the layer to Darken at 100% opacity (Layers Window>Change Normal to Darken>Leave opacity at 100%).

Make a new layer and use a soft brush with black and
grey where you would like the lightsource and shadows:

Turn the layer to Overlay 100%.

I wasn’t able to find an active tutorial that teaches users how to create olympic rings, so I decided to make one. This is an intermediate tutorial, but I’ll try to explain everything the best I can.

Start off by creating a 450×225 document in Photoshop. Now create a new layer and call it “blue”. Then using the Elliptical Marquee Tool create a circle like below and make it a blueish color. I chose the color “#007cd2″.

While keeping the circle selected so the little border is moving aroung it, go to Select > Modify > Contract. A little box will pop up, enter 10 and click ok.

Now click the delete key, and you should be left with a blue ring.

Now that we have the first ring, now we have to move along and create the other four rings. First off right click on the blue layer and duplicate it. Name the new layer “Black”. After this is done, right click on the black layer and go to Blending Options. Next on the pop up, click on the check box next to Color Overlay. The color overlay menu will now appear, and for the overlay color change it to Black. Now move the black ring about 150px to the right, like below.

Now repeat Step 4, only call the new layer “Red”. For the Color Overlay I used the color “#b60005″.

Repeat Step 4 again, only call this layer “Yellow”, and for the Color Overlay use the color “#f1df20″. Instead of moving the ring to the right 150px, only move it to the right about 75px and then move it down about 65px, so you end up with a result similar to below.

Now copy the Yellow layer, and call the new layer “Green”. Right click on the layer and go to Blending Options. Click the check box next to color overlay and use the color “#61a71f”. Now move the Green layer to the right about 150px.

It may look like you’re done, but now we have to make it look like the rings are actually interhooked. First select the Blue layer and go to Select > Load Selection and click ok. That should get you something like below.

Now with the outline of the blue line selected, click on the Yellow layer. Now select the eraser tool from the left menu and delete the top overlap of the Blue and Yellow rings, like below. Then go to Select > Deselect to unselect the area.

Now that we have the first overlap fixed, repeat Step 9 for Yellow/Black, Black/Green, and Green/Red. In the end you should end up with something like below.

Outcome:

Now we’re going to do one more adjustment layer. This time, we will be adding a gradient map on Soft Light and at 50% opacity.

Now you need to add a Yellow Photo filter. Leave the blending mode on normal and at 100% opacity. Then, you need to add a Black to White gradient map on Multiply at 25% opacity. See the following images:

Thats it!

Outcome:

Start off by making a new document (File > New). In this case, the signature’s size was 400px x 180px. Now, add your render or stock, do not resize it. For the one I used, click here. It should be almost unrecognizable (so pick a random part of your render or stock, not the face or something recognizable). In this case, the chest section of the Gears of war render took up the entire canvas. You should have something like this right now:

Now do an applied image. To do this, create a new layer, and then go to Edit > Apply Image. Now while you are on this layer, apply the Ripple filter. This is done by clicking on the filter menu, and opening the sub-menu called Distort, then, select Ripple. For the settings, use around 130% and on the drop down menu, select medium. Now, you should erase some of this layer. In this case splatter brushes were used to erase a little bit of this layer. If you are looking for splatter brushes, go to www.deviantart.com and run a search for them. Leave this layer’s blending mode on Normal, and don’t alter the Fill or Opacity. You should have something to the same effect as the following:

Now yet again make an applied image as explained in Step 2. This time, instead of using the ripple filter on the applied image, use the glass filter. To apply this filter, again, select the filter menu, and choose the distort sub-menu. Now select glass. Since I’m not sure of the exact settings, it would look like you should use around 10 on each of the sliders, and don’t mess with the texture. Now leave this layer on normal and erase with the splatter brushes that you downloaded earlier. Now, add in your resized render. Either paste it in (Hit Ctrl + a then Ctrl + c on the render document, then go to your signature document, and hit ctrl + v) or you can click and drag it from the render document to your signature document.

Now repeat the glass filter section of step 3. This time though, erase most of it, leaving only a few spots left. This should blend the render in with the background a bit.

Now, you will need to get some more brushes. This time, instead of splatter brushes we will be using abstract brushes. You can also find these on www.deviantart.com and running another search. Now, you need to select a black color on your color picker. Now brush around the edges a bit with the abstract brushes. This is what it should look like:

Leave that brushing on Normal blending mode on 100% opacity. Now repeat the brushing, but in a different area of the background to separate the background from the foreground / render. This time you should lower the opacity though, 30% is recommended.

You should now have (respectively) something like this:

In this step we are going to be adding some lighting. Start off by taking out a 200px soft round brush, and brushing where you want the lighting to start off at. Suggestion: Lower the opacity or flow on this brushing to about 50%. Now, select a 100px soft round brush, and do the same thing, but making a sort of light beam coming from your first brush like so:

Now make another applied image on a new layer. Now hit ctrl+t. This should put a gray box around your signature. Now, right click and hit “Flip Horizontally”. Now get out some splatter brushes (the ones you downloaded earlier) and erase everything but the top left hand corner (the corner opposite to your lighting). This should only be a subtle effect, but it fills up the background a bit more.

Just like in the last step create an applied image on a new layer. Now go to the filter menu, then the sharpen sub menu, and then select sharpen. This should, as you could have guessed, make your signature a little bit sharper. If there are places that are too sharp, erase it with whatever kind of brush suites it best. You should now have something like this:

In this step you will first need to select your lighting layer / layers. Now, once you have them selected, hit Ctrl + J. This should duplicate it, if you have more then one, it may not. If not, click and drag them down to the new layer button on your layers palette, no matter how many layers, this should duplicate them. Once you have duplicated your lighting layer(s) bring it(them) to the top and set them to soft Light. This is what you should have now:

This step is just adding Adjustment Layers. All of the following adjustment layers are set to Normal blending mode, and typically 100% opacity unless you think that it is too overbearing: