Designtech4u

Cool HTML Codes Text Effects, Marquees, Backgrounds

2018-07-26T23:10:00.001-07:00

Cool HTML Codes are the foundation of nearly every website on the web. This page contains html animation codes, image codes, marquee codes, text effects, background codes, and some other neat effects, as well as an introduction to HTML. These are all really easy to copy and paste directly into your blog, website, forum, etc.

HTML codes are the language a browser uses to display a website. It is also what designers use to creat web pages, text, tables, and more. HTML can do a lot of neat things, in addition to simply creating a website. You can use HTML to create neat text effects, tables, links, background colors, marquees, and so much more. These are great for adding a customized look to your blog, website, eBay auction, forum, and more. I use HTML all the time even for wordpress, and these will also often work with Genesis (Studiopress), Thesis, Myspace, Youtube, eBay, forums, etc.

HTML stands for Hypertext Markup Language. Basically, it is a text code that represents a document on the web. This web page is made up of HTML codes & your web browser is reading these codes & displaying the colors, text, links, & tables.

Learning HTML by itself can be very difficult. So instead of learning how to create & enter your own HTML, just click the link below for some neat tips & tricks of HTML in easy-to-use “copy & paste” boxes.

How to Use These HTML Codes

Highlight the text in the textboxes with your cursor by clicking & dragging or by placing your cursor in the text box & pressing CTRL A. This will highlight the html code.
Then right click with your mouse & select “copy” OR press CTRL C. This will copy the html code for you.
Then to paste it into your website or eBay auction (if you are doing this to your eBay auction or website make sure to first click on the “Enter HTML” tab on the description box to enter the HTML) simply right click again & click paste or press CTRL V. It should now look like this: <b>YOUR TEXT GOES HERE</b>
Now where it says “YOUR TEXT GOES HERE” type what you want to say. Be careful to not delete any part of the code or it will not work. Once you switch from the HTML format to the regular text format what you typed should be bold. If it didn’t work make sure you didn’t delete some part of the code by accident.

HTML Text Effects

These HTML text codes are great for changing the style, color, and format of the text. You can use these basic HTML codes to alter the color of your font or text on your blogs, myspace, facebook, eBay auction listings, craigslist ads, HTML documents, and much more. Using HTML with text is a great way to really make a sentence or word stand out. These are great for sales pages where you want to emphasize certain features.

HTML text effects are usually very simple to use, and you can change the text with just a small change in the code.

HTML Text Effects

HTML text effects are usually very simple to use, and you can change the text with just a small change in the code.

HTML Code To Center Your Text:

HTML code to Right Align Your Text:

HTML Code to Left Align Your Text:

HTML to Justify Your Text:

HTML Code to Bold Your Text:

HTML Code to Italicize Your Text:

HTML Code to Underline Your Text:

HTML Code to Underline, bold, & italicize your text:

Changing Text Size: with HTML

To change size, just change the 24 (but leave the ” “) to any size you want.

HTML for Changing Text Color:

To change colors, replace #FF0000 with the new color you want.

HTML for Changing Text Style

Change allegro BT to any style you want. (example: Times New Roman)

HTML Text Line Here
And Here!

You can adjust the colors, size or alignment of the font by changing the code.

HTML Make Your Text a Blur:

You can adjust the colors, size or alignment of the font by changing the code.

Add Text Shadows HTML:

You can adjust the colors, size or alignment of the font by changing the code.

Add Shadows with A Blur:

You can adjust the colors, size or alignment of the font by changing the code.

Make Glowing Text in HTML:

You can change alignment, color, size, etc. by modifying the code.

Making Text a Hyperlink:

Example: <a href=http://www.registerednursern.com/> Click Here</a>

Make your Text Wavy

TEXT GOES HERE

Make Your Text Flash!

HTML Marquee Codes

HTML Marquees are really great to add to your myspace, facebook, eBay auction listing, blogs, and websites. The movement of the Marquee is really a neat effect that can look really cool to your website visitors. It can grab attention when used in auction listings on sites such as eBay or Craigslist.
The marquees on this page do not actually move. If you want to see how they work, copy them into your website or eBay auction listing.

*NOTE: When you are adding marquees to your eBay auction listing they will not work in standard mode in the item’s description part until once you are done making your eBay auction listing and then you press the submit button to put it on eBay.

These HTML marquee codes are great to add some movement to your auction, website, or Myspace. They can really get someone’s attention.

Make a Cool
Wavy
Marquee!!!

T
e
x
t

>>Your Text Here!<<

Your Words Here

Your Text Goes Here

Put Your Text Here

Marquee That Scrolls Left

Marquee That Scrolls Right

Marquee That Scrolls UP

Marquee That Scrolls Down

Zigzag Marquee

Adding Color To Your Marquee

Make your Text Bouncy

Put Your Cursor over this!

HTML Background Codes

Background HTML codes are great if you want to change the background of your website, blog, eBay listings, myspace, and more.
Most websites that are created using HTML use one of the basic codes below to indicate the background color to the web browser. By using the basic codes below, you can change the color of your basic HTML page.
Note: Remember, you can only check these by adding the code to an HTML page, etc.

Add a background color to your website.Note: this code will not work for eBay auctions. See below for instructions on how to make background colors for your auctions.

To make a background color for your eBay auction, just use this code. It will create one large table that you can use for a background.

Use this code to use an image (or picture) as a background for your website.

Make a background picture move along with you as you scroll.

This is a cool html trick. Use this to let your visitors change the color of your background. Go ahead and add this code to you site & click the button & see the outline change colors!

Add background music to your auction or website!Note: First, you will have to host your music just like you would with a picture.

RegisteredNurseRn.com

