JungleJar » development

Photoshop Tutorial: Get Smart with Smart Objects

admin — Sun, 31 Jan 2010 17:13:37 +0000

In this tutorial you will learn how to use Smart Objects to save out individual images from a layout that you have created. If you are designing and developing websites and/or interfaces this is perhaps the most powerful tool that Photoshop has to offer.

Photoshop Help defines a Smart Object as a layer that contains image data from raster images Photoshop. What does this mean exactly? Essentially it mean that you can create mini-Photoshop files related to assets in your full Photoshop files and these mini-Photoshop files can be modified and saved out as images individually and not dependant on their parent Photoshop file. Follow along with this tutorial and you will better understand what Smart Objects are and why they are so useful.

Steps to follow:

Open Photoshop and create some image assets all on different layers. Group some together in a folder if you like. In my example I have a header used for this website, its composed on a ‘subscribe’ image, a ‘twitter’ image, and my logo which is made up of several assets put into a folder.
Convert layer into Smart Object: Move your mouse over the chosen layer and right-click when you are over top of the layer name. Click on the option that says “Convert to Smart Object”.
Now you the layer should have an Smart Object icon on it and should look like the image below. Double-click on that icon.
You have now opened the Smart Object. Notice that it is named the same as the layer name you gave it except it uses the .psb extension. This is basically like a mini photoshop file. From here you can modify the image and save it out as an image (jpeg, png, etc). You can resize, crop, and do pretty much anything to this small file. When you close the Smart Object Photoshop will ask if you want to save any changes and they will be retained for future use.

You can also convert a folder into a Smart Object and it will retain the structure of the folder when you open the Smart Object.

I hope by now you are realizing how powerful this tool is for creating interfaces where you are constantly saving out various components of the full layout. It basically allows you to create many mini-Photoshop files within one parent Photoshop file.

I hope you have found this tutorial useful and would love to hear your feedback : )

WordPress.com Introduces a New PicApp Shortcode For The Bloggers

Christopher Hennis — Tue, 06 Oct 2009 19:11:41 +0000

“We all love adding great images to our blog posts, and today we’ve enabled a new WordPress.com Shortcode that adds millions of available premium images to the mix, all for free.”

“The Shortcode is for a service called PicApp, which offers up to the minute sports, news, and celebrity images from some of the top photographers and agencies throughout the world.”

View this official blog posting at WordPress.com.

Visit PicApp.com, the provider of the free image web application.

Looking at WordPress Custom Fields and Images Further

Christopher Hennis — Tue, 06 Oct 2009 04:07:21 +0000

You may remember a previous article I wrote here on JungleJar.com called Using Custom Fields To Post Your Images, but if not, I’m going to reintroduce a few of the code snippets and methods I wrote about in the tutorial about how to save and display image data from custom fields within WordPress.

In this article I’m also going to cover a few of the small yet robust code block methods I myself tend to practice quite a bit that I didn’t previously touch on.

Who Does This and Why?

I believe this is the best starting point for this tutorial. I for one would want to know exactly how essential this bit of WordPress knowledge is to know, how often other experienced webmasters and WordPress Theme authors incorporate this knowledge into their websites/templates, and why this is still a very useful alternative to using a WordPress Plug-in to handle the article thumbnail postings.

This method of displaying a website post’s thumbnail became ultimately popular with the advance of the “Magazine Style” Template craze. Basically what this means is that the website is set up to resemble an online magazine of sorts with aesthetically relevant thumbnail images used to offer a bit of personality and intrigue to the related article. Template authors found that the easiest method to quickly incorporate these images directly into the website with the image placement, enhancements, etc automatically accounted for via CSS style sheets was by using the WordPress Custom Fields section of the write page.

So, is this method still widely used? Yes, and I really don’t see this changing. This method of incorporating the aesthetics into the article is so straight forward that really there is no need for the complexities of a plug-in.

So, in my opinion, you should become at least somewhat familiar with this technique even if you have no plans to take advantage of it at all. It could offer you solutions to other problems, as the custom fields do not exist solely for any one thing such as images, and associating the usage of images with the custom fields is a fantastic way to begin learning about them and utilizing them if you’re new to WordPress.

