Posted by: Peter Andrease

Posted on: July 31, 2012 3:25 pm

-

Photoshop is a program that can take a lifetime to learn. You’ll be doing one way for years and then may discover there’s actually a quicker way or more cleaner way do it. I’m going to go through a few keyboard shortcuts and some ways I like to work in such a great program.

The color range tool

So we all know the different types of selection tools:

  • Marquee
  • Lasso
  • Polygonal Lasso
  • Magnetic Lasso
  • Quick Selection and magic wand
  • Pen tool

You might not have heard of the Color range tool but it’s a good one to know in the right situation. Find it on the menu ‘Select’. Block colours that are scattered around an image can be quickly selected with the click of the button – rather than having to go around the image and click on each instance of the colour.

 

Some useful Photoshop Windows Keyboard Shortcuts

 

  • Transform: Ctrl + T
  • Hue/Saturation: Ctrl + U
  • New layer: Ctrl + Shift + N
  • Duplicate Layer: Ctrl  + J
  • Save: Ctrl + S
  • Copy all layers in a selection: Ctrl + Shift + A
  • Preferences: Ctrl + K
  • Change Document: Ctrl + Tab
  • Fill layer with background colour: Alt + Del

Posted by: Peter Andrease

Posted on: June 26, 2012 10:42 am

-

Vintage effects on photos can give a photo a total different look and bring out something else. Try completing these steps and then maybe adding it as an action in your photoshop. Then you can try it on multiple photos to see what it comes out like.

  • Create a duplicate of the image, this is so you can refer back to it at any time if you need to.
  • Create a new layer and add a gradient fill to it. Choose black to white with blend mode “Soft Light.” Make the style Radial and the angle 120 degrees. Make sure the scale is 125%.
  • Next create a new layer and add a gradient map, this is done using the adjustments panel. Choose black to white.
  • Finally add a curves adjustment like the one below, you should be left with the right result. You can always change the curves slightly to change the desired effect.

Adjustment curves

Posted by: Peter Andrease

Posted on: June 19, 2012 11:07 am

-

before and after lomo effect

Open up the image that you want to create the effect with – I’ve used a portrait in this case.

Duplicate the layer so you’ve got the original, you can always look at how it first looked that way.

I wanted to blur everything around the face so I roughly used the ellipsis tool to outline her head. I inverted the selection and then added a 5px Gaussian blur.

Now to add a curves adjustment layer, use all red, green and blue channels like the image below.

adjustments

Finally I added a diagonal gradient from black to white from the left top corner to the bottom right, I changed the blending mode to Soft Light and the scale to 125%.

Posted by: Peter Andrease

Posted on: June 13, 2012 8:14 am

-
  1. Open up photoshop. The latest edition is CS6 but most of the points in this tutorial will work back to CS4. When picking your document size I usually design in 960px width, so I’ll usually create it at 960 setup guides for the edges of the page and then add extra padding to either side, maybe an extra 100px each side.
  2. Set up your guides if you haven’t already. There’s an action I like that creates a 960 grid in multiples of 12, 16 and 24. You can find it here. It does help speed up the whole process.
  3. Now you’ve got your canvas, you’re ready to start designing. Hopefully you’ve got some idea of what you or the client wants. It’s a good to have content, branding, images and a spec before you start. I usually sketch out a wireframe of the site I’m going to design first and refer back to it while I’m working in photoshop. Pencil and paper is much faster for jotting down new ideas and designs so it’s good to have one to hand.
  4. I’ve got into the habit of picking my fonts first and I think it’s good to be in that habit. As you’re designing for the web you need to make sure you’re using web safe fonts, check my article here. There’s some great alternatives to Arial and Georgia so don’t feel like you’re stuck with these.
  5. Next I’ll probably pick my colour pallete. My favourite place for this is kuler. Its simply brilliant for colour matching. If you’ve got a colour already then kuler will match it or if you’re looking for a new colour pallete then there’s literally thousands to choose from.

Posted by: Peter Andrease

Posted on: May 18, 2012 9:23 am

-

This tutorial will show you the best way to add a simple gradient backgound to your website using photoshop and css.

Open a blank document in photoshop at the height you want the gradient to be and add a new layer, then fill with any colour using the ‘Paint Bucket Tool’. Now double click the layer to bring up the Layer Style options and select Gradient Overlay, create the gradient you wish, for example:

-

