Archives for "Tutorials"
CREATING ROUND CORNER BOXES IN WEBPLUS
Webplus is a very easy and great tool for creating professional looking websites .During designing a page in webplus I think there is no need to use any other software to create graphics such as buttons and boxes .Here is a little tutorial to create corners rounded of a box .
Go to left toolbar and select quick rectangle at 12th number .
Then draw a box
Now you will see a vertical line attached to the left side of box with a dot in its middle
Select this dot with left mouse click and draw it downward with continous clicking.
You will se the change in corners and now you can adjust corners easily .
How to create rounded corner graphics in Photoshop
For a novice it is a little bit hard to find how to make round corner graphics for a website or blog or for any other use .Here I will clear it in photoshop and it is very much easy .We can create corners round according to our need .
Suppose you want to make a button for a website with slightly rounded corners.
Create a web document with transparent background in photoshop
Select rounded rectangle tool in left tool bar at 18th position
Now go to the upper option bar for shape tools
Set radius 9px for rectangle’s corners.
Draw rectangle and color it as desired .
Making rounded corners of an existing image in photoshop
Open image in photoshop
Select rounded rectangle tool and set radius according to your will .
Draw rectangle all over the image .
Right click on rectangle and select option “make selection”
Set feather amount if needed ( according to image resolution )
Copy selection created on image
Create new file and paste this selection
Now you will find your image with rounded rectangles .
Basic coloring of manga character or anime in photoshop : Magic Wand method
I think Adobe photoshop is great for coloring any object either a black and white photo or scatch .Here is a easy and simple method to color a manga or anime or cartoon in photoshop .
First import image in photoshop
Then select magic wand tool in left tool bar
Then select any part of image you want to color e.g. face .(select all face parts by pressing shift and also save every selection so that you can load it any time )
After this select brush (airbrush with feathered edges)
choose a proper color for face
Set color blending mode multiply then color it
Now we select hairs by doing this (set wand tool tolerance 100 so that it it can select most pixels )
Now again select airbrush with diameter more than 160 and blending mode multiply and color hairs with your desired style .
Now see the image you will find some white pixels uncolored .To color these pixels select airbrush and set diameter 3 or 4 and zoom the image and color these white dots without making a selection.
Now color shirt with this method .
How to paint an existing image with adobe illustrator cs4
Yes we can color any existing image in illustrator but how because live paint bucket is just working on illustrator objects and not on any outer exported object.Yes it is true but it is also true that we can convert any image to illustrator object and we can color image with live paint bucket .Suppose you have created a pencile scatch on paper and you have scanned it in pc and you want to color it with illustrator but when you open this image in illsutrator and try to color with live paint bucket you find urself unable to do this .
Now I will tell you step by step how to make image editable for illustrator .
Open Sdobe illsutrator Cs4 and import any image like this .
Now select selection tool by mouse or by pressing “V” with keyboard .
Then click over the image anywhere ,you will see the option of live trace below the top option bar .
Select the simple trace from the drop down menu ,your image will be converted to illustrator object but do not stop here and carry on
Now select the newly appeared option expand by doing this you can edit nodes of images .
Now select paint bucket from left tool bar and click over image to convert it into live paint group and ignore the warning .
You will find that you can color different parts of image with paint bucket and it will not effect the lines color such as in corel painter and photoshop.
To choose a proper color select color from color guide from right tool window .
You can cutomize your live paint bucket by editing live paint options from object >live paint >gap options
Finally we can get a colored image like this
This image also include photoshop effects such as dodge and paint brushes.
I will write full series on these effects .
SETTING UP NEW WORDPRESS : STEP 2 IF YOU ARE A BLOGSPOT USER
IF YOU HAVE ALREADY A BLOG ON BLOGGER ( BLOGSPOT ) AND YOU WANT TO TRANSFER IT ON WORDPRESS THEN IT IS VERY EASY .
INSTALL WORDPRESS ON YOUR WEB SERVER
SETUP PERMALINKS
IMPORT YOUR BLOGGER BLOG VIA WORDPRESS IMPORT OPTION
DELETE YOUR BLOGSPOT BLOG NOW
INSTALL WORDPRESS ON YOUR WEB SERVER
After getting a webhost .You will need to install worpress .It can be done by two ways
1.Manually wordpress upload and install
2.Using Script installers such as Fantastico
Manually
It is time consuming and difficult method but if you are using free webhosting you may have to use this method because most of free webhosts do not provide auto script installers .
Download wordpress zip package from wordpress.org
Extract files to a folder
Upload these files via any ftp client to where you want to install wordpress on your web space ( e.g. in root directory or in any sub direcotory as you want )
Create a mysql database
open file wp-config-sample.php on notepad and make changes and then save it as wp-config.php. (enter database name ,database host ,and password )
Type yourdomain.com/wp-admin/install.php into your browser.
Now run the installation and it is very easy and quick now.
Using Script installers such as Fantestico
It is very easy and fast and every paid webhost provides this service in its control panel .The interface of most of web hosts is similer and looking like this
Click on Fantastico and select wordpress from list
Then select new install
Then select domain name and folder ( do not name an existing folder because fantastico creats folder itself )
Then select admin username and passowrd and click ok
On next screen fantastico will tell you the mysql database created.You should note the name of database and press finish installation .
SETUP PERMALINKS
After installing wordpress login to your wordpress (www.yourblog.com/wp-admin/)
You will be redirected to your wordpress dashboard
See the left sidebar and see the settings
You will find the option permalinks
Select permalink custom structure and enter the following structure here
/%year%/%monthnum%/%postname%.html
IMPORT YOUR BLOG FROM BLOGSPOT VIA WORDPRESS IMPORT OPTION
On your dashboard go to the tools and select import
Then choose blogger from the list
You will see the authorise option on nest screen
Click here and grant access to your blogger account via login
Wordpress will show your blogspot blog and now you can import your blog with one click .
DELETE YOUR BLOGSPOT BLOG NOW
You should delete your blogspot blog to avoid duplicate content problems so that google and other search engines exclude your old blog from their index .
WEB DESIGN BASICS : ADDING LINE BREAKS AND HORIZONTAL LINES
In previous posts I have told how to create a basic webpage and how to add Headings and paragraphs .Now I will tell you how to add line breaks and horizontal line in your page .In previous posts our web page code is looking like this .
<?xml version=”1.0? encoding=”UTF-8? ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title >my page title</title>
</head>
<body>
<h1>my h1 heading</h1>
<p>paragraph line goes here</p>
</body>
</html>
ADDING LINE BREAK
<?xml version=”1.0? encoding=”UTF-8? ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title >my page title</title>
</head>
<body>
<h1>my h1 heading</h1>
<p>paragraph line goes here : </br> This is the second line of this paragraph</p>
</body>
</html>
ADDING HORIZONTAL LINE
<?xml version=”1.0? encoding=”UTF-8? ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title >my page title</title>
</head>
<body>
<h1>my h1 heading</h1>
<p>paragraph line goes here : </br> This is the second line of this paragraph</p>
<hr/>
<h2>This is the h2 Heading</h2>
<p>This is the another paragraph</p>
</body>
</html>
WEB DESIGN BASICS : CREATING HEADINGS AND PARAGRAPHS
In prevoius post I have told how to create a very basic html page .Now I will tell you how to create headings and paragraphs .Xhtml uses six type of headings named h1 h2 h3 h4 h5 h6 .Usually h1 is used to denote the most important part of the page and h2 and other headings come next to h1 .h1 is very important for seo .Size of default h1 is much more than othe heading but it can be cahnged with style sheet .
Writing a h1 heading
<?xml version=”1.0? encoding=”UTF-8? ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title >my page title</title>
</head>
<body>
<h1>my h1 heading</h1>
</body>
</html>
Writing a h2 heading
<?xml version=”1.0? encoding=”UTF-8? ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title >my page title</title>
</head>
<body>
<h1>my h1 heading</h1>
<h2>my h2 heading</h2>
</body>
</html>
Writing a paragraph
<?xml version=”1.0? encoding=”UTF-8? ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title >my page title</title>
</head>
<body>
<h1>my h1 heading</h1>
<p>paragraph line goes here</p>
</body>
</html>
You can add as many paragraphs as you want with Opening <p> and closing </p>
WEB DESIGN BASICS : WRITING A SIMPLE XHTML PAGE
XHTML means Extensible Hypertext Markup Language .
If you are looking to be a web developer you must have basic knowlege of xhtml ,css and php .
or
If you have a wordpress blog and you do not want to pay heavy money to cutomize your wordpress then you must have the basic knowlege of xhtml ,css and php because these three things make a wordpress blog .
I am starting a series of posts on XHTML and CSS and the first chapter of this series is ” how to write a basic xhtml page ” . Lets start……….
1 OPEN THE NOTEPAD
2 TYPE THE DOCUMENT TYPE DECLARATION LIKE THIS
<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
YOU CAN COPY THIS CODE FROM ANY XHTML PAGE
3 IN NEXT LINE TYPE THE HTML OPENING TAG <
4 TYPE XMLNS ATTRIBUTE LIKE THIS…….
<html xmlns=”http://www.w3.org/1999/xhtml”>
5 TYPE <head> (this is the opening head tag )
6 TYPE <title >my page title</title> (opening and closing title tag)
7 TYPE AGAIN </head> (this is the closing head tag )
8 NOW ADD THE OPENING BODY TAG <body>
9 NOW ADD THE CLOSING BODY TAG </body>
10 FINALLY ADD THE CLOSING HTML TAG </html>
11 SAVE THE FILE AS HTML AND TEST IT IN BROWSER
YOUR DOCUMENT WILL BE LOOKED LIKE THIS
WORDPRESS DESIGN : HOW TO EXTRACT A PART OF IMAGE
I have created a simple video showing how to extract a part from an image .Suppose you want to create a new image and you need the cricket bat for it then you can extract a cricket bat from any existing image .This video will simply showing the demo .It is created with serif photo plus software .
Open an image with photo plus
Select the magnetic selection tool from the left tool bar Press the shift key and work with your mouse
After selecting the whole part double click the meeting point and then cut that part and paste it as a new image .
HOW TO IMPORT OLD DATABASE TO NEW SUCCESSFULLY
When we import our blog from one to any other server , we have to import all databases to new server and we may suffer some problems while impoting mysql data base .
I am giving some tricks to bypass most of these errors .
After installing blog or cms like wordpress go to php my-admin and delete all tables from newly created database .
Import your existing database from your old server and extract it to text file .
Open text file and remove the following line in text file
“Database: `name`
–
CREATE DATABASE `name“
After removing database name you can import this database to new database easily .
Made by Symmetric Web
Distributed by Smashing Magazine