<html> <head> <style> .F1 {filter: glow(Color=#CC00FF,Strength=10);      width=400px;      height=200px;}      .F2 {filter: glow(Color=#00FF00,Strength=9);      width=300px;      height=200px;}      .F3 {filter: glow(Color=#0080FF,Strength=12);      width=150px;      height=200px;}      </style> <script> var rate = 750 var i = 0 var F = ‘F1’ function doThing(){    if (document.getElementById&&document.all) {          ok =  true       i++;       if (i==1) F = ‘F1’       if (i==2) F = ‘F2’       if (i==3) F = ‘F3’         YammaYamma.className=F       if (i > 2) i = 0       timer=setTimeout(‘doThing()’, rate)    }          } </script> </head> <body bgcolor=”#FFFFF” onload=”doThing()”> <table width=”281″ cellspacing=”0″ cellpadding=”10″ height=”164″>
<tr>     <td>       <center>
         <font face=”Courier” size=”5″ color=”#FFFFFF”>         <p id=”YammaYamma”>
<b>YOUR TEXT GOES HERE!</b>         </p>
</font>       </center>
</td>   </tr>
</table>
</body> </html>    	<b><font size=”4″>Your Text Goes Here!</font></b></td> </tr>
</table>

NOTE: This code does NOT work in eBay auctions but it will for your website!

Add a Cool Color!

Put Your Text Here!

Do you want to have a small image next to your cursur? To do this get a picture and simply host the picture & then use this html code to do it. A lot of peopld do this on myspace & in eBay Listings.

This html code prevents people from copying your auction or website context.This code works when you right click your mouse, & it will cause a pop up box!

Want to add a link to your eBay auction so people can watch it!

Allow visitors to add your webpage to their favorites!

CSS3 Gradients

2018-07-15T02:54:00.000-07:00

What is Gradients?

Gradients displays the combination of two or more colors as shown below −

Types of gradients

Linear Gradients(down/up/left/right/diagonally)
Radial Gradients

Linear gradients

Linear gradients are used to arrange two or more colors in linear formats like top to bottom

Top to bottom

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(pink,green);
            background: -o-linear-gradient(pink,green);
            background: -moz-linear-gradient(pink,green); 
            background: linear-gradient(pink,green); 
         }
      </style>
   </head>
   <body>
      <div id="grad1"></div>
   </body>
</html>

It will produce the following result −

Left to right

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(left, red , blue);
            background: -o-linear-gradient(right, red, blue); 
            background: -moz-linear-gradient(right, red, blue);
            background: linear-gradient(to right, red , blue);
         }
      </style>
   </head>
   <body>
      <div id="grad1"></div>
   </body>
</html>

It will produce the following result −

Diagonal

Diagonal starts at top left and right button

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(left top, red , blue); 
            background: -o-linear-gradient(bottom right, red, blue); 
            background: -moz-linear-gradient(bottom right, red, blue);
            background: linear-gradient(to bottom right, red , blue); 
         }
      </style>
   </head>
   <body>
      <div id="grad1"></div>
   </body>
</html>

It will produce the following result −

Multi color

<html>
   <head>
      <style>
         #grad2 {
            height: 100px;
            background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink); 
            background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink); 
            background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink); 
            background: linear-gradient(red, orange, yellow, red, blue, green,pink); 
         }
      </style>
   </head>
   <body>
      <div id="grad2"></div>
   </body>
</html>

It will produce the following result −

CSS3 Radial Gradients

Radial gradients appears at center

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            width: 550px;
            background: -webkit-radial-gradient(red 5%, green 15%, pink 60%); 
            background: -o-radial-gradient(red 5%, green 15%, pink 60%); 
            background: -moz-radial-gradient(red 5%, green 15%, pink 60%); 
            background: radial-gradient(red 5%, green 15%, pink 60%); 
         }
      </style>
   </head>
   <body>
      <div id="grad1"></div>
   </body>
</html>

It will produce the following result −

CSS3 Repeat Radial Gradients

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            width: 550px;
            background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%); 
            background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
            background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
            background: repeating-radial-gradient(blue, yellow 10%, green 15%); 
         }
      </style>
   </head>
   <body>
      <div id="grad1"></div>
   </body>
</html>

CSS shadow property

2018-07-11T01:22:00.001-07:00

CSS3 supported to add shadow to text or elements.Shadow property has divided as follows

Text shadow
Box Shadow

Text shadow

CSS3 supported to add shadow effects to text. Following is the example to add shadow effects to text

<html>
   <head>
   
      <style>
         h1 {
            text-shadow: 2px 2px;
         }
         h2 {
            text-shadow: 2px 2px red;
         }
         h3 {
            text-shadow: 2px 2px 5px red;
         }
         h4 {
            color: white;
            text-shadow: 2px 2px 4px #000000;
         }
         h5 {
            text-shadow: 0 0 3px #FF0000;
         }
         h6 {
            text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
         }
         p {
            color: white;
            text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
         }
      </style>
      
   </head>
   <body>
   
      <h1>Tutorialspoint.com</h1>
      <h2>Tutorialspoint.com</h2>
      <h3>Tutorialspoint.com</h3>
      <h4>Tutorialspoint.com</h4>
      <h5>Tutorialspoint.com</h5>
      <h6>Tutorialspoint.com</h6>
      <p>Tutorialspoint.com</p>
      
   </body>
</html>

It will produce the following result −

box shadow

Used to add shadow effects to elements, Following is the example to add shadow effects to element

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            padding: 15px;
            background-color: red;
            box-shadow: 10px 10px;
         }
      </style>
   </head>
   <body>
      <div>This is a div element with a box-shadow</div>
   </body>
</html>

12 Cool Tricks For Html

2018-07-11T00:46:00.000-07:00

1. Map images

Image maps are cool images with clickable areas that you can link to other parts of the document, or other web pages. Not everyone may be aware that the <map> element will let you define the areas on an image that a visitor can click. Simply mention the corresponding X Y coordinates in the <area> elements inside <map>.

An example of this feature would be a world map that would take visitors to the different regions where your business has a presence.

You can only style markers directly on the image in image editing software.