This gradient uses the colours #075068 at the bottom to #0f7da1 at the top. Make sure to keep a note of the bottom colour (i.e. #075068) as this will be used in the css to blend into the rest of the background.

Now go to Layer > Flatten Image, then go to Image > Canvas Size and make the width 1px, hit Ok and then hit Proceed. Now save this image for web, a .png file is probably the ideal file format for quality and file size.

With your image created all you need to do now is simply add the following script to your css:

.background {
background: #075068 url(images/background-image.png) repeat-x;
}

Then simply change the colour hex code to your code and rename the image name/location to yours, you can now add that class to any html element to have your repeated gradient, like that shown below:

Posted by: Peter Andrease

Posted on: May 15, 2012 4:22 pm

-

Media queries have appeared in web development quite recently and are a brilliant way of making a site looks good across all devices. Whether the site is being viewed on a television, desktop, computer, tablet or telephone it will dynamically change to be best suited to the screen size.

The difference between a phone which can be only 320px wide and a large monitor which could be 2000 pixels wide is huge and paying attention to this will enhance the user experience.

Most of the big sites use responsive web design and media queries to specify the width across the different devices. Websites like Amazon are accessed on phones and tablets daily and thus it is essential for them to be able to provide a mobile friendly version.

Media queries will add development to your scope but for a little extra time, it can make a lot of difference.

So to add media queries to a site you’ll need to add them at the end of the stylesheet so it overrides all the other styles specifically for each device.

So what would you use it for?

  • Change a 3 column site into 1 column for a mobile screen.
  • Loading higher resolution images for bigger screens
  • Line-height and font sizes.

So if you’re ready to add it put this html in the head section of the site.

This will make the site be zoomed into 100% rather than it fitting the whole page to the screen.

The next code snippet is a good grounding to get started your different screen resolutions. Add it to the end of your css sheet and start coding!

@media screen and (min-width: 1200px) {}
@media screen and (max-width: 760px) {}
@media screen and (max-width: 550px) {}
@media screen and (max-width: 400px) {}

768px x 1024px is the resolution of an ipad
320px x 480px is the usual resolution of android and iphones (portrait and landscape)

A great place to check to see how the site looks is here.

Some examples I like, make sure you resize the window to see the media queries take effect:

Posted by: SEO Positive

Posted on: January 11, 2012 4:24 pm

-

For the first 200,000 UK Facebook users – 5 simple steps

Hi and welcome to my Blog at SEO Positive, each week I will be providing you with my digital marketing Top Tips on how your online business can stay ahead of your competitors! We manage online marketing campaigns (SEO, PPC, Social Media and Website Design) for some of the biggest clients on the internet providing them with a healthy ROI (Return on Investment) here’s a few of them: promocodes.co.uk, luggagesuperstore.co.uk, voijeans.co.uk, partybritain.co.uk and spabreak.co.uk for more examples please see our case studies.

So you’re a Facebook user and would like to know how to get 50 FREE Business cards that costs you absolutely nothing that’s right not a penny just 5 minutes of your time!

Follow these 5 simple steps and receive 50 FREE Facebook Business Cards:

facebook

1. Log into your account.

2. You will need to be using the new Timeline profile for this to work, if not you will have to convert it.

3. Go onto your contact info in the about section in your Timeline profile.

