Home › Monthly Archives › July 2007
29Jul

Sandy Islands Maldives Website

Yusuf Web Design 8 comments

sandy01.jpgThe coding and designing work of www.sandymaldives.com or www.sandyislandmaldives.com is complete! This is another low budget website with a host of back-end features. The site is designed and hosted used LAMP, like all other sites. Design and content are separated using CSS, HTML and MySQL. Among the features of the site includes ability to browse resorts by price range, lodging type and location. Additionally alphabetical listing and a complete list of the resort is also available. As for the safaris, it is the complete list of safaris along with alphabetical listing.

As the site is designed in a way that the client can change and manipulate each and every aspect of the site. Hence, most of the data entry is left for the client and the preparations are underway. Expect to see more complete information and new images in the coming days.

sandy02.jpgAs for the administration panel, is divided into updating the resorts, safaris, about us and Maldives data. In addition the client can create their own categories, price range and others. Resorts and safari information can be added and edited with upload of unlimited photos in any given category. All of these done without leaving the site or without the use any external upload program! All images will be automatically resized and thumbnail.

23Jul

Sandy Logo…

Yusuf World 2 comments

sandylogo.jpg

I am known to give too may options to my clients. Likewise after a long long time I got a client who was interested in a logo design. Actually this is a redesign of a logo project I handed over to a friend. They really did not like the previous logo so I had to redo it. Pick your choice and your free to criticize! I will tell you later which logo the client liked.

09Jul

Proud to be a Maldivian…

Yusuf wallpaper 4 comments

You have to check this out… better click it out…

wallpaper02.jpg

08Jul

Photoshop Code Name…

Yusuf photoshop 1 comment

Nothing too productive, just fun! Each version of Photoshop have a code name! Like version CS3 is named red pill! If you want to know the code name of Photoshop

 

Just press and hold CTRL key while selecting Help > About Photoshop…

 

photoshopcodename.jpg

Aren’t Photoshop guys cool?

08Jul

Photoshop Tips: Cool Twisted Designs

Yusuf Design, photoshop, tips 2 comments

Creating twisted or circular designs using Photoshop is one of the simple and easiest of all. The procedure is rather widely used by design applications! This can be tried either in Coreldraw or Illustrator too! But I prefer Photoshop! So let us start!

twisted01.jpg

1. Create New Document (Ctrl+N) – Photoshop default or 300X300 pixel
2. Create New Layer (Ctrl+Shift+N)
3. Select Brush Tool (B)
4. Choose Brush Palette

twisted02.jpg
5. Take a soft brush
6. Change the spacing so it looks like dotted lines
8. Select red as the foreground color
7. Back in the document while pressing and holding shift, draw a line

twisted03.jpg
8. Press Ctrl+Alt+T (transformation with a copy)
9. Press and hold Alt and move the center point
10. Rotate at an angle of roughly 10-15 degrees

twisted04.jpg
11. Press Enter/Return to commit the changes (note a new layer would be created automatically)
12. Press Ctrl+Alt+Shift T, to repeat the transformation in a new layer! Keep on pressing Ctrl+Alt+Shift T until you get the desired effect!

You can select all the layers and group them or convert them to smart objects for better handling!

That is it! Just use your imagination!

03Jul

Batch processing photo watermarking process

Yusuf Photography, photoshop 4 comments

You can batch process the watermarking process so as to automate it! However, this requires a bit of actions, so here is a step by step guide on creating the action as well as the batch processing step!

So there are two steps, batch processing can only be applied to to action! So first we have to create an action!

So for the step one, creating your watermark action, follow these steps

1. Open an image in Photoshop (any image would do, preferred same size as the rest of the photos!)

batchpro01.jpg
2. Choose Windows > Actions
3. When the action palette pops-up
4. Click on the create new actions
batchpro02.jpg
5. Give the action a reasonable name

batchpro03.jpg

6. While making sure the record button is active

