Photoshop Plus

Quick Guide To WordPress Shortcodes

Richard Carpenter — Wed, 30 May 2012 14:00:29 +0000

Shortcodes Introduction

The basic purpose of using a shortcode is to replace the placeholder with your very own custom snippet of HTML. This powerful function allows you to customise the layout of posts, insert different types of buttons or media and even snippets of HTML. It doesn’t take an experienced wordpress developer to implement shortcodes, with just a few simple shortcodes you’ll soon be on your way.

Writing The Shortcode Function

A basic wordpress shortcode consists of a simple function in which we insert inside of the “Functions.PHP” file. The function can be inserted anywhere at the bottom of the functions file, this is probably best practice as the function file more than likely contains a mountain of PHP code anyway.

On my tutorial blog i have a number of shortcodes one of which is a simple little text box for containing tips. On Photoshop Plus it looks like this.

Important Tip

This is my shortcode box for writing tips.

The shortcode function looks like this

function tipsbox() {
return '

Important Tip
This is my shortcode box for writing tips.

';
}

add_shortcode('photoshoptip', 'tipsbox');

To display this in shortcode, in our wordpress post we would simply add the following snippet.

[photoshoptip]

When viewing the post live on the website the shortcode snippet will be replaced with the HTML code inside of our function.

Conclusion

WordPress shortcodes can be used in many many ways, this tutorial is just one simple demonstration of a shortcode. In a later tutorial we’ll be talking about passing arguments to functions. If you can;t wait that long maybe give the wordpress Shortcode API Codex a try.

jQuery Animated Back To Top

Richard Carpenter — Mon, 28 May 2012 13:00:13 +0000

Quick Demo

Check the bottom of this website for a quick demo.

The Code

The markup for the button is really simple and something even a beginner should be able to setup. At the bottom of your page simply add a normal anchor tag as you normally would with any link.

Auto Scroll To The Top

The jQuery

$(document).ready(function() {
$('a[href=#top]').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
});

In a new “.js” file add the code above. It basically means. Lets look at the code in detail.