The Custom Field

First off, let’s take a look at an actual WordPress Custom Field filled in with a key or name (‘img’) and a value which is the URL of the thumbnail we’ll be using to symbolize our article.

Essentially what this does is tell WordPress to assign the value we’ve entered (in this case the URL to our thumbnail image) to the key (‘img’) which will act very much, if not exactly like a simple variable. That is, we will refer to ‘img’ later on to display our image since ‘img’ will stand for the URL of our image.

The WordPress Loop

This is the absolute bare bones functionality of my method of capturing data from WordPress Custom Fields within the Page / Post editing section of WordPress.

 while (have_posts()) : the_post(); ?>
 $image = get_post_meta($post->ID, 'img', true); ?>
 echo $image; ?>
 endwhile; ?>

Essentially what you have here is little more than the WordPress Loop which every WordPress website / template must have. This begins with the PHP while statement and ends with the PHP endwhile statement.

The section that takes advtange of the data stored in ‘img’ is..

1	$image = get_post_meta($post->ID, 'img', true); ?>

which takes that data and assigns it to the PHP variable we’ve created named $image.

The next line basically takes this information and prints the URL (not the image yet) to the screen.

In the section below you can really see how the usage of the IMG HTML tag, the WordPress specific PHP and the CSS image class all come together.

CSS Styling of Images

More than likely you’re going to want to manipulate the styling, especially the positioning of your blog post’s thumbnail, and one of the most common CSS attribute added to the specified CSS image class is a float attribute.

 while (have_posts()) : the_post(); ?>
 $image = get_post_meta($post->ID, 'img', true); ?>
 echo $image; ?>" alt="Our Image" />
 endwhile; ?>

img.yourimageclass {
 float:left;
 width:auto;
 height:auto
}

While setting the width and height attributes won’t do much in the way of speeding up the actual image loading speeds, which is what setting the width and height of images before the boom of big-time broadband was most importantly used for, but what setting these values to ‘auto’ does do is just as important in the new era of things.

The auto attributes allow you to specify the attributes which is required in order for the XHTML file to validate by the W3C’s standards which also allows you the flexibility of not having a static image size. That is, you are free to use a thumbnail of any size while also having your XHTML files validate via the validator at w3.org.

This is a neat little trick you’ll most likely want to remember in the future.

A lot of WordPress Theme authors still do not take advantage of this very simple validation fix to allow their template users the flexibility of choosing the size of the post thumbnail for themselves.

Assign a Default Image

If no image is entered into a custom field when publishing your blog post, would you like a default image to be displayed instead? A useful example of this would be a semi-large magazine or book icon to be displayed to represent the fact that your blog post is an article essentially.

 while (have_posts()) : the_post(); ?>
 $image = get_post_meta($post->ID, 'img', true); ?>
 if(empty($image)) { 
         $image = "http://www.anydomain.com/img/document.png"; 
} ?>
 echo $image; ?>" alt="Our Image" />
 endwhile; ?>

Another good example of using this technique would be to display your personal avatar to bring personality to a blog post even if you didn’t assign a specific thumbnail to the post.

A visual example of this can be seen below which is just a snapshot of a post display while using vexed.box — a free and premium WordPress Template created by us here at JungleJar.com for the masses to enjoy.

No Image? No Problem.

And of course occasionally you’re going to want to post a blog post without using any thumbnails to symbolize the article or take up any unnecessary space.

 if ( isset($image) && !empty($image)) { ?>
 the_permalink(); ?>" title=" the_title(); ?>">
 echo $image; ?>" alt="Featured:  echo $loopnum; ?>" />
  } ?>

This code above will assist you in doing just that. It checks to see if the variable $image exists and contains data, and if it does, it will display the thumbnail with the CSS image class ‘thumbnailclass’ providing the styling. If no image data exists, the code will simply carry on without forcing the boundaries of an image when one does not exist.

A Closer Look at CSS Tab Designer

Christopher Hennis — Fri, 25 Sep 2009 04:38:17 +0000

