How to protect your images online

Every image that photographers or graphic designers create matters a lot for them. These photos are their piece and in every piece, it represents their selves. Hence, if someone stole their piece, then they have stolen the identity and personality of the artist as well. That might be the reason why photographers and graphic designers especially the professionals tend to be worried about their piece uploaded on-line to be stolen by someone else and use it for something without having any compensation at the artist’s end. Here are some tips on how to protect your images on the Internet from potential thieves.

Use visible Watermark

A watermark is actually an image, text or pattern that is overlayed in an image. The overlayed image is at low opacity for it to appear transparent but still visible and recognizable. You can add watermark at your image using photo editing software like Adobe Photoshop or Picasa. This might deteriorate the quality of the image but this will make the potential thieves think twice to copy your image for they will edit the picture first and take a lot of time editing before they use it somewhere else.

Disable right click menu

Basically, we just download images from the internet by doing “right mouse click” then “save image as” depending on the browser that you are using, this has been made possible because the developer have activated or enabled the “Context Menu” or the “right mouse click feature” of the page. For your image not to be copied that way, you must disable the “right mouse click” feature. Developers use script (usually Java) to block right clicks. This trick might not work to the experts for they know the weakness of the script but this will stop the novice users to copy the images directly that you have posted using “right click”.

Use Flash

Aside from Flash’s interactivity to audience and amazing animation features, utilizing flash for web would also be a great help in protecting your images. Flash disallows the audience to copy and paste any content from the page. Some developers do allow it, but only few. This trick is quite effective to those who are novice. Although the users can make use of the print screen feature of the computer, then crop it, but this takes time and may decrease the quality of the image thus making the potential thieves think twice to use the obtained image.

Shrink wrapping

Shrink wrapping is just like putting a film covering to something. For online images, you are actually placing a transparent .gif file like a film to the image that you are protecting and as a result, when the potential thieves copy the picture using “right mouse click” they will not notice that the object that they have downloaded is a blank image. Although the users can use print screen and have a screen shoot of your picture then crop but this will deteriorate the quality of the image and takes time to edit.

Image Slicing

Literally, this technique actually implies to slice the picture. You will post your sliced photo using a table with 0 cell padding and 0 cell spacing. The number of cell must also equate to the number of slices of your photo. Using this technique, the photo that you have posted will appear as a complete and unsliced image, but if the audience will try to download the image using context menu or the “right mouse click”, they would only get a part of that photo. A sliced image posted in a site will look perfectly complete.

Upload low resolution images

Higher resolution images encourage users to steal your images. When you post images online it would be better for you to upload them at low resolution. Resizing image can be done using a photo editing software like Adobe Photoshop, Picasa, and Corel. The audience will not be tempted to download you images because this will just ruin their project and will not be able to use it for high quality projects. I found this effective for both novices and experts.

Conclusion

Don’t upload your images online if you want to be 100 per cent sure. No matter how you protect your images online, the risk for theft is still enormous. Your images are viewed worldwide and you can’t image how many people around the globe want to have your hard worked images without providing any compensation or even credits.

Continue Reading →

20 Reasons Why Your Website Design Sucks Part 1

We all have or have heard about those clients from hell, those that really love pink pages with red text. Even worse, what about those people who call themselves “web designers” with expensive prices and services listed on their really messy, horrible and amateur portfolios, just because they made their uncle’s business page and they liked it.

Unfortunately, many people believe that web design is all about personal style and smart IDE’s with pre-built buttons. Let me tell you something – they are wrong. I love to play football, but that doesn’t make me a professional player, and Dreamweaver does not make you a professional web developer. Web Design and development demands knowledge, practice, daily effort to learn and study, and passion, like professional football players.

(Design conventions: Necessary guidelines in order to improve a specific design.)

No matter how good or bad personal style is, the truth is that everyone has one. However, when design conventions are left out of a project, the result will be a bad or uninteresting design. That is exactly what happens with those terrible clients, when they try to implement their personal style without knowing anything about design conventions.

1) Balance

Balance is a basic principle in design. It is directly connected to every element, and helps you control the design flow of your page. There are two important concepts in balance – symmetrical and asymmetrical balance. With Symmetrical Balance, elements have equal weight on both sides, leading to a formal and traditional web site, however, with asymmetrical balance, elements have a different weight which leads to a different and unique layout.