4. Click on the Business Card logo.

    5. Allow MOO Business Cards access to your information and then follow the simple steps.

    Facebook has launched this to coincide with the new Timeline profile, allowing everyone to integrate more with each other’s details. So if you are considering starting up a business or already have a business and would like to take advantage of 50 Free Business Cards then why not it’s FREE!

    And yes I can confirm it’s 100% free as I received mine today!

    Written By

    + Dave Damhar

    Posted by: SEO Positive

    Posted on: December 23, 2011 10:51 am

    -

    Many users may have realised YouTube’s new layout that is a little odd when compared to the previous. There were no problems with YouTube previous to the update. However YouTube now looks to put a huge focus on channels and also the social media side of videos.

    One of the first things you may notice on YouTube’s new web design is the dark bar on the left hand side. Upon looking at this section, you can see that Google Plus and Facebook are pushed upon the user, but there is also the option to add other accounts such as Twitter and MySpace. When social media accounts are added, you can click on the social media icon and you will then be shown all videos on YouTube which have been shared by your peers and so on.

    Secondly, there are categories in the bar such as: popular, trending and music. No doubt that YouTube takes location into consideration; however this is quite a good feature as YouTubers can find videos that are growing in popularity with ease.

    Finally, there is a suggestions box, potentially stolen from Twitter? Although it is a good feature that is emphasised in the new design. I believe there was a suggestions section in the previous layout but in comparison this is now stressed to the user quite heavily.

    From what I can gather, the new layout is a way for YouTube to push channels and for those on YouTube to actually subscribe to people instead of checking back every now and then. On top of that, I think this is also a way to push Google Plus. YouTube is owned by Google and there is no question that it is being used to help get some publicity for Google +. It has taken Google a while to advertise their social network on this scale because their biggest effort in the past was to add a huge arrow pointing from their home page to the link that sends a user to Google Plus.

    There are now also promoted videos, this is nothing new, but what is new is that promoted videos are moving to Google Adwords, this may bring a new market into the industry of SEO and PPC because they would be managed very similarly to a text ad for Google.

    Conclusion

    Google have used YouTube well to promote their network subtly, however overall it does look more complicated than the previous version but YouTubers will just have to get used to it  as there are no other services which are quite as good.

    Posted by: Shofiur Rahman

    Posted on: November 29, 2011 11:04 am

    -

    flash player We all know how amazing flash is, it is possibly the nicest looking type of website out there. However there are a few problems with having flash on your site. The first is that it is invisible to Google, the second is that they can take a long time to load and finally they cannot be used on mobiles.

    Google has released a tool called Swiffy, which may be because it requires a SWF file to convert. Swiffy takes the SWF file you have uploaded and then the tool converts the file. It shows you the coding and the flash file next to each other so you can compare the two.

    At the bottom of the page there is a link which sends you to your uploaded flash file in HTML, all you then have to do is view the source code and copy the script, your code is now ready to upload to any site you want.

    I have already tested the HTML 5 conversions on a mobile device (iPhone 3 GS) and they do work, even the games that Google provide, I have also uploaded my own flash files. Flash games do work when converted but the more complex the game is, then the laggier the html version is for mobile devices. This may not be the case for phones such as the iPhone 4s, but unfortunately I have not had the opportunity to test this. Converted flash animations are quite fast and are only a little slower than what is displayed on a PC.

    All in all, Swiffy is going to be of great use to all web design and animators, now their work will be easily displayed on not only computers but also mobile devices. It is only a matter of time before Swiffy becomes more popular and all flash files become converted into HTML for speed, SEO reasons and across the board usability.

    Posted by: SEO Positive

    Posted on: September 23, 2011 9:59 am

    -

    The process of downloading and installing Joomla is an easy and most importantly a very quick one too. There is a very small span of time taken to get this amazingly powerful software package onto your system network and making it fully functional. You can avail a wide range of options within the use of this software package that includes tools and applications; with the use of each of them you can provide your website a new dimension of creativity and a new level of excellence in management. The chief advantages of Joomla as a content management system allows even those with less technical knowledge and experience to undertake work as an editor and manager of a website.

    Downloading and installation can be initiated from the official website as well as a number of other websites too. Here you will find set of directions that provide a step by step guidance and assistance to help you through the process. However there are a few prior conditions that you will have to ensure with your system before you initiate the process of installing Joomla. You must have an account with a web server – for this you have to buy a domain space in a web hosting company. With the domain you will also be able to access a website address of your own. Once these are available you are ready for the process of downloads and installations of the software package that will enable you to give a new look to your creative endeavors.

    As we all know by now that installing Joomla is an easy to access procedure that takes very little time to execute. There are several options in which you can carry this out. You can go to the website and click on the tab of install. There will appear before you a step by step process which will initiate the process within a few minutes. This quick process is often provided by the web hosting company which is simply a click away and comes with all instructions to be followed. You can also opt for the usual process of installation that is available. Copy the zipped file of the software package and install it in your host account. Following this you have to create a database and then continue running the installation process. There is an instruction manual and a video available on the website to help you through the steps. You can refer to these for an easy guidance.

    You can also try out a third option for installing Joomla – this is by creating a demo site at demo.joomla.org and then following the guidelines provided there; with this you can gradually move your website closer to the web hosting company. In all of these options the one aspect that’s common is the quick speedy installation that takes place.

    You can now focus on using the multiple tools available in the joomla software and create newer functions within the design and architecture of your website.

    Authors
    Categories
    Archives
    Blogroll