batchpro04.jpg
7. Just do the steps for watermarking your image (it is a good idea to reset everything to normal and follow a logical order)! Here are my steps!
1. Press ‘D’ to reset foreground/background
2. Press ‘X’ to switch white as foreground
3. Press ‘T’ to select font/text tool, select the font size and name to your liking and start typing
4. To center the text, select the move tool, (V) hold on the Shift (or Ctrl) key and select both the font and the image from the layer palette
5. Click on Align vertically and horizontally to current layer

batchpro05.jpg
6. Select the font layer (to de-select image layer)
7. Reduce the opacity of the font layer to 25%
8. To merge to visible, press Ctrl+Shift+E

8. Now end the recording

batchpro06.jpg

Now your action is completed and it is time for the real action

Batch processing your watermark action!

batchpro07.jpg

1. Choose from the file menu: File > Automate > Batch…
2. Here you have all sorts of cool options
1. Choose the Action, in our case watermark
2. Select the source, whether it is a folder or opened files
3. If a folder, you can select to over ride the various dialogue boxes and if to include subfolders
4. You can change a different destination folder or just to save the watermark to your selected images
5. Thats it and just press ‘OK’

Note: if you are working on ‘jpg’ or other similar formats than the image quality dialog window will still popup (this can be overriden if you have a save action within the created action, but it make things a little complicated at times)! So just press ok!

02Jul

Watermark your photos before sharing

Yusuf Photography, photoshop 5 comments

If you want to watermark your photos before sharing with people, it can be done in two simple steps in Photoshop. Yes, all it takes is two simple steps!
watermark01.jpg

Step 1. Type your text or create a new layer and place your logo or symbol where you want it at the desired size! White color watermarks look more realistic than any other color.

Step 2. Reduce the opacity of the new layer to 25%.

That’s it!

watermark02.jpg

02Jul

PHP & MySQL Tips: AZ List from DB

Yusuf mysql, PHP 4 comments

Past two days I have been busy designing a website! It is not too fancy from outside, but as usual all my websites are purely server based, with PHP and MySQL in the back end! So here is a tip for those PHP and MySQL fans! So if you are experienced in MySQL & PHP this can save you some time.

In a dynamic site AZ list can be tricky, as the users are allowed to add and edit the content of the website the AZ list contents can change at anytime.

azlist.jpg

In addition I don’t like to have links to pages which will have no contents, in other words if there is no resort starting with ‘U’, why have a link to it!

So here is the MySQL query I used:

“SELECT DISTINCT UPPER(LEFT(LName,1)) as letters FROM resorts ORDER BY letters”;

This is a simple query, here ‘LName’ is the name of the field and ‘resorts’ is the table in the database. So you will need a table named ‘resorts’ with at least one field names ‘LName’. So substitute as needed. This query will give you a list of unique first letters of all the data in the given fields!

azlist02.jpg

Now all you have to do is to loop the query result using PHP! Here is the complete coding!

//Database Connection String

$hostname = “server_localhost”;
$database = “database_name”;
$username = “user_name”;
$password = “password”;
$connection1 = mysql_pconnect($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR);

//Data Extraction

mysql_select_db($database, $connection1);
$query_AZList = “SELECT DISTINCT UPPER(LEFT(LName,1)) as letters FROM resorts ORDER BY letters”;
$AZList = mysql_query($query_AZList, $connection1) or die(mysql_error());
$row_AZList = mysql_fetch_assoc($AZList);
$totalRows_AZList = mysql_num_rows($AZList);

// Displaying the result by looping using PHP

<?php do { ?>
<?php echo ‘<a href=”list.php?ltr=’.$row_AZList['letters'].’”>’.$row_AZList['letters'].’</a>’; ?>
<?php } while ($row_AZList = mysql_fetch_assoc($AZList)); ?>

Thats it! Hope this will come in use for someone some day!

01Jul

Hot Wallpapers: Angi 01

Yusuf Design, wallpaper 7 comments

When I practice my Photoshop skill I frequently end up creating wallpapers! I have a load of modified and custom designed wallpapers on my hard disk, so here I am sharing some of the creative that might interest you!

Today’s wallpaper is Angi 01 (1024X768) click the image to enlarge

wallpaper01.jpg