I decided to include this topic because its importance is major in layout design. If incorrectly used, it can lead to the total ruin of your layout.

Above is a good example of asymmetrical balance. Did you notice the “DECO Windshield Repair” text on the right, and the background map image on the left? Although those elements do not have the same weight, it feels perfectly balanced. However, if you hide the text on the right, the page will lose its balance very quickly. Now take a look at the white bottom section, those three columns don’t have the same weight, but it’s perfectly balanced because the left text (“You can’t be everywhere…”) has equal weight as the top right text on the red background.

The result is a “cross balance”, meaning that the weaker and strong elements create a balance between them. I consider this to be of huge importance in asymmetric balance.

The website above fails in so many ways that I could use it as example in the remaining nine topics below, but let’s stay focused on this one. Do you feel the balance? Yes, you are correct, there is no balance. The left side has plenty of images plus a video of the person standing, which results in the left side having more weight than the image on the right.

2) Bevel and Emboss

I had to include this one. It’s really annoying to see the misuse of this layer style. For those who are starting, I understand that you think bevel and emboss is a nice effect and it should be everywhere on your page, but it’s not. Bevel effects should be used sparingly. There are plenty of tutorials on how to transform bevel and emboss into a powerful technique, but if you don’t know how to use it, don’t use it at all.

3) Distracting Backgrounds

Implementing a busy background distracts the user’s attention, hides important information, and disrespects visual hierarchy. If your background image has a higher visual impact than everything else, users won’t catch the message of your website and will leave quickly.

John Kavanagh’s website makes good use of background images, respecting visual hierarchy and also content information. Reading is left to right, and in this case, the user’s attention follows the buildings on the left towards the Eiffel Tower and London Bridge on the right, consequently leading to navigation (which is not visible in the image). This is a perfect example of how background can be used as a “tool” for design flow.

Above is a perfect example of what not to do with your background.

4) Lack of Detail

If your website sucks, it’s probably because you didn’t care about the minor things. When you think your design is complete, you need to start from the beginning and try to apply detail on every single element. As soon as you finish with detail, you need to start again and consider where it can be improved. A single stroke, light effect, or shadow makes the difference between a good and a great design.

Blackberry’s website is a good example of what you can achieve by spending time with details.

Detail, detail, detail.

For a company with the size and impact of Microsoft, their website is far from great. It’s definitely a good example of lack of attention and detail.

5) White Space

White space refers to the space between elements, and it does have nothing to do with the color. If you don’t know what I am talking about, stop your design projects and read about this subject – How to Actually Use Negative Space As Design Element. White space defines the space/distance between your site elements, providing good readability, focus, and design flow. It also gives your website a clean and professional look. Clean layout is not the same as minimalist, think about clean as the opposite of cluttered where content is all over the place.

One other thing you should consider is to use the same height between elements, so if you have three divs vertically aligned, and the middle div is 50px from the top div, it should also be 50px from the bottom div. This is not mandatory, but helps you achieve a good balance between elements.

Uberspace’s website makes good use of white-space.

Just looking at the image above, gives me a headache. The quantity of information is overwhelming, but the way it is displayed is even worse. Cluttered information makes the user feel lost and unhappy. Avoid it!

6) Flash Intros

Once upon a time, having a flash intro in your website would make you a web design ninja. There are plenty of great intros out there, and plenty more of really bad attempts. Nowadays, most visitors want quick access to information and when you demand them to wait, they leave. If you want an intro in your website, make sure it has a point, it adds value and that it is well made.

7) Music

So I have my headphones on, I open several tabs, and suddenly I jump from the chair because irritating music starts playing. I then search for the correct tab and when I find it, I search for the mute button and guess what, there isn’t one. I don’t want to mute my speakers so I close the page and I won’t return to that loud place. Loud and boring music coming from your website is really annoying, but not having a way to shut it down, is an exit ticket from your website.

8) Tables

This is a controversial topic, some people defend the use of tables and others not so much. This topic is not meant to convince you not to use tables, but to use tables when and where you should. Personally, I do not remember the last time I’ve used tables, I simply don’t like it. However, for tabular data, tables are the best choice, since it increases readability and organization.