Do you ever find yourself sitting in front of Photoshop for hours trying to mock up a decent navigation menu, or searching the web for the most aesthetically pleasing color palettes for your users to click on that doesn’t remind them of McDonalds or a funeral parlor?

Face it, sometimes we all lose our mojo for a moment or two, and then we are forced to validate ourselves not just to the W3C, but also to our website visitors, design clients and portfolio piranhas.

And then we remember that through the general kindness of a group of web designers and/or developers, and through organizations such as The Creative Commons who work to guarantee that kind freedom, we don’t always have to be the Picaso of style sheets.

CSS Tab Designer

CSS Tab Designer is a clean and very small desktop application for the Windows Operating System which doesn’t really bring much new to the drawing board, but what the application does nicely is it displays many various popular and well designed CSS menus, both vertical and horizontal. Some of which you’re likely to have seen on other websites, but through the flexibility of the menus’ respective Creative Commons Licenses, all have been incorporated into this small desktop application making it a snap to browse through over 60 designs to find that perfect one to serve as a base template to build upon, or to simply use as is.

In the image above (click for a better view) you can see how easily the program is set up and the true value of the program comes to life a bit.

If using a pre-designed CSS menu seems the better choice for you, you can simply select the design you prefer, edit your text links in the sidebar the application provides, and click the “Generate HTML & Images” button in the menu, and voila. You’ll have yourself a beautiful CSS menu completely customized to your needs with all of the images and XHTML valid code ready to be copy and pasted into your existing website.

The application isn’t all about using other designers’ CSS menus, although it absolutely prides itself on giving you that option. You can construct your own CSS menu with a bit of CSS (of course) and XHTML and view a live preview of how the menu might be interpreted by IE, Netscape, Opera, Firefox, Konqueror, Safari and Camino.

CSS Tab Designer is a freeware desktop application created by the OverZone Software development team.

Visit the official CSS Tab Designer webpage at OverZone Software.

CSS Tab Designer Contributors list.

List Of Markup Validation For Common Websites

Christopher Hennis — Wed, 16 Sep 2009 09:39:11 +0000

I was browsing the W3C Markup Validation Service entry on Wikipedia awhile back, and came across a very interesting little thing they did. They had the idea of checking a list of some of the most common or popular websites on the internet such as Google, Apple, AOL, MSN, etc.

What I saw back then was relatively surprising to me. What I saw today when I went back to that entry on Wikipedia was even more shocking as they updated their list by nearly double and only had one website to add to the ones that came back valid…

The above picture was the old snapshot that was taken off the W3C Wikipedia page. If I had to say, I would say it’s around a year old. Give or take a month or three.

The above image is the new snapshot taken off the W3C Wikipedia page. One of the first things I noticed was Google.com didn’t validate, and I can’t see why. I mean, the simplicity of the Google.com website, its main index, is incredibly simple with an image, a few lists, and a text area form.

I was even more surprised about Twitter and Apple not validating to the W3C standards.

In the article on Wikipedia concerning the W3C Markup Validation Service, it wasn’t stated whether the above websites were scanned for valid XHTML in Transitional Markup, Strict Markup or else. My best bet however is that they scanned these websites for Valid Transitional XHTML, as that gives the website being scanned a bit of head way, but certainly doesn’t make it a piece of absolute cake to validate.

Read about the W3C Markup Validation Service at Wikipedia

Visit the W3C Markup Validation Service

I also highly recommend reading the Help and FAQ for the Markup Validator as it answers most fundamental questions nearly anyone would have about what exactly the W3C Markup Validation Service is.

As defined by their very own FAQ..

” The Markup Validator is a free service by W3C that helps check the validity of Web documents.

“Most Web documents are written using markup languages, such as HTML or XHTML. These languages are defined by technical specifications, which usually include a machine-readable formal grammar (and vocabulary). The act of checking a document against these constraints is called validation, and this is what the Markup Validator does.

“Validating Web documents is an important step which can dramatically help improving and ensuring their quality, and it can save a lot of time and money Validation is, however, neither a full quality check, nor is it strictly equivalent to checking for conformance to the specification.”

Continue reading the official about page.

WordPress 2.8.4 Security Release

