Enjoy your own characters!

Ok, so we all know that there aren’t too many choices to arrange the text with PhotoShop with the default settings, and what if we want something more? Is there any other ways to bring the effects? My answer is going to satisfy you. Let’s learn to create something new now! And here is an example for you:

Follow the steps:

1.  You need to create a new document sized 300×500 pixels and fill it with color #1a142c.

2. Now, create a new layer, and get out the Elliptical Marquee Tool to create the selection as on the image showing below and fill it with this color-#6d56b2.


3. Remove the selection (Ctrl+D or Command+D), and apply Filter > Blur > Gaussian Blur with the following settings-change the layer opacity to 70% for current layer.

We had done with the background so far, so let’s move on to the main subject today-text effect. Select the Horizontal Type Tool and write out the letter “p” with the KabelBd font in any color you want.

4. Then, apply next Blending Options to the current text layer:
• Drop Shadow
• Outer Glow
• Gradient Overlay
• Stroke

That’s how you got the result looking like the image below.

3. Your next step will be having a right-click on the layer on the panel thumbnails, and select Copy Layer Style menu.

4. Move under the layer with letter “p”, and write out another letter “h”.

5. Do the right-click on the panel thumbnail again, and then select Paste Layer Style menu. And this you should now have the same result:


6. Use the same way to add some more letters.

7. We’re now going to finish off the tutorial by adding some shapes to the background. Use the Custom Shape Tool, and select the star shape as on the picture below from standard shapes gallery.

8. Add the star shape to the background.

9. After that, set up fill opacity to 0% and apply the Stroke layer style to the current layer. Do you have the same result here?

10. If you want, you could add more stars with the same method.

How do you like this text effect? Once you understand the PhotoShop tools better, you’ll be able to create more possibilities for any text next time.

Reference website: http://www.photoshopstar.com/graphics/photoshop-star-cute-text-effect/

Advertisements

Viva CSS! – Learning Navigation Bars

Web designing is indeed an inextricable, complicated and toilsome job. It requires a lots of proffessional skills and patience. This is what I feel after starting to learn about XTHML. However, the joy of finishing a website or run a function successfully is also beyond description. 

What is XHTML, CSS and JavaScript?

 XHTML stands for “EXtensible HyperText Markup Language”, it’s a stricter and cleaner version of HTML. In order to establish a website, you’ll need to know about XHTML, CSS, and JavaScript. Each of them controls different functions of a website. 

CSS means “Cascading Style Sheets”, which controls the style and layout of multiple Web pages all at once. By editing CSS, all formatting can be removed from the HTML document and stored in a separate file. 

JavaScript is the most popular scripting language on the internet. It works in all major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari. The main function of JavaScript is to make your website becomes more dynamic. 


About the navigation Sytem

 Navigation system is such an important element of each website. There are many kinds of navigation systems used for the websites, such as sitemap, searching bar and navigation bar. Today, I’m going to share some CSS about navigation bar because a good and clear navigation bar will bring huge success for a website, and it’s also the easiest part to start. 

A navigation bar is the main menu of a website, which shows all the information you could find within it, and in order to shorten the searching time, we usually categorize everything. It’s something similar to the image below: 

 

How to make a navigation bar by CSS?

 First, you need one standard HTML as a base. Use the <ul> and <li> elements to make the category that you designed for the navigation bar. Let’s take the above image as an example, so there are six main topics of it-”Home”, “News”, “Article”, “Forum”, “Contact” and “About”, and of course all of them should be clickable. The HTML tags will look like the following: 

 Step 1  

 

 Step 2
Now we finished a list, but don’t forget to remove all the bullets, margins and padding. Weonly need to add something to the <ul> attribute: 

 

Step 3
After editing the HTML, open a new file for CSS. And edit the <a> elements: 

 

  Step 4
Inline List Items:
One way to build a horizontaaal navigation bar is to specify the <li> elements as inline, in addition to the “standard” code above: 

 

  Step 5-1
Floating List Items:
For all the links to have an equal width, float the <li> elements and specify a width for the <a> elements: 

 

  Step 5-2
Or you could also have a vertical navigation bar:    

So, that’s how we create a basic navigation bar, and the best way to learn it is not to read this article but do some practice yourself. Hope it works well for you!    


Reference website:
http://www.w3schools.com/css/css_navbar.asp