$(document).ready(function() {

jQuery has a simple statement that checks the document and waits until it’s ready to be manipulated, known as the ready event

$('a[href=#top]').click(function(){

When the document is ready apply the click handler to the anchor tag with a link of #top.

$('html, body').animate({scrollTop:0}, 'slow');

On a click event animate the HTML/BODY of the website, in this case the animation is “scrollTop” with a speed of slow.

Linking The Anchor Tag With The jQuery Script

If you click the link as it will do nothing. We first need to add a link to our anchor tag which was “#top”.

Auto Scroll To The Top

We now need to set where top is in our HTML document. Just after the opening “” tag add the following line of code.

Of course you don’t need to scroll to the top of your website you could even scroll to a certain point of your website, like a particular section for instance.

Conclusion

Thanks for taking part in this tutorial, hope you found it useful, I’d love to hear your comments. Feel free to post them up on our Facebook Fan Page Or Tweet them via twitter @photoshop_plus.

jQuery Color Fade Hover Effect

Richard Carpenter — Mon, 21 May 2012 08:13:00 +0000

About The Effect

The effect is pretty simple, its basically two images on top of each other positioned using CSS. When a user places there mouse over the image jQuery fades the top image out revealing the colored image underneath. The same effect can be pulled off wit HTML5 but i believe there is a lot more coding involved, its a subject i may touch on in the future.

Getting Started…

Create a new HTML file with the latest jQuery libary and a stylesheet attached..






Greyscale To Color jQuery Transition

Inside the body of the HTML document create a simple un-ordered list. Inside each list insert two images of the same size, one should be in color and the other in greyscale. If you want the effect to be “greyscale to color” then place the grey image in the list first, if you want the effect to be “color to greysale” then place the images the other way round.

Give each colored image a class of “color” and each grey image a class of “grey”. The code should look like this.

The CSS Styles

Inside the stylesheet add the following CSS styles.

.gallery li {
	float: left;
	margin-right: 20px;
	list-style-type: none;
	margin-bottom: 20px;
	display: block;
	height: 130px;
	width: 130px;
	position: relative;
}

img.grey {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
}

img.color {
	position: absolute;
	left: 0; top: 0;
}

The styles for the list (.gallery li) are just positioning each list in a row, the most important style is the “Position: Relative” style without this style the gallery images will just be on top of each other.

The most important set of styles are the classes that are assigned to the images.

The jQuery

Create a blank .js file then copy and paste the code below.

$(document).ready(function(){
$("img.grey").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});

Save the .js file as “Transition” inside a folder called “JS”. Once saved link the JS file in the head of the HTML file.

The jQuery code basically says, once you hover over an image with a class of grey lower the opacity to 0%, revealing the image underneath.

$(document).ready(function(){
$("img.grey").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},

The next part brings the opacity back to 100% when the mouse is moved off the image.

function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});

Conclusion

Thanks for taking part in this tutorial, if you have any comments or questions then feel free to post them up on our Facebook Fan Page Or Tweet them via twitter @photoshop_plus.

Quick Tip: Styling First and Last Child Elements

Richard Carpenter — Thu, 17 May 2012 17:14:14 +0000

View The Demo

Compatibility

IE7+
Firefox
Chrome
Safari
Opera

How The Pseudo Class Works

Quite simply the class styles either the first or last list elements, you can also combine the two together and style both the first and last list elements together. You might be thinking big deal but in some cases it can prove useful. Imagine you have list in your sidebar with a bottom margin on each list element, the very last list element always seems to look odd especially if you have a divider underneath the list separating sidebar content.

The pseudo class looks like this.

/*First Child Pseudo Class*/
li:first-child {

/*Last Child Pseudo Class*/
li:last-child {

How To Use The Classes

In a newly created HTML document I’ve simply created 3 lists each with there own classes. List1, list2 and list3, the first list will have only the first child list element, list2 will have only the bottom child list element styled and finally list3 will have both pseudo classes.


A List Element (This List Element Doesn't Have A Border)
A List Element
A List Element
A List Element
A List Element
A List Element


Styling Last Child Elements


A List Element
A List Element
A List Element
A List Element
A List Element
A List Element (This List Element Doesn't Have A Border)


Styling First And Last Child Elements


A List Element (This List Element Doesn't Have A Border)
A List Element
A List Element
A List Element
A List Element
A List Element (This List Element Doesn't Have A Border)

Adding The Pseudo Classes

In a stylesheet after styling each list element simply add the list class followed by the pseudo class “first-child”, which will style only the first child list element.

/* LIST 1 STYLING */
.list1 li:first-child {
	color: #F00;
	border:none
}

In a stylesheet after styling each list element on the second list simply add the list class followed by the pseudo class “last-child”, this will style only the last child list element.

/* LIST 2 STYLING */
.list2 li:last-child {
	color: #F00;
	border:none
}

On list3 simply add both of them after styling the list elements, adding both pseudo classes combined will style both first and last list child elements.

/* LIST 3 STYLING */
.list3 li:first-child, .list3 li:last-child {
	color: #F00;
	border:none
}

Your designs can make or break the whole look of your website. There are a lot of ways to style it using different techniques on your codes. We believe that the whole package of your site must also come with a good web hosting. People won’t be able to access your site if you haven’t got one and you don’t want to risk your website with those free hosting. Don’t worry for the cost because you can get the cheapest hosting if you would research for the one that suits your needs

Conclusion

Thanks for taking part in this tutorial, if you have any comments or questions then feel free to post them up on our Facebook Fan Page Or Tweet them via twitter @photoshop_plus.

Custom WordPress Gravatars

Richard Carpenter — Wed, 16 May 2012 17:59:36 +0000

Why Would I Need To Replace The Default Gravatar?

In all honesty you don’t need to replace the mystery man gravatar, but doing so enables you to personalize your blog/website even further.

Locating Your Gravatar

Login into the admin panel of your wordpress website, once logged in go to “Settings > Discussion”. Your default gravatars are located at the bottom of the page.

Creating The Function

Every wordpress theme should have a functions file (Functions.php) This file loads all the different options you may have for your blog. We’ll use this file to specify our new default gravatar.

Start by opening up the functions.php file in your theme directory. If you do not see one, then simply create a blank one. Depending on your current theme, there may already be some code involved. If you do see any code in there then just ignore it, the code we’ll be using will be independent from the rest of the code. The code looks like this.

add_filter( 'avatar_defaults', 'newgravatar' );

function newgravatar ($avatar_defaults) {
$myavatar = get_bloginfo('template_directory') . '/images/codesnippet.jpg';

$avatar_defaults[$myavatar] = "New Code Snippet Gravatar";

return $avatar_defaults;
}

The “add_filter” function tells our theme we’ll be editing the default avatars with our very own custom avatar function. The next line of code looks for the location of our new avatar, its set to look in our images folder contained within our theme folder. The next function gives our new avatar a name which will be displayed in our wordpress admin panel.

Select Your New Gravatar

Login into the admin panel of your wordpress website, once logged in go to “Settings > Discussion”. Your new gravatar should be located at the bottom of the page with all the other gravatars.

Conclusion

Thanks for taking part in this tutorial, feel free to comment or comment on our Facebook Fan Page Or Tweet them via twitter @photoshop_plus.

Welcome To Photoshop Plus V4

Richard Carpenter — Sun, 13 May 2012 00:15:28 +0000

The New Photoshop Plus

Welcome to the new photoshop plus, hope you all like the new look. I’ve made a few minor improvements one major improvement is photoshop plus is now a lot wider for those who have bigger screens, the site is also ipad compatible so you can keep up date with the latest posts whilst on the go.

Photoshop Plus On The Ipad

Branching Out

Now on photoshop plus not only can you learn photoshop and design for the web you can also learn about the development side with the new “Code Snippets” category. Originally my other blog “Code Snippet” was going to host these types of tutorials but now I’ve decided to merge both blogs into one. Therefor Code Snippet will be removed and existing content ported over to photoshop plus.

Tiny Little Bugs

As with any new website minor bugs are to be expected. If you do manage to come across anything then please please report the bug via the contact page.

Conclusion

I look forward to hearing your comments and thoughts

Learn How To Create An IOS Fabric Style Icon

Richard Carpenter — Wed, 02 May 2012 13:00:17 +0000

What We’ll Be Creating

Resources Used In This Tutorial

Download The IOS Template

Lets get started. Download the IOS icon template from the resource list then open it up in photoshop.

IOS App Icon Template

Once open in photoshop locate a layer called “EDIT THIIS SMART OBJECT”. Once the layer has been located simply double click it to start editing it.

Creating The Icon

Once you’ve opened the smart object you will be presented with a blue background. From within the layers palette hide the layer group “Blue” then create a new group and call it “Fabric”. At the very top of the layers palette there is a layer called “HIDE ME WHEN DONE” Hold down the “Ctrl” key on the keyboard and left click the thumbnail, doing this will load a selection. Once the selection has been loaded go to “Select > Inverse”, create a new layer inside of the “Fabric” folder then fill (G) the selection with any color.

Now download the fabric texture set and install them inside of photoshop.

Fabric Textures Pack

Once the patterns are installed add the following layer styles to your shape.

You should have something like this.

Turning The Icon 3D

Load a selection around the top layer again, inverse the selection like we did before then fill (G) the selection on a new layer inside of the fabric folder. Select the “Move Tool” (V) then move the shape up by 80 pixels.

Tip

Hold down the shift key whilst the “Move Tool” (V) is selected then push the up arrow key. The shape will move up by 10 pixels with every press.

We now need to make the top half of our icon rounded like it was before. To do this simply load a selection around the top layer then simply press delete.

To your top shape layer add the following layer styles, take note on which pattern I’ve used.

You should have something like this.

Create a new blank layer in between your two layers you currently have, then once again load a selection around the top layer, inverse the selection then fill (G) the selection with the color white #ffffff. Add a layer mask to the black shape then drag a reflected gradient from the middle of the canvas dragging outwards. Once you’ve added the gradient set the opacity to 9%, doing this will just add a bit of lightness to the edge of the icon.

Creating The Fabric Creases

Create a new document 1024 x 1024 with a transparent background. Reset your background and foreground colors to black and white then select the “Gradient Tool” (G) with the following settings.

Once you’ve applied the settings randomly drag numerous gradients over the canvas. You will have a completely different set of wrinkles every time you do this so don’t worry if your image looks nothing like mine.

Now go to “Filter > Stylize > Emboss”.

Select the whole canvas (Ctrl + A) then copy the contents to the clipboard (Ctrl + C). Head back to your original document then paste (Ctrl + V) contents onto your icon. Load a selection around the top layer then hit the delete key to remove the edges from the pasted content.

Set the new layers blend mode to “Linear Light” to blend in creases.

Adding The Logo

Using your desired logo add it to your icon.

Now add the following layer styles to your icon.

You should have something like this.

Select your creases layer then load a selection around your logo shape. Now press “Ctrl + C” then “Shift + Ctrl + V) move the pasted layer to the top of the stack above your logo then set the layer blend mode to “Linear Light”. Basically what we’ve done is added the creases to the logo, now add the following layer style to your logo creases layer.

You should have something like this.

Creating The Stitches

Open the brush window (F5) then select the brush tool (B). Now apply the following settings.

Load a selection around your logo then go to “Window > Paths”. Inside the paths window press the following button.

Now the path has been loaded head back to the layers palette and create a new layer then select the “Pen Tool” (P) with the color black #000000 as your foreground. Right click on your canvas and select “Stroke Path”.

Finally add the following layer styles to the stitches layer to complete the tutorial.

Once your done press “Ctrl + S” to save then close the smart object. You should be left with your icon.

Conclusion

Thanks for taking part in this tutorial, if you managed to finish this tutorial I’d love to see some of your results. Feel free to post them up on our Facebook Fan Page Or Tweet them via twitter @photoshop_plus.

Download Source

License and Attribution:

This file is licensed under the Creative Commons license. Attribution is required and always appreciated. Thanks.

16 Mobile Development Resources

Richard Carpenter — Wed, 25 Apr 2012 13:00:31 +0000

jQuery Mobile

App Icon Template

Codiqa

iPad GUI PSD Set

Glyphish

Sprite Pad/h4>

Mobile Patterns

IOS Icon Gallery

Mobile UI Inspiration

Mobile Patterns

iPhone Sketch Mockup

Gestures Illustrations

Hand Gestures

Clean Mobile Mobile Login Tutorial

Conclusion

Thanks for checking out these resources, if you manage to find any resources worthy of being listed then feel free to post them up on our Facebook Fan Page Or Tweet them via twitter @photoshop_plus.

“Your WordPress” A FREE PSD File

Richard Carpenter — Wed, 18 Apr 2012 13:00:31 +0000

Your WordPress Free PSD

Conclusion

Hope you appreciated this feebie, if you find anything worth sharing feel free to post them up on our Facebook Fan Page Or Tweet them via twitter @photoshop_plus.

Download Source

License and Attribution:

This file is licensed under the Creative Commons license. Attribution is required and always appreciated. Thanks.

Clean Mobile Login Screen Tutorial

Richard Carpenter — Fri, 13 Apr 2012 13:00:28 +0000

What We’ll Be Creating

Resources Used In This Tutorial

IC Mini Icon Set

Setting Up The Canvas

Before we start i just want to point out that we’ll be designing the login screen based on the iphone 4 screen resolution, if you want to create a login screen for iphone 3GS and below then you can simply resize the canvas by 50% when the tutorial is finished.

Tip

Iphone 4 and 4s screen resolution is 640 x 960 pixels, Iphone 3gs and below is 50% smaller with a screen resolution of 320 x 480 pixels.

Create a new document (Ctrl + N) 640 x 960 pixels with any colored background then setup 4 sets of guides which will make up for 20 pixels padding around our canvas. To create a new guide go to “View > New Guide” enter the values in the image below.

Creating The Background

Once you’ve created the guides go ahead and add some style to the background using the following layer styles and settings below. If you find your background layer is locked simply right click and select “Layer From Background” to unlock it.

Were now going to add a subtle pattern to our canvas, start off by creating a new document (Ctrl + N) 4 x 4 pixels then using the “Pencil Tool” (B) replicate the image below pixel by pixel.

When you’ve finished go to “Edit > Define Pattern”, saving it into your pattern library. Now fill a new layer using your pattern then set the layers blend mode to “Soft Light”.

Creating The Mobile Page

Starting from the top, add your mobile websites logo. I haven’t done anything specific I’ve just added a shape to represent my mobile page. On your design you can put a bit more thought behind the making of your logo.

Underneath the logo add some text making it clear to the user what it is you are asking them to do.

Creating The Social Buttons

Select the “Rounded Rectangle Tool” with a radius of about 5 – 10 pixels then drag out a rectangle from the left guide all the way over to the right guide. You want to make the buttons quite chunky and easy to press when on the mobile device.

Once you’ve created the rectangle add the following layer styles.

You should have something like this.

Using the “Rounded Rectangle Tool” again create a 2nd rectangle only this time make it about 10 pixels smaller all the way around.

Repeat the steps above and create a further two buttons only this time round make the last button half the size.

Your probably guessing which social buttons I’ve used. Starting with the first button (Light Blue) add the following layer styles.

To the darker blue button add the following layer styles.

Finally add the following layer styles the last small button.

Once all the layer styles have been applied, load a selection around one of the buttons. To load a selection simply hold down the Ctrl key on the keyboard and click the little thumbnail in the layers window.

Create a new layer above the button you have loaded the selection around then fill the layer with your pattern which you created earlier. Once the selection has been filled deselect (Ctrl + D) the selection and set the layers blend mode to “Soft Light” and opacity to around “10%”.

Repeat the steps for the other two buttons.

Finishing Up

Finally label each button using the “Type Tool” (T) then using the icons from the resource list, add the button symbols to the relevant buttons.

IC Mini Icon Set

Conclusion

Look out for mobile design and mobile coding tutorials soon.

Download Source

License and Attribution:

This file is licensed under the Creative Commons license. Attribution is required and always appreciated. Thanks.