Christopher Hennis — Fri, 14 Aug 2009 02:16:03 +0000

“Yesterday a vulnerability was discovered: a specially crafted URL could be requested that would allow an attacker to bypass a security check to verify a user requested a password reset. As a result, the first account without a key in the database (usually the admin account) would have its password reset and a new password would be emailed to the account owner. This doesn’t allow remote access, but it is very annoying.”

“We fixed this problem last night and have been testing the fixes and looking for other problems since then. Version 2.8.4 which fixes all known problems is now available for download and is highly recommended for all users of WordPress.”

View the official posting on the WordPress Development Blog.

WordPress 2.8.3 Security Release

Christopher Hennis — Thu, 06 Aug 2009 23:47:32 +0000

In case you guys aren’t already aware of this, the WordPress Development Team have released another security release to tackle yet another round of the privilege escalation issues found in WordPress 2.8.1, and this one is all thanks to the community.

Click here to view the official release notes at the WordPress.org/development blog.

In a passing thought, I imagined it might be relatively interesting at the very least to actually be informed of the persons behind the fantastic finds. They do, after all, deserve a bit of recognition for shining light on the issues before they got out of control. Maybe even automattic might consider them for employment, hmm?

If you know of the person or persons behind the bug finds in WordPress 2.8.1 involving the privilege escalation issues, please contact me.

Portfolio – The Awesome Version — A DeviantArt Launch

Christopher Hennis — Sat, 25 Jul 2009 11:56:21 +0000

DeviantArt.com has recently launched its very own online web-application based portfolio creation service named: Portfolio – The Awesome Version, and they even host it for you as well. Users have the choice of either signing up for a free account or a premium account.

In this article I’m going to cover the free account portfolio service they offer, show you a few images of the user interface and give my honest opinion on its worth — for better or worse.

Portfolio – The Awesome Version

Look and Feel

When creating your portfolio, the first set of options that you’ll be going through are the look and feel, and I don’t want to sound like I’m trying to dis-like this portfolio software, but immediately after looking at the Look and Feel options, I wasn’t impressed to say the least. Two color choices? For portfolio software launched by DeviantArt? I mean, cmon! I know the service is free, but give the people a little somethin’. Not to mention there’s the fact that they have a huge challenge ahead of them getting their online portfolio system ahead of the millions of others on the internet — and most of them good.

And then there’s the navigation layout. I can possibly understand the developers not feeling the need to incorporate any navigational looks in the footer, but to not even offer the ability to place the navigational links to the right of the page is ridiculous. Even their own Deviant Submission Galleries give you this option.

Two fonts, 20 font colors to choose from, and then the homepage image field which also placed a ridiculous restriction on me. The image had to be larger — much larger — than the one I wanted to use. Again, I ask why?

Yeah, it was looking pretty bleak at this point.

However, there was one really nice and useful option. When choosing your image for the portfolio’s main page, you are given the option of choosing an image from your DeviantArt Gallery, and it worked perfectly with absolutely no lagging in the interface.

Check out the snapshot below..

Personal Information

The first option you’ll come across in the personal information section is the “Portfolio Title” form field. As I was writing my own portfolio’s title, my letters stopped appearing — Yes, they have a character limit apparently for the title of your portfolio. Now, don’t get me wrong, I believe you probably should keep this a bit short, but why make them?

Perhaps I’m a bit biased on this issue as I also find the way that Digg has an extremely short character limit absolutely annoying, and I ignore the 140 reasons to not like Twitter, but I do. Actually, I love Twitter..

Anyway, so, the rest of the options are pretty self-explanatory, and fundamentally can not be too much of a bother..but, if your email address is anything as long as my own (Christopher@ChristopherHennis.com), you’re going to really hate how it runs from your sidebar into your main content area and ruins any aesthetic form the software tries to provide as seen below..

Biography

Ah yes, the portfolio’s biography section — otherwise known as the section no one really looks at most of the time, but we really enjoy pretending they do.

Not a lot to say about this section of the portfolio setup process / management, so I’ll let the screenshow below say it all.

Upload Files / Gallery Management