Here is an example code:

<h1 style="text-align:center;">The 7 Continents</h1>

<h4 style="text-align:center;">&#10148; Click on the dots in the image to go to a continent section</h4>

<map name="continents_map">

 <area shape="circle" coords="70,70,10" href="#north_america">

 <area shape="circle" coords="133,185,10" href="#south_america">

 <area shape="circle" coords="270,137,10" href="#africa">

 <area shape="circle" coords="292,44,10" href="#europe">

 <area shape="circle" coords="469,201,10" href="#australia">

 <area shape="circle" coords="374,65,10" href="#asia">

 <area shape="circle" coords="340,267,10" href="#antartica">

</map>

<figure style="text-align:center;">

    <img usemap="#continents_map" src=https://bit.ly/2bgFrvL width="600px" />

    <figcaption>World Map</figcaption>

</figure>

<div>

    <h3 id="africa">Africa</h3>

    <p>Our locations in Africa</p>

</div>

<div>

    <h3 id="asia">Asia</h3>

    <p>Our locations in Asia</p>

</div>

<div>

    <h3 id="europe">Europe</h3>

    <p>Our locations in Europe.</p>

</div>

<div>

    <h3 id="south_america">South America</h3>

    <p>Our locations in South America.</p>

</div>

<div>

    <h3 id="north_america">North America</h3>

    <p>Our locations in North America:</p>

</div>

<div>

    <h3 id="antartica">Antarctica</h3>

    <p>Our locations in Antarctica.</p>

</div>

<div>

    <h3 id="australia">Australia</h3>

    <p>Our locations in Australia.</p>

</div>

The accompanying CSS code can be:

body {
    font-family: "bookman old style";
}
:target {
    color: lightyellow;
    background: indianred;
}
h3,
h1 {
    color: indianred;
}
img {
    border: 3px dashed indianred;
}
body {
    counter-reset: srl;
}
h3::before {
    counter-increment: srl;
    content: counter(srl)". ";
}

2. Allow visitors to change background or text color

A little extra bit of code will allow your visitors to choose their own text and background color. It's impossible for you to please everyone with your color choices, so using this trick will be an excellent case of pleasing all of the people, all of the time.

Here's the code you will need:

<select name=”clr” onchange=”document.bgColor=this.options[this.selectedIndex].value” size=”1″>
    <br>
    <option value=”black”>black
        <option value=”orange”>orange
            <option value=”flamingred”>fuschia
                <option value=”lightyellow”>light yellow
                    <option value=”green”>green
                        <option value=”cyan”>cyan
                            <option value=”yellow”>yellow
                                <option value=”red”>red
                                    <option value=”white”>white</option>
</select>&nbsp;&nbsp;Background Color

<br>
<select name=”clr” onchange=”document.fgColor=this.options[this.selectedIndex].value” size=”1″>
    <br>
    <option value=”black”>black
        <option value=”orange”>orange
            <option value=”flamingred”>fuschia
                <option value=”lightyellow”>light yellow
                    <option value=”cyan”>cyan
                        <option value=”yellow”>yellow
                            <option value=”red”>red
                                <option value=”white”>white</option>
</select>&nbsp;&nbsp;Text Color

3. Add MetaData

Be seen on Google's searches and other search engine searches by making sure that you have provided meta data about your website. In fact, it is no longer an option, but essential if you want to stay neck on neck with your competition.

Don’t forget to optimize the rest of your website content for users on search engines to find you easily. SEO pros at Freelancer can help you with your back-end SEO and search engine marketing (SEM) needs.

Meanwhile, the code for adding meta is simple:

<meta name=”description” content=”Used auto parts for sale”>

<meta name=”keywords” content=”fuel filters, brake discs, belts” />

4. Hide Field

Reddit warriors have pointed out this example of "programming horror" in which a field for internal use is visible for the public to see.

This form is an example of amateurish programming, and you don't want such an oversight on your website. HTML gives you the option to hide fields. The visitor can't type anything into a hidden field, and when the visitor submits the form, the form carries the hidden field.

Here's how it works:

<html>

<head>

    <title>My Page</title>

</head>

<body>

    <form name="contact" action="http://www.mydomain.com/myformhandler.cgi" method="POST">

        <div align="center">

            <input type="text" size="25" value="Enter your name here!">

            <input type="hidden" name="Language" value="English">

            <br><br>

        </div>

    </form>

</body>

</html>

From the code above, the resulting output will be a hidden field that visitors will not be able to see. The hidden field here will tell the form handler the users preferred English.

5. Add a horizontal line

A horizontal line to break up long sections of your website will make the page easier on the eye. To add the line, use the <hr/> tag, as in:

<h1>HTML</h1>

<p>HTML is a language for describing web pages.....</p>

<hr>

<h1>CSS</h1>

<p>CSS defines how to display HTML elements.....</p>

6. Input suggestions

You can make it easier for visitors to find what they're looking for by bringing up a list of suggestions when they're typing input values. Use the following code:

Type your favourite text editor:

<input type="text" list="text_editors">
<datalist id="text_editors">
    <option value="Atom"></option>
    <option value="Notepad ++"></option>
    <option value="Sublime Text"></option>
    <option value="Wordpad"></option>
</datalist>
<p><em>For example;
   </em> Sublime Text</p>

7. Highlight text

The <span> tag will let you add highlights to text on both Firefox and IE. You can choose the color of the highlight, of course. The code is simple:

<span style=“ background-color: #FFFF00”>Your text here.</span>

8. Add background image to text

You can add a background image instead of a highlight to your text if the font is large enough. We recommend not using this tip for fonts smaller than 20 pts, or there won't be much of a difference between the image and a background color. The code is:

<SPAN STYLE=”background-image: url(//www.myimage.png ); font-size: 20pt”>NoBoringHighlight…</SPAN>

9. Add fine print

Add legal rights, citations, restrictions, terms and other fine print at the bottom of your document with the <small> tag.

<h1>Black Friday Sale!!! Upto 70% off on all products under <i>Toys &amp; Recreation</i><sup>*</sup></h1>

<p><small>* Terms and Conditions apply</small></p>

10. Color Picker

With HTML5, there are some really interactive customizations that visitors to your website will like. The color picker will need a little JavaScript coding and CSS to let you choose what color you want from a palette rather than having to enter an abstract color code. This feature will be particularly user-friendly for those new to coding or without a lot of coding knowledge.

The code can be something like this:

<!--HTML--> Choose a color to color the below text <input id="color_picker" type="color" onchange="showHex();"> <span id="color_hex_value"></span> <h1>COLOR ME !</h1> <!--CSS--> body {
    font-family: "bookman old style";
}
<!--JS--> function showHex() {
    var hex document.querySelector("#color_hex_value"), h1 document.querySelector("h1");
    h1.style.color document.querySelector("#color_picker").value;
}

11. Add voice recognition

In HTML5 and later, you can add speech recognition to a text input, and it's as simple as:

<input type="text" x-webkit-speech />

12. Insert math equations

Inserting math equations (using the MathML language) is super simple in HTML5 and later. Put all your equations between the tags <math> and </math>.

This code will insert a fraction 'a/b' to your page:

<math>

<mfrac>

<mi>a</mi>

<mi>b</mi>

</mfrac>

</math>

There are as many as 142 HTML elements that the W3C has standardized for your use. HTML5 has given us exciting features to make our websites as user-friendly and media-rich as possible, with support for video formats and canvas, among other things.

What do you think about the HTML features on this list? Have you used any of them before? Are there any cool features you think should be on our list? Let us know in the comments below.

How to Add a “Back To Top” Button to Any Blog (Website, WordPress)

2018-07-10T06:53:00.002-07:00

Having a lot of content means a lot of scrolling. It helps to make things a little easier for your readers if you include an easy way to jump all the way back to the top of the page. Adding a Back To Top button can easily solve scrolling issues and is really simple to implement! I’ve included a really easy Back To Top button here for you that you can add to any website or blog. All you need to edit are the theme’s CSS file and the main HTML template file.

Add a Back To Top button to your site:

To get started, add this to the CSS section of your site. In Blogger, this would be under Template > Customize > Advanced > CSS. In WordPress this is your theme’s style.css file.

.back-to-top {
    display:none;
    position: fixed;
    bottom: 2em;
    right: 0px;
    text-decoration: none;
    color: #000000;
    background-color: rgba(235, 235, 235, 0.80);
    font-size: 12px;
    padding: 1em;
   
}

.back-to-top:hover {    
    background-color: rgba(135, 135, 135, 0.50);
    text-decoration:none;
    color:#ffffff;
}

Then, make sure your site is loading jQuery. Add this code in the <head> section of your template’s main HTML file:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

If you already have a similar jquery script in there, you don’t need to add this one. One jQuery script is enough! Next, add the following code directly before the </body> code in your template’s main HTML file. In Blogger, go to Template > Edit HTML and search for </body> and add this above it:

<a href="#" class="back-to-top">Back to Top</a>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});

jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

Save your Template and you should see the Back to Top link appear as you scroll down the page.

Coral Draw X7 Free Download

2018-07-10T05:17:00.003-07:00

Coral Draw X7 Full Free Download | Activation Key

How to Install..?

Adobe illustrator CS6 Free Download

2018-07-01T04:09:00.000-07:00

Adobe illustrator CS6 Full Free Download

How To Install.?

Adobe Photoshop CS6 Free Download

2018-07-01T03:39:00.001-07:00

Adobe Photoshop CS6 Full Free Download..

How to install

Free Photoshop Actions Packs For Photographers

2018-06-27T22:10:00.003-07:00

In this round-up we gatherd some pretty awesome Photoshop actions for every day use of photographers. Any photographer that uses Photoshop will understand how time-saving the Photoshop Actions feature can be. Unlike common brushes used for editing, Photoshop Action is more convenient and easier to use.

With a simple click of the ‘Play’ button will allow you to adjust the entire image automatically depending on the specific effect. You can even find the Instagram Photoshop Filters to make your photos look like in the app filters effects. Photoshop actions are useful add-ons for providing additional image effects that in just a few clicks. If you're a Photographer or just fun of editing images, these collection can turn your pictures like a Pro. They're also great for people who just want to add simple effects to pictures but don’t know how to do it themselves.

PHOTOSHOP ACTIONS SUNLIGHT AND SUNDOWN

Download

HDR TOOLS

Download

PHOTOSHOP ACTIONS PACK 7

Download

PS ACTIONS – HDR POST EFFECTS

Download

TOASTED PHOTOSHOP ACTIONS

Download

20 free Photoshop actions

2018-06-27T21:35:00.001-07:00

Adobe's flagship image editing software Photoshop has a powerful programming language built in that allows you to record tasks as an 'action' and replay the steps to complete the task automatically. Not only can you record your own but you can also import actions, opening up a whole range of effects and time-saving options.

Get Adobe Creative Cloud now

Don't waste your time repeating the same steps to achieve a certain effect – use these free Photoshop actions instead.

Photo filters

01. Nightmare

...and they were never seen again

If your photos just aren't sinister enough for your liking, this free action should make things a little more unsettling. It's designed to let you easily give your photos a dark, haunting effect. Perfect for creating the impression that you're permanently about to stumble into mortal danger.

02. Cold Nightmare

Damn it, stand still when I'm trying to skewer you

This amusingly-titled action will transform a photo of a perfectly innocent scenario into a window into a dark world. In this example image, the archer probably shooting at a target takes on the look of someone who is definitely trying to kill a human. It’s amazing what some shadows can do.

03. Summer Haze

Get that summer feeling again

If you'd prefer to cheer up your images, take a sunny shot and make it intensely summery with this great turquoise haze effect. Outdoor portraits taken in natural light are most suitable for this filter.

04. Hazy Afternoon

Hazy Afternoon adds a soft gradient colour layer

Perfect for outdoor pictures, the Hazy Afternoon action certainly lives up to its name by creating a soft gradient colour layer. You can use this free action on black and white or colour images, plus you can easily adjust the gradient until you get the exact look you're after.

05. Sun Kissed

Sun Kissed will brighten and tone even the drabbest landscape

Light up any image with this comprehensive collection of sunlight effects that'll brighten and tone even the drabbest landscape. Simply add a bit of a warm tone, or go the whole hog and throw in a setting sun complete with a lens flare effect; it's all there.

06. HDR Action

Ramp up your HDR contrast with these actions

Remove the lack of contrast that comes with HDR photography with this set of four actions; HDR fix Light, Normal, Heavy, and Clicker.

07. Strong HDR Effect

Get vibrant colour effects with this free HDR filter

Alternatively, try getting vibrant colour effects with this free HDR filter from Shutter Pulse. If it works well for you but you’d like more options, it’s part of a setof 30 HDR actions that you can buy for $13.

08. Blue Evening

Add a mysterious atmosphere to your shots with Blue Evening

Blue Evening is the free component of a paid-for set called Touch of Drama, which gives you various ways to add a mysterious atmosphere to your shots. The strength of the blue cast depends on your starting colours, so click through to see a good selection of examples.

09. Night to Twilight

Turn your nighttime images into twilight photos

This set of 11 actions convert your nighttime images into twilight photos by introducing a colour cast and lightening the sky. The effect is rendered using layers, so you can adjust the degree of twilight by reducing the layer’s opacity, making it nice and flexible.

10. Purple Contrast

A bit of purple can give your photographs a dramatically downbeat look

This free Photoshop action washes out some of the colour from an image and gives it a purpley hue. It's a good way to give your photographs a dramatically downbeat look.

11. Bella

Create a romantic, nostalgic feel with a pink cast

This action adds a beautiful warmth to your photographs, bringing out rich tones in hair and skin, and softening colours with a pink cast that creates a romantic, nostalgic feel.

12. Wedding Enhancers kit

These actions are ideal for fixing wedding photography

Photoshop actions are extremely useful for wedding photographers, dealing with a huge number of shots. Here you get a set of 11 actions that automatically create common portrait effects, especially around the theme of wedding photography. The set includes skin smoothing and soft filter effects as well as black and white conversion.

13. Photoshop Color actions

Here's a handy collection of colour treatments

A nice range of colour treatments including rich, grainy black-and-white, bleach bypass, and some heavy casting effects. Great for experimentation.

14. Cross-processing ATN

This action lets you cross-process without all the mess

Cross-processing is a traditional photographic technique involving deliberate processing of one type of film in a chemical solution intended for another, resulting in oddly skewed colours and increased contrast and saturation. This free Photoshop action gives you a way to recreate the effect digitally, and is available free for personal use.

15. Cross Processed

Add drama and vivid colour effects to your images

This action adds drama and vivid colour effects to your images by deepening shadows and making colours more saturated. It’s especially good for stormy skies, landscapes, buildings and ocean scenes.

16. Color 024

Create rich, sun-bleached photos that still retain a high level of detail

Digital pictures are crisp and precise, but sometimes they can lack that nostalgic glow of a film photograph. By downloading this free action, you can adjust the colour saturation and create rich, sun-bleached photos that still retain a high level of detail.

17. 2-strip Technicolor

This action simulates the 2-strip look without damaging the original image

Recreate the look of 2-strip Technicolor film by downloading this free action. Popular in the 20s and 30s, 2-strip technicolor film exposed black and white film behind a green filter and a red filter. By merging the green and blue channels in different layers, this action simulates the 2-strip look without damaging the original image.

18. Light Leaks

These gradients are ideal for adding non-destructive vintage effects to your images

This handy selection of light leaks has been created using gradients, making it very flexible for adding non-destructive vintage effects to your images. The free version includes five high-quality leaks, all featuring support for 16-bit colour so you can achieve brighter-than-white highlights. And they work with video, too!

19. Hard Lomo

If you like your lomo action hard, look no further

Deviant Art is a great place to find Photoshop actions, as this example from BlackLaceStock demonstrates. Included here is a set of actions that add a classic lomo-look to your images, akin to applying an Instagram effect.

20. Retro Style filters

These 35mm-inspired effects include some lovely gritty options as well as colour treatments

Chris Spooner is well known for his excellent Photoshop tutorials and giveaways, and he doesn’t disappoint with this new selection of 10 free retro-style Photoshop actions. Each of the effects is inspired by 35mm film and processing techniques, and includes some lovely gritty options as well as colour treatments.

20 Free Smoke Brushes for Photoshop

2018-06-25T11:57:00.003-07:00

I am going to start out by featuring a collection of Photoshop brushes. I am focusing on smoke brush sets to help you create a myriad of mysterious effects with shadows and glows to make the illusion of graphic smoke emulation.

So, get ready to light up your vector cigarettes – by playing with some of these smoke brushes and adjustment layers you can come up with truly realistic digital smoke that will enhance and add a whole new effect along with some awesome visual explosion to your design projects, wallpaper backgrounds or photo manipulations as fake smokes. The following volume includes thin smoke brushes as well as thicker varieties. And don’t forget to look for some original smoke images; that might help you in your project as well. Now feel free to download and use your favorite smoke brush sets, out of those mentioned here, as beautiful adding touches to your compositions.

The 15 best free Photoshop brushes

2018-06-25T11:39:00.001-07:00

Photoshop brushes for painting

01. Realistic charcoal Photoshop brush

Designer: WojtekFus
Usage: Free for personal and commercial use

Charcoal's an essential part of any artist's toolkit, but it's undoubtedly the messiest as well. Get those soft charcoal lines – without getting charcoal all over your hands and everything else – with these excellent brushes.