Shopify’s pricing page is a good example of how great the use of tables can be for tabular data.

Never use tables to style your layout!

9) Colors

The wrong choice of colors can ruin an entire website. Contrast, saturation, types of colors, target audience, style, etc. There are many factors you need to consider when choosing the right colors for your website. If you don’t know where to start, Tina wrote a great article about this subject – Colors in Web Design: Choosing a right combination for your Website. Using too many bright colors, or a similar contrast for your background and foreground elements, or even warm colors along with cool colors, you are basically forcing your visitors to leave.

Color needs to fit perfectly, according to your target audience, style and personality.

If you enter the website above, please be sure to use sunglasses.

10) Overflow

Unless you’re building a website with horizontal layout, showing a horizontal scroll bar is a mistake and looks bad. Make sure your layout is optimized for a resolution of 1024 x 768 pixels, this way 98% of your visitors will be able to visit your website without problems. If you really want to use a bigger background image, be sure you hide the horizontal scroll bar, using the CSS property overflow-x: hidden.

Continue Reading →

Create An Elegant Vehicles Web Layout With Light Effects

In this tutorial I will teach you how to create an elegant vehicles web layout with a light effect using Photoshop. You will learn how to use different settings to fill out your canvas with nice lightning and blending modes using different stock images to create good light effects. Following the steps of this tutorial you will easily learn how to use different tools and tips to create good web template. I hope you will enjoy and learn something from it!

Final Image Preview

Stocks Used:

• C4D2 Stock
• Nebula Stock
• Second Nebula Stock
• Second C4D2 Stock
• Background Stock

Step 1 – Creating a new file

Open a new document on Photoshop – 1200 pixels width, 1500 pixels height and 300dpi with white background color.

Step 2 – Create Background

Open the Background Stock, then drag it into the middle of the canvas after placing it into the canvas we are going to Desaturate the Background Stock by pressing CTRL+SHIFT+U.

Open the C4D Stock and drag it to the middle of the Nebula Stock then change the Blend Mode into Overlay.

Duplicate and Resize the C4D Stock to add more elements to our web template background.

Add a Gradient Fill to add more depth using these settings. I have used black and transparent color only.

Add more Gradient Fill.

We should have something like this:

Step 3 – Navigation Bar

In this step we are going to create the Navigation Buttons. First we have to create a Round Rectangle Shape using 10px as its radius. Then add a effect Gradient Overlay using these settings.

Duplicate the Round Rectangular Shape by Pressing CTRL+J then remove the effect of the layer and resize it. Make the duplicated and resized layer above the Original Layer.

Make the Foreground Color White, then Create a New Layer and select the Marquee Tool.

After making a Marquee, right click then fill it with Foreground Color.

CTRL+CLICK the Layer of the Round Rectangular Shape and it will create a selection. Do not select the Round Rectangular shape we are still in the Layer which we filled with color White.

After we load the selection we have to select invers to delete the outer part of the Round Rectangular shape by Pressing CTRL+SHIFT+I, then hit Delete.

Step 4 – Create Menu Divider

In this step we are going to create a Menu Divider, I have made this in new Document to make it easier for you to notice the Color I have used and easier to understand.

First, Create a New Layer and Select the Marquee Tool. Make the Foreground Color #282828. Right Click and Fill with Foreground Color.

Create again a New Layer do the same process but now fill it with #181818.

Put the shapes together then Merge the Layers.

After Merging the Layers we have to resize it.

Resize the divider until it fits the Menu Navigation Bar. We can add now the Text of its buttons.

Result:

Step 5 – Main Content Box

In this step we are going to create a box in which the details of the website will be inserted. First we have to Select the Round Rectangle Tool and set the radius into 10px, then make a Round Rectangular shape into our canvas and make the color black.

After creating the Round Rectangle Shape we are going to make a stroke using these settings:

Create again a Round Rectangle Shape using the same process.

We will add again a Round Rectangular Shape for the pages button just below the Round Rectangle that we just made.

Make a Round Rectangular Shape with a radius of 5px and using Black as its color.

After Creating a round rectungular shape will add Stroke Effect using these settings.