I spent somewhere around 20-30 minutes selecting images from my computer to be displayed on my “awesome” portfolio, and the image thumbnails loaded up with no problem, leading me to believe there would be no problem with using them. My logic told me that any error checking was done before any images would be displayed to show the portfolio owner that his artwork was uploaded and ready to be published. I found out this was not the case. Please refer to the image below..

At this point I was seriously in shock as to why this software was even released in such a state. Not only do your images absolutely have to be of some larger estate, which in itself is just odd, because usually it’s the larger images that cause the problems, but the error checking that was performed couldn’t even scan my image for its file extension, perform a simple if loop and tell me which error specifically it is — a or b.

Domain Name

“Your Portfolio will be published with a unique yourname.daportfolio.com address that you can share with your clients, friends and colleagues. Your deviantART username has been reserved if you choose to use it as your portfolio address, however, you may use any available name of your choice.”

CSS / (X)HTML Code Validation

This one didn’t shock me too much, but I still thought that maybe the portfolio websites that are generated would be written up in valid CSS and (X)HTML.

..didn’t validate.

..uses a Transitional Doctype…..

………….time to wrap this one up.

My Conclusion

I know you’re full of anticipation for my final ruling on this one..

Portfolio — The Awesome Version is anything but awesome. All I can really say is that I hope the premium version of the service actually provides the most basic of features for the users, because the free version surely did not. I went into this article very much wanting to like this software, and I had such high expectations, because the DeviantArt Gallery services are just excellent and truly a cornerstone of fantastic web design, web development, community interaction, application development, just everything that one thinks of when they think of the possibilities of modern day developmental technologies.

So, in closing, this portfolio software sucks and has a long way to go before coming close to being anything of a feature. I know the developmental process will continue, and more than likely this web application will one day become truly remarkable while maintaining its free accountability, but today is not that day.

Visit the official website of Portfolio – The Awesome Version.

You can click here to check out the really quick portfolio I made using the software.

Mozilla Firefox 3.0.12 and 3.5.1 Released

Christopher Hennis — Fri, 24 Jul 2009 12:12:09 +0000

Mozilla has released yet another Firefox version with very little time in between the release dates.

A lot of you will be happy to know that they fixed an issue introduced in Firefox 3.0.11, where Firefox would occasionally freeze when accessing the Java plug-in on Windows XP.

Read the Mozilla Firefox 3.0.12 Release Notes

Read the Mozilla Firefox 3.5.1 Release Notes

WordPress 2.8.2 Security Release

Christopher Hennis — Tue, 21 Jul 2009 17:21:51 +0000

If you run WordPress < 2.8.2, you might want to consider updating your installation as older versions of the CMS are prone to a XSS vulnerability.

“WordPress 2.8.2 fixes an XSS vulnerability. Comment author URLs were not fully sanitized when displayed in the admin. This could be exploited to redirect you away from the admin to another site. Download 2.8.2 or automatically upgrade from the Tools->Upgrade page of your blog’s admin.”

Read the post at the WordPress Development Blog.

JungleJar » development

Photoshop Tutorial: Get Smart with Smart Objects

Related posts on JungleJar:

WordPress.com Introduces a New PicApp Shortcode For The Bloggers

Related posts on JungleJar:

Looking at WordPress Custom Fields and Images Further

Who Does This and Why?

The Custom Field

The WordPress Loop

CSS Styling of Images

Assign a Default Image

No Image? No Problem.

Related posts on JungleJar:

A Closer Look at CSS Tab Designer

CSS Tab Designer

Related posts on JungleJar:

List Of Markup Validation For Common Websites

Related posts on JungleJar:

WordPress 2.8.4 Security Release

Related posts on JungleJar:

WordPress 2.8.3 Security Release

Related posts on JungleJar:

Portfolio – The Awesome Version — A DeviantArt Launch

Portfolio – The Awesome Version

Look and Feel

Personal Information

Biography

Upload Files / Gallery Management

Domain Name

CSS / (X)HTML Code Validation

My Conclusion

Related posts on JungleJar:

Mozilla Firefox 3.0.12 and 3.5.1 Released

Related posts on JungleJar:

WordPress 2.8.2 Security Release

Related posts on JungleJar: