Posts from ‘Tutorials’
How to Make Depth of Field Typography
DOF Typography
DOF Typography, what the hell is that exactly? Well I needed one day to make the text from a header page someway different, sadly color, position, angle and all other stuff didn’t quite get the main idea of different. Then I thought to make it look like the letters were put there by hand and look like they were hanging, some sort of smooth 3D effect.
Well the idea is not new I’m sure of that, but the solution to do it in Photoshop is quite easy peasy and no super cool plugins or 1000 layers are necessary (feel free to search for other solutions over the net, but this is how I did it so stick around to see my version).
The Desired Effect – Magnified
So, the desired effect in the end should look like the one in the example above, you can see that some letters are in front of the others and the light casted drops a shadow just enough to make them look like they are hanging there without a pin (some sort of a 3D effect)
Ever wanted to add a bottom shadow effect to some elements, shapes or images in Photoshop in just a few easy steps? Well actually is quite easy to do something like this and you don’t have to be an expert.
The main design advantage that bottom shadow effects have is that it will give you the impression of deepness to your content and elements.
Here is the desired effect
Step 1 – Open your image / document
Open your document or image in Photoshop and create a new Layer right after your main Layer. In this layer we will add the bottom shadow effect and because the new layer is positioned right after our main one it will display in the back without overlapping the main layer…
Inspired by others ideas and code and also by the need to insert a Top Link like button on my own website I managed to write a script that not only works on all major browsers but it’s also neat and animated 
The expected outcome
The general idea was to try and add a link on the right side of the page that will appear and stick there after a certain percentage of the page is scrolled down and when clicked will smoothly scroll the page back to the top. Also it’s mandatory that this should work on all major browsers (including IE).
Here is an example how this should look like (example working already on this page, just scroll down to see it)
The button and the placement problems
In order to add the button to the page we just need to add this code to our page just after the <body> tag:
<a href="#header-top"> <div id="back-top" style="display: block;"></div> </a>
The DIV tag will be used to show our top link using a background-image (but you can use a text just as well) and the anchor will be used to link us to the top of the page (in this case by the most outer div tag with the #header-top id) .
Photoshop Scripting
I needed one day to make a mirror effect (you know when you place two mirrors one in front of the other and look at them) for 50 photos and started to make them by hand in my PS. I soon give up because it was taking to long and tried to find a solution that will be more easy to use and more quicker. Lucky me that Adobe thought of this kind of problems and offers us two ways to solve this issue.
The Methods
The first one: ACTIONS are very easy to use directly from PS. No programming required, no nothing, just record what you want to do and then apply that steps to a bunch of photos.
Another way is to use SCRIPTING is PS to achieve our desired output. Basically PS let’s us use scripts to automate most of the processes that we make by hand.
A script is a series of commands that tells Photoshop to perform a set of specified actions, such as applying different filters to selections in an open document. These actions can be simple and affect only a single object, or they can be complex and affect many objects in a Photoshop document. The actions can call Photoshop alone or invoke other applications…
A few days ago I realized that Ubuntu doesn’t have “direct support” for ADSL modems so after long searching and internal tweaking I found a way to make this two work together without any problems.
I tried all these on the latest distribution of Ubuntu as of 17 Sep 2009 wich is 9.04.
Step 1: Download all these files libatm1, br2684ctl, speedtouch_ng – ZIP
Step 2: Install them in the following order:
All the files are in DEB format so there is no need for the terminal just yet (they work as setup exe files in Windows)
1. libatm1 – it should be a new version already in Ubuntu, if this is the case skip the installation
2. br2684ctl
3. speedtouch_ng – Here you will be presented to enter your credentials and some info about your connection. When prompted what connection type to use be very careful to chose PPPOE / ATM then enter your user name (for example 02141xxxxx@SIP1), your password and the values for VPI/VCI (for Romania are 0.35 – google or check your contract for other countries). Also don’t forget to check Connect at startup option here also.
Check out the new version of this article here: Highslide Nextgen and WordPress Integration Ver-2
In this tutorial or guide however you want to call it I will show you how to make Highslide and NextGEN Gallery to be lovers in WordPress.
This tutorial is not intended to the average user so a little bit of “Knowledge” is required. Although I think anyone can do it.
- First of all upgrade WP to the latest version, I am using v2.7.1
- Install NextGEN if you haven’t already from here (I am using v1.1.0)
- Download Highslide from here (I am using v4.0.12)
Go to your server and create a folder called highslide in the plugins folder – wp-content/plugins/highslide/.
Copy to this folder the following files/folder that you have extracted from Highslide zip file:
- highslide-full.packed.js
- highslide.css
- highslide-ie6.css
- the whole graphics folder
The folder structure should look like this:
The first step is now complete Highslide and NextGEN are on there way to become lovers.
Now we have to set all the required options for Highslide, so you can check all the examples at this page and chose one from there to use. In this example I will use example-gallery-controls-in-heading.
Now create a new file called highslide.config.js in which we will add all the options for Highslide. Copy and paste all the code from that example (it should be in the page source) in our config file. It should look something like this:
hs.graphicsDir = 'http://yourdomain.com/wp-content/plugins/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'controls-in-heading';
hs.fadeInOut = true;
//hs.dimmingOpacity = 0.75;
// This two lines will take the title of the pictures from NextGEN and add it to the caption field in Highslide.
hs.captionEval = 'this.a.title';
hs.headingText = 'I can see what you see not...';
// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: false,
overlayOptions: {
opacity: 1,
position: 'top right',
hideOnMouseOut: false
}
});
Upload the file to the highslide plugin folder we have created.
As you can see all the options required by Highslide are there. The most important thing is that I’ve added 2 extra code lines that will take the title of the pictures from NextGEN and add it to the caption field of Highslide and for the heading field just a simple text.
// This two lines will take the title of the pictures from NextGEN and add it to the caption field in Highslide. hs.captionEval = 'this.a.title'; hs.headingText = 'I can see what you see not...';
For more detailed info about this options you can take a look at this page Highslide JS API Reference. The thing you need to remember is that you can make virtually any kind of combinations to show whatever text you like.
We are getting closer 
Now update all the image URL-s in the .css files (highslide.css and highslide-ie6.css) with your path to the gallery folder
Initial URL: background: url(/graphics/fullexpand.gif) New setting: background: url(http://yourdomain.com/wp-content/plugins/highslide/graphics/fullexpand.gif)
You can search and replace to do it really quick.
The final step is to edit the header.php from your template and add just above the </head> tag this lines:
<!-- Highslide Plugin --> <link rel='stylesheet' type='text/css' href='http://yourdomain.com/wp-content/plugins/highslide/highslide.css' /> <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="http://yourdomain.com/wp-content/plugins/highslide/highslide-ie6.css" /> <![endif]--> <script type="text/javascript" src="http://yourdomain.com/wp-content/plugins/highslide/highslide-full.packed.js"></script> <script type="text/javascript" src="http://yourdomain.com/wp-content/plugins/highslide/highslide.config.js"></script>
Now for the final test just hit F5 in your browser and see the Love , and that’s it. Be sure to remember to update all the paths with your web addres.
I hope you enjoyed this tutorial and you will find it useful. I am open to any sugestions and feedback.
“The Love” doing her thing 
Subscribe