After doing this we will make a New Layer above this and Merge it to make the Shape Layer as a Normal Layer. We can do this by clicking with the mouse while holding the CTRL buttong in our keyboard the New Layer and the Shape Layer then Press CTRL+E.

Now we will make the upper part faded of the Round Rectangle Shape that will be used for the pages.

Still selecting the Layer we are working with, we will Add Mask, after adding a mask select the Gradient tool (G) and make the Foreground Color Black, drag the Gradient Tool starting from the Top untill the middle of the Round Rectangle Shape.

We will add more gradient effect. Make a New Layer then CTRL+CLICK the Layer of the Round Rectangle Shape and make the Foreground Color #636262. Select the Gradient Tool (G) then drag it starting from the bottom until the middle of the Round Rectangle Shape.

We should have something like this:

Step 7 – Create Sidebar

In this Step we will be creating Box and Buttons for the List of Vehicles and Parts.

First we will create again a Round Rectangle using Round Rectangular Tool and the radius is 5px. After Create the Shape we will add Stroke effect with the Size of 1 and the color is #636262.

Create a New Layer (CTRL+SHIFT+N) then select the Marquee Tool (M) and change the Foreground Color to #0F0F0F.

Again Create A New Layer then CTRL+CLICK the Layer the We made to load the selection. Select the Gradient Tool (G) and then Foreground Color into #636262 then drag the Gradient Tool starting for the top up to the upper part of the Selection.

Here is the preview of the changes that we made:

Create again a Round Rectangle below what we have made for the vehicle parts. Just follow reapet again the step.

Step 8 – Create Thumbnails Divider

In this step we will create a divider for the vehicle thumbnails. First, select the rectangle tool and make a rectangle shape above the round rectangle shape in which where thumbnails will be placed.

We will add Stroke effect into the Rectangle Shape that we made using these settings.

Then make the of the Layer 0%

Repeat the step to add more Dividers.

Step 9 – Sidebar Buttons

This step we will be creating a button for the vehicle list Again we will select the Rectangle Shape Tool and add Stroke effect using these settings:

We should have something like this:

Duplicate the Layers to add more buttons.

Step 10 – Page Naviagtion Buttons

In this step we will be creating page naviagtion button. First, create a New Layer then change the Foreground Color into #252525. Select the Marquee Too (M) then make a marquee then fill it with Foreground Color.

After creating the Page Buttons, we should have something like this:

And then we could add the text for its buttons, here are the sample buttong text that I have made.

Step 11 – Create Search Textbox

In this step we will create the search textbox and search icon. We will create a rectangle shape for the text box.

And for the search Icon we will be using the Custom Shape Tool

Here the is the outcome of the Search:

Step 12 – Navigation Icons

We will be creating the small triangle button in the Home button in the Menu Bar Navigation. First Create a small triangle using the custom shape tool. After creating the triangle Shape, we will add Drop Shadow and Color Overlay Layer Effects using these settings:

Step 13 – Adding Light Effects

In this step we will add more Light Effects in our canvas to add more attraction to the visitors of the website.

Open the Nebula Stock drag it into the canvas, Resize the Nebula Stock the erase the sides of the Nebula. Desaturate the Nebula by pressing CTRL+SHIFT+U then change the Blend Mode into Linear Dodge and bring it below the layer of the shapes.

Result:

Next, we are just going to repeat the step 18 but we are using Nebula Stock2.

Next we will add a Second C4D Stock. Open the C4D Stock, drag it into our canvas, then resize it.

Bring the C4D2 stock below the shapes.

We will add line strokes into our shapes to add more light effects First Create A New Layer, select the Pen Tool (P) make a stroke; Set the brush settings into 3px size and Hardness 100% then make the foreground color White.

You should have something like this:

Step 17 – Add Light Effects to Navigation Bar

We will add a light effect into the Menu Bar Navigation. Open the Second Nebula Stock, Drag it into the Canvas, Resize and erase the unwanted parts. After getting the desired outcome change the Blend Mode into Linear Dodge.

If you like more light effect, just duplicate the Layer.

Final Result: An Elegant Vehicles Web Template

Download Psd file

Download Psd file

Continue Reading →