02. Sakimichan – Photoshop Brushes for painting

Designer: Sakimichan
Usage: Free for commercial and personal use

Deviant Art member sakimichan has made 56 of her favourite custom Photoshop brushes available to download for free in this big bundle. She recommends painting at 70-100% opacity with the pressure option on, and says that the brushes are already set up for this. Bear in mind these brushes were created in PS5 and although they work in CS4 and CS3, she isn’t sure about other versions. (Although the comments on the page suggest they work for CS6 and CC too.)

03. Photoshop brushes: paint

Designer: Aaron Griffin
Usage: Free for commercial and personal use

Aaron Griffin is a self-taught illustrator and concept artist known especially for his figure paintings (his work even graced the cover of our sister magazine ImagineFX). He's generously offering up the Photoshop brushes he uses to create his digital paintings free of charge.

04. Photoshop bruses: thick acrylic paint strokes

Designer: Creative Nerds
Usage: Free for commercial and personal use

The second instalment of a popular set of free Photoshop brushes from Creative Nerds, Thick Acrylic Paint Strokes volume 2 lets you quickly add an authentic paint effect to your illustrations. The brushes are free for both personal and commercial work – but you're not permitted to redistribute or modify them for resale.

05. Free Photoshop brushes: paint lines

Designer: env1ro
Usage: Free for personal use; email him about commercial use

These 24 very hi-res brushes will provide a real-media feel to your design work. Some brushes look like paint tin marks, while others are thicker, meaning there's lots of options within the pack.

06. Dry brush strokes for Photoshop

Designer: Chris Spooner
Usage: Free for personal and commercial use

A set of 12 excellent free Photoshop brushes from Chris Spooner. These high-resolution dry brushes are fantastically detailed, bristly and texture-rich. Featuring whispy lines and detailed edges, they're perfect for roughing up your artwork or distressing your edges

07. Free Photoshop brushes: dry brushes

Artist: Kirk Wallace
Usage: Free for personal and commercial use

Artist Kirk Wallace created these Photoshop brushes at home using ink and paper, and offers them to you for free. Perfect for creating rough, harsh textures, they're also dynamic – you can click and drag to span larger areas without getting an ugly repeat effect, or you can paint with them.

08. Dripping paint Photoshop brushes

Artist: LilithDemoness
Usage: Free for personal and commercial use

Add realistic dribbles of paint to your digital designs with these free Photoshop brushes. They're the work of DeviantArt user LilithDemoness and there are 14 in the set to choose from.

09. Free Photoshop brushes: spray paint

Designer: Creative Nerds
Usage: Free for personal and commercial use

Creative Nerds is offering this spray paint effect Photoshop brush set completely free. The pack includes four high-res brushes (2500px each). Use them to add a distressed effect to your paintings.

10. Speedpainting set

Artist: Darek Zabrocki
Usage: Free for personal and commercial use

Concept artist Darek Zabrocki has worked for some of the biggest projects and companies in the fantasy art world, including Assassin's Creed, Magic: The Gathering and Halo Wars 2. He's generously offering the set of Photoshop brushes he uses for his speedpaintings for free download.

Watercolour Photoshop brushes

11. Furry watercolour Photoshop brush

Designer: Heygrey
Usage: Free for personal and commercial use

If you're looking to create a soft, hazy aesthetic in your work, try this free Photoshop brush from Heygrey. It is described as a 'furry watercolour brush', and the creator suggests using it to create hazy backgrounds. We're especially impressed with the realistic watercolour effect that has been achieved here.

12. Watercolour Photoshop brush: spray

Designer: Creative Nerds
Usage: Free for personal and commercial use

This large-scale Photoshop brush is handy for creating a watercolour spray effect in your digital artwork. The creator has achieved an impressively authentic effect, which you can apply to your own artwork with ease.

13. Watercolour shapes and splatters

Designer: Excentric
Usage: Free for personal and commercial use

If you're going for a watercolour feel in your work then these abstract shapes and splatters will help you get the look just right; just don't overdo them. These Photoshop brushes from Excentric are free for personal and commercial use.

14. Watercolour splatter: free Photoshop brushes

Designer: pstutorialsws
Usage: Free for personal and commercial use

These watercolour splatters were created with the help of professional-quality watercolour paint on cold press watercolour paper. There are 32 high-res Photoshop bushes in the pack – they work with Photoshop 7, CS, CS2, CS3, CS4, CS5, CS6 and CC – and you can download the lot for free.

Pen, ink, charcoal and pencil Photoshop brushes

15. Pencil Photoshop brush

Designer: Andantonius
Usage: Free for personal and commercial use

Create the effect of a soft pencil sketch, but without the grubby hands and smudged paper. This pencil-effect Photoshop brush is one of the most realistic we've seen, and you can download it for free on DeviantArt, courtesy of professional digital artist Andantonius, aka Jon Neimeister.

Top 10 Cool Banner Fonts You Can Use Right Now

2018-06-21T00:54:00.002-07:00

Today, you can design a banner in just a few minutes and use one of the thousands of banner fonts available for all design tools, to adjust your message and make it sell your story. There are no limits when it comes to banner design beside your own inspiration and intuition.

How to choose to best fonts for banners, when there are so many options available today? Well, this article will try to help you make a quick and inspired choice by choosing from a list of a top 10 cool banner fonts available now.

1. Volkhov

photo source

Our first font in this list is Volkov, a Serif typeface with a robust design, legible and prominent, suitable for complex texts. You can use it as a title in your banner designs but it will be more suitable as a message bearer font. Unlike other Serif fonts, Volkov looks elegant in a modern design and features a natural flow that makes it readable.

2. Source Serif Pro

photo source

Source Serif Pro is yet another great example of a Serif-based font. It’s thinner than Volkov but similar in style. Also, it makes the perfect choice for a banner that relays a message based on more than a short sentence. It works well, however, with any kind of copy text, regardless of its length. It’s elegant and easily readable.

3. Advent pro

photo source

Advent Pro is our first Sans Serif entry on this list of great looking banner fonts. It’s a modern looking typeface with a thin design that makes it perfect for banners with basic monochromic backgrounds. However, it comes in 7 different modes, thin, extra-light, light, regular, medium, semi-bold and bold. This is why it can be adjusted to suit any banner regardless of its design.

4. Allura

photo source

We like Allura because, although it is a Script-type font, it looks not only stylish but also easy to read and therefore, perfect for a banner design. Allura is designed by Rob Leuschke and comes from a wide family of fonts which includes non-Scripts as well.

5. Open Sans

photo source

If you are looking for a free banner font that will give your banner a clean and readable look at the same time, take a look at Open Sans. The font is optimized for both print and web but it also looks great on mobile. If you are preparing a marketing campaign, the way the banner looks on mobile devices is very important, since a wide range of your audience already has at least a smartphone. Another important fact is that Open Sans contains a complete 897 characters set which makes it available in almost all languages including Greek and Cyrillic.

6. Playfair Display

photo source

Our list of the 20 best fonts for banners continues with yet another typeface we can use as the main choice for our banner titles. Playfair, even though it is not a traditional Display font, it bears this name due to the fact that it was designed especially for large size usage. If you like it, however, you can also use the Regular style for body texts.

7. Rock Salt

photo source

Another great banner font is Rock Salt, a typeface that will give your banners a personal and out of the box look. It was designed with felt-tip markers and it certainly looks like it. It is available in just one style, Regular and only in uppercase. In many ways, it looks very similar to the texts of the comic books.

8. Sacramento

photo source

Sacramento is a free banner font that falls into the Script category. In other words, it mimics the handwriting. It does it quite well, however, being one of the most accurate Script typefaces available today. The fonts are round, stylish looking, easy to read and they are connected, just as they should be in a traditional handwriting style. If you are looking for such a font to complement your title or your text body, Sacramento may be the perfect solution.

9. Ultra

photo source

Ultra is a free banner font that falls into the Display category. It’s a wood type style with bold letters but very easy to read. It’s perfect for a power headline that gives impact to your banner and a strong and dramatic look. If you are looking for a traditional-looking headline, this may be exactly what you needed. Pay attention however, that it may take some space and if you intend to squeeze in a longer message, it may not be suitable.

10. Veteran Typewriter

photo source

Veteran Typewriter is another display font that may be easily confused with a Serif font, due to the fact that it mimics perfectly the typewriter letters. However, although it bears a Serif looking typeface, this font is recommended for titles only and maybe, but only maybe, to calls to action. You can try it right away. It may not convince you at a first look but we assure you it is quite readable and stylish looking when you use it on the right banner.

6 best free fonts for designers

2018-06-21T00:28:00.000-07:00

In this freshly updated free fonts for designers post, we bring you the world's best free fonts. We've filtered out the jewels from the thousands of less perfectly designed free fonts available online, so you can use them in your designs and illustrations.

01. Bitter

This serif font is designed to work well on screens

Free for personal and commercial use
DOWNLOAD HERE

Sans-serif fonts tend to work better for screen use, but this free slab serif typeface has been specially designed to provide a comfortable reading experience on screens. Bitter was designed by Sol Matas, and is available through Argentinian type collaborative Huerta Tipográfica. It combines generous x-heights with minimal variation in stroke weight.

02. Playfair Display

This free font family is an open source project

Free for personal and commercial use
DOWNLOAD HERE

This free serif display font takes inspiration from the late 18th century European Enlightenment and the work of type designer John Baskerville. The high-contract letterforms have delicate hairlines, relating to the rise in popularity of pointed steel pens, which took over from the previous broad nib quills during this period.

20 fonts every graphic designer should own

The typeface design is a project led designed by Dutch designer Claus Eggers Sørensen. It's development is open source, and can be found on GitHub here.

03. Lora

Brushed curves contrast with driving serifs in this free font

Free for personal and commercial use
DOWNLOAD HERE

Lora is a free font that has its roots in calligraphy. It was originally designed for type foundry Cyreal in 2011, with a Cyrillic extension added in 2013, and comes in four styles: regular, bold, italic, and bold italic.

Brushed curves contrast with driving serifs to give this free font a well-balanced, contemporary feel. Although Lora is technically optimised for use on the web, it also works well in print projects.

04. Butler

Image 1 of 2

Free font Butler brings a sense of modernism to the serif

Free for personal and commercial use
DOWNLOAD HERE

Inspired by both Dala Floda and the Bodoni family, Butler is a free font designed by Fabian De Smet. His aim was to bring a bit of modernism to serif fonts by working on the curves of classical serif fonts, and adding an extra stencil family.

The Butler family contains 334 characters, seven regular weights and seven stencil weights, and includes text figures, ligatures and fractions. It also suits many different languages with its added glyphs. De Smet suggests it would work well for “posters, very big titles, books and fancy stuff.”

05. Arvo

A superior geometric slab-serif, Arvo is one of our favourite free fonts

Free for personal and commercial use
DOWNLOAD HERE

Arvo is a geometric slab-serif font family that’s suitable for both screen and print use. Designed for legibility, it was created by Anton Koovit and published in the Google Font directory as a free open font (OFL). Unlike many slab serifs on Google Fonts, Arvo contains normal, italic, bold and bold italic styles.

Best Fonts

2018-06-12T10:50:00.001-07:00

12 Best Fonts for Websites and Blogs for Better Readability.

The choice of fonts for websites and blogs is critical for an engaging online presence and brand building. The visual choice of a reader varies with every person but as a website or blog owner, you need to consider every aspect and web font is one such aspect.

List of 12 Best Fonts for Websites and Blogs

These are some of the top fonts we have seen on various big sites. You can combine them and start using on your blogs.

1) Oswald

One of the first of Google Web Fonts, Oswald has better kerning and extended character sets. Vernon Adams is the font creator and the font is a reworking of classic Alternate Gothic sans-serif. The font is excellent for captions and headlines.

Check Google font here.

2) Stalemate

Jim Lynes is the creator. The Stalemate font offers an accented display and is good for displaying personal messages or announcements.

Check Google font here.

3) Gravitas One

The font is modeled on ‘UK fat face’, which was a term used during England’s industrial revolution to identify heavy advertising text. Riccardo De Franceschi is the creator. The font is recommended for titles, headers and tabs.

Check Google font here.

4) Jura

Based on the Roman Kayah Li glyphs, Jura is an alternate version created by Daniel Johnson. Later, the font included graphs from Greek and Cyrillic alphabets. The font is light and good for wide layout pages.

Check Google font here.

5) Fjord

Originally used in book printing to display large content in small sizes, the Fjord is a serif-typeface and recommended for blogs and websites because we create longer content for the web. The Fjord font will offer long elegant ascenders and better modulation.

Check Google font here.

6) Amaranth

Amaranth comes with 3 styles. It has an italic upright design, with distinctive curves and contrast which is better suited for creative blogs and websites. The letters are well spaced out and makes for distinctive reading.

Check Google font here.

7) Gentium Basic

The Gentium Basic by Victor Gaultney is a combination of Greek, Latin and Cyrillic scripts. It is released under SIL Open Font License. They are free fonts but restricted with Latin character sets. The free font is good for blog content as the spacing of letters will make for interesting and engaged reading.

Check Google font here.

8) Arvo

Arvo is suitable for both web and print publication. It is developed by Anton Koovit. The font has uniform strokes and enhances the onscreen readability of texts. It is available in bold italic, roman bold, italic and roman slab serif.

Check Google font here.

9) Droid Sans

Droid Sans is a typical font focusing on digital readability. Developed by Steve Mattson, the Droid Sans is good for mobile screens. Since web readership is moving towards smartphones, the Droid Sans will be a recommend font for websites and blogs. The font looks cool and readable even in small size.

Check Google font here.

10) Vollkorn

Created by Friedrich Althausen in first attempt, the Vollkorn font is a multi-purpose serif suitable for large texts, headlines and titles.

Check Google font here.

11) EB Garamond

This serif font has its roots in the 16th century and is an often used font. The EB version is part of the open source project by Georg Duffner. The font gives web content a smooth layout and readers doesn’t need to have squinty eyes to read better.

Check Google font here.

12) Ubuntu

The Ubuntu is a distinctive sans-serif web font created by Dalton Maag, a London-based foundry from funding with Canonical Ltd. The web font displays beautifully on desktop and smartphone screens.

Check Google font here.

Valentine’s Day Fonts

2018-06-11T11:58:00.004-07:00

The love month is officially on and for sure as graphic designers, most of you are busy working on your Valentine’s Day-related designs such as postcards, greeting cards, posters, flyers, etc. So today in You The Designer, we give you another amazing collection of freebies showcasing some of the most beautiful and playful fonts just perfect for the Valentine-themed projects you might be working on!

We collected 20 adorable free fonts accompanied by some interesting quotes to celebrate the season of love. Check them out below or bookmark this page for your future reference. Share the love and enjoy!

lovingyou | Download Source

Cupid de Locke | Download Source

Tangerine | Download Source

Calligraffiti | Download Source

LoveNess | Download Source

Precious | Download Source

Allura | Download Source

Arizonia | Download Source

LT Chickenhawk | Download Source

ALex Brush | Download Source

CAC Champagne | Download Source

Great Vibes | Download Source

heartfont | Download Source

Lovers Quarrel | Download Source

Mutlu | Download Source

Black Rose | Download Source

I Love What You Do!! | Download Source

Aquiline | Download Source

SC Manipulative Lovers | Download Source

Qwigley | Download Source

NOTE: Please take time to read the terms and usage of each featured font in their respective download pages. Some of them are free to use both for personal and commercial while some are for personal use only.

Which of the fonts is your most favorite? Tell us your thoughts as well as your suggestions by commenting below. Stay in love and awesome everyone!

Brush Fonts

2018-06-11T06:41:00.000-07:00

Nothing can surpass the artistic quality of hand made works. Every stroke made by one’s hand using instruments such as a brush creates a different artistic style with natural look and feel.

Oftentimes seen on movie titles, postcard designs and posters, this kind of natural element is achieved when a hand drawn type is used on a particular design.

Fortunately, many creative folks out there have transformed the magical brush strokes we often see on paper into awesome font styles anyone can enjoy. We have compiled some of them to help you out in your next creative project. Check them out below or bookmark this page for your future reference. Enjoy

Sticky Things | Download Source

The Best Night | Download Source

Levi Brush | Download Source

Aquiline Two| Download Source

Lasting Love | Download Source

Face Your Fears | Download Source

Texas | Download Source

EDO | Download Source

Rain Forest | Download Source

Imagination Station | Download Source

Stencil Brush | Download Source

Abandoned Treasure | Download Source

WC Mano Negra | Download Source

Silkroad | Download Source

Brushtip Texe | Download Source

Olivia Brush | Download Source

Brush Strokes | Download Source

Brushtip Travis | Download Source

Dead Island | Download Source

Wolf’s Rain | Download Source

Chalk Board Fonts

2018-06-10T12:59:00.002-07:00

Experimenting and exploring new typefaces provides you a lot of design possibilities that can improve your design in terms of aesthetics. That is why having a great collection of fonts is a necessity for us designers.

Chalkboard fonts are a classic font type that evokes ideas of school days long gone and quaint cafe menu boards. But not all chalkboard fonts are alike. The different fonts below each communicate something different and some may pair better with other fonts in your design.

This particular collection features 20 amazing chalkboard fonts you can download for free. Check them out below or bookmark this page for future reference. Load up your font collection and enjoy!