How to correct lines using the Crop Tool

How to correct lines using the Crop Tool

Here is a short exercise on “How to correct lines using the Crop Tool in Adobe CS 6” – a really neat new way that makes our life easier.

One may think that with our sophisticated digital cameras offering us various ways of taking pictures with straight horizons right away – not to speak of the high-end professional cameras – we may be in a hurry or just see lines differently as I do at times… brief: to bring more harmony into an image we simply have to see to it that lines are straight – fullstop! Even in Africa!

Winter scene in Steenberg Estate Cape Town, South Africa - by Bianca Gubalke

How to correct lines using the Crop Tool

Here are a few step-by-step tips on how to correct lines using the Crop Tool in the new Adobe Photoshop CS6 based on a winterly scene I took in Steenberg Wine Estate, South of Cape Town, South Africa, just a few days ago. While I like the mood – which I manipulated a bit with PhotoTools – the horizon is not straight and irritating, so ideal for this exercise. No, it wasn’t the wine… yet :)

1. Select the Crop Tool on the Toolbox.

2. Note how the image gets ‘framed’ by the crop box that you can then pull up or down into your image. It will automatically shade off a part leaving a clear line that allows us to define the exact part of the picture that needs to be adjusted.

3. Now we adjust manually by pointing our mouse outside the image and dragging until the lines are perfectly parallel where they should be. The grid layout helps us with this process. If you have a couple of horizontal lines – as is the case in my image here and they are not 100% parallel – then choose the line we focus most of our attention on as your principal guide for the correction.

4. As there’s always some cropping taking place when adjusting horizontal or vertical lines – and this needed quite some adjusting in previous versions, the new CS6 makes it so easy for us: simply adjust and align the outer edges of the crop box by pulling the ‘frame’ over the totality of the image, making sure the four corners fall inside the image area.

5. Click “Crop”.

Non-destructive cropping with the Crop Tool

Alternatively… possibly even a faster way right from opening your image:

1. Select the Crop Tool on the Toolbox.

2. On Options Bar (see crop tool selected to the far left), click on the “Straighten” Tool.

3. Click on one item to be straightened and drag the line across the image to adjust it. The image will rotate automatically as you see when you release the mouse.

4. The four corners of the cropped image fall inside the image. They can be adjusted within the crop box though if required.

5. Note: it’s our choice to check/uncheck the “Delete Cropped Pixels” Box at the top on the Options Bar depending on whether we want to get back to them later or not.

6. Once we’re happy, we click the “Submit” Button on the Options Bar, top to the right.

7. Watch your layer structure, especially when you do NOT tick the “Delete Cropped Pixels” tool, as then you see just one normal image layer, no more background layer.
This is a non-destructive way of cropping.

Pixels can be retrieved by going to > Image > Reveal all

I did take screenshots of the process – during the process – but I can’t retrieve, save and use them the way I did in the past – so have to solve this one :) It never ends…

However, cropping this way is fun!

Winter in Cape Town

Winter in Cape Town

Winter has definitely arrived in Cape Town, South Africa – with a cold, rainy and extremely stormy weather. Time to stay inside near the fireplace or hibernate… wouldn’t that be nice. But then there are these stunning days inbetween where the sun just shows us that it’s still there and to be counted on! And we all follow its promising invitation and spend some time in Nature, breathing it in and enjoying the many beautiful places Cape Town has to offer… like Steenberg Wine Estate as on this black & white photo.

Steenberg Wine Estate Image by Bianca Gubalke Photography

Winter in Cape Town

With winter in Cape Town having been so violent and harsh these last days, there was no ways I would have gone out to take some photos, which is normally a daily habit and definitely my passion. My fingers would have frozen by the mere thought… however, the sun is back (…not for long though), the days are already becoming longer… and here is the next photo shot at one of my favourite hangout places in Steenberg Wine Estate.

There’s nothing like Black & White Photography…

Learning Dreamweaver

Learning Dreamweaver

Learning Dreamweaver (Adobe) is a real joy; in fact, I wonder why we didn’t start with it earlier as it’s such a wonderful introduction to working with HTML and CSS Code and an ideal progression when combining it with our website development and design work from Adobe Photoshop. A topic by the way that we will be focusing on at the next Ycademy Seminar June 2012, this coming weekend.

Learning Dreamweaver Image

Learning Dreamweaver

For Learning Dreamweaver you obviously need the Adobe program installed on your PC. So how do you learn it? Simple, listen to Adobe TV to acquire the basic knowledge, following the clear step-by-step instructions. Take your time and try to understand what you’re doing. If things go wrong – and they will as usual -, do them all over again until you get it right. You don’t even need to know too much about code yet, although it helps of course. But if you go into split mode and you move your cursor over the various elements in your design, you see exactly what they refer to… and the Code is brilliantly commented for better understanding. It’s a neat lesson all by itself!

The above screenshot is from the finished website setup which I completed within a few hours after installing the program. It features four interlinked pages which include a Google Map and a YouTube Video – you may see it HERE. As with everything it’s now a matter of exercising with one’s own content including design elements created in Photoshop and text we can retrieve from anywhere – which is a big advantage as well. The point is that here a great foundation was laid to build on and to return to in moments of frustration and panic!

A truly smart program and one of the reasons why I currently spend more time learning than posting. . .

Basic HTML Forms

Basic HTML Forms

Do you remember struggling with forms in your website development? Thinking of check boxes, text fields and the like where customers or visitors were supposed to enter their data? Well, I do – and I know a few of you reading this are smiling as you’ve been there too!

Basic HTML Forms - Skeleton 12 June 2012

Luckily, Basic HTML Forms are making things much easier, but as anything in life – even the human skeleton as you see on my Xray – this needs structure… and there’s a plan behind it all, perhaps not a divine one… but then who knows?!

Basic HTML Forms

Basic HTML Forms is the next chapter in my endeavour to learn the basics of HTML5 and CSS3 as explained in my article on “Redefining a Blog using Semantic Markup” HERE.

HTML5 has come up with some new input types that make it easier for visitors to a blog or website to enter their data. They work better for browsers and add to the readability on mobile devices.

Setting up a Basic Form

Think labels! When setting up a basic form we are using labels:

<label for=”name”>Name</label>

Notice the ‘for’ (label for) which references the id of its associated form element:

<label for=”name”>Name</label>

<input type=”text” name=”name” autofocus id-name”>

Labels help visitors to better identify fields on a webpage, and as the form will be built in an orderly way with an ‘ordered list’, this keeps things simple, clean and we stay away from “Divitis”!

First field with Autofocus

You may have observed a new term in the scriptlet above: autofocus that raises questions.

What does it mean or stand for?

According to the tutorial we can speed up the data entry if, on our corresponding form on a website or blog, the user’s cursor appears straight in the first field on the form, right when they basically open and load the page. While this was previously achieved with JavaScript, now HTML5 can do this too.

Please note that we can only – and quite understandably – have one autofocus attribute per form if we want it to perform in a reliable manner. If we add more, the cursor will end up in the last autofocused field – perhaps not exactly what we intended, and not logic at all.

And as user-friendliness is our priority – remember this one!

Lots to get one’s head around… but then it’s the only way forward!

Redefining a Blog using Semantic Markup

Redefining a Blog using Semantic Markup

“You never start with a blanc page, do you?” I was asked at this morning’s breakfast table. Well… my answer was: “Yes, we do!” and promptly that’s what I started out to do today, continuing from yesterday’s post HERE and following the next basic exercise in “How to learn HTML5 and CS3”: Redefining a Blog using Semantic Markup.

Redefining a Blog using Semantic Markup exercise to learn HTML5 and CSS3

Redefining a Blog using Semantic Markup

“Redefining a Blog using Semantic Markup” is first of all about getting rid of the ‘divitis’ syndrome – meaning the usage of div tags – while exploring the elements that create a simple blog structure containing a typical header with a horizontal menu (navigation) underneath it. This is followed by the main section that contains the content in form of articles, that may each have their own header and footer as well as an aside (which may be a pullquote as in my example here). To this we add a sidebar with additional navigation. The page typically ends with a footer for the copyright note and possibly further information like Home, About and Privacy.

Redefining a Blog using Semantic Markup Exercise

Starting out from a blanc white page on my PSpad, I simply followed instructions and tried to understand what I was doing, what was known and where the differences were – creating an index.html page and a style.css – and getting the desired result. Nothing special, nothing designed to look great yet – just an exercise where “Learn by Doing” is what counts.

Another interesting difference I observed: this is all that’s needed at the top of the html page: <!DOCTYPE html> … talking of lean management!

Bianca Gubalke Showcase Image

I will certainly continue the journey…

How to learn HTML5 and CSS3

How to learn HTML5 and CSS3

It’s one thing to follow a gifted teacher through live HTML5 and/or CSS3 demonstrations and lessons, clicking here and there on command with hardly a second to breathe never mind moving one’s thinking muscle – and another to have a real good manual in hand on how to learn HTML5 and CSS3 independently and at our own time, where we can make those pauses after a fullstop and allow ourselves to think, connect and – in the best case – understand… before moving on.

How to learn HTML5 and CSS3 Image by Bianca Gubalke, Noordhoek, South Africa

Of course, in both cases complete comprehension of the complex matter is never guaranteed, however, we become part of the learning and development process and the new lingo and sometimes wildly abstract scriptlets start sickering in…preparing the terrain for that ‘aha!’ or deja vu experience sometime during our journey through what is structuring the groundwork for future web developments and better, modern web applications and setting new standards.

This process is not completed; HTML5 and CSS3 are definitely works in progress – and as students we are part of it!

How to learn HTML5 and CSS3

You may think that you know HTML inside-out and why on earth waste time on how to learn HTML5 and CSS3?

Getting a good Overview

Well, everything on the Internet is about change… and I believe in getting a good overview first. Very quickly we learn that amongst others:

Structural tags and attributes as well as presentational elements are no longer the same; many are deprecated today and we have to know which to use in order to have clean code and a website that works and is responsive.

On the other hand, CSS3 provides us with some astonishing styling elements that we could formerly only achieve with images we first created in programs like Photoshop, eg. drop shadows and elegant gradients.

Frames – frame, frameset, noframes – were known as a constant cause for errors and problems. Accordingly, they were dropped to improve usability and accessability that are so critical for interaction with readers and customers on our sites.

There is more, much more… and I will provide some insight as time allows. Surely, as dedicated website developers and designers we have our customers’ interest at heart and – especially with the rapid evolution of the mobile web – this means faster, better, easier and more user-friendly websites with high visibility on search engines as well as mobile devices – brief: better user experiences.

This is exactly why learning HTML5 and CSS3 is a must.

Bianca Gubalke Showcase 2011-2012

To be continued…

Website Security

Website Security

Website Security is an issue website developers as well as website owners are threatened and occasionally challenged with. With the sophistication of today’s hacking and phishing tactics, you want to make sure your hosting package includes maintenance and support as otherwise the threat of losing a lot of time, nerves and money is a very real one and the chance to get hit is just a matter of time. It happens to all of us. So what do you do?

Winter Sunset in Noordhoek, South Africa - by Bianca Gubalke Photography

Website Security

There is the 100% safe solution: total Website Security. It means that you are closing yourself off to a maximum. In website terms you could do this:

1. Disallow comments
2. Have no forms on your website
3. Don’t run any complex plugins.
4. Especially don’t link to Social Networks!
5. Don’t feed!
6. And watch out how you communicate with Google!

Here’s the secret tip: If you go on Private – so that you’re never listed – you won’t ever have a problem! Why? Because nobody can find you anyway!

Is this what you want? Not communicate at all? I don’t think so… maybe you want to have some additional security to your Akismet plugin, perhaps BulletProof Security – that should do the trick.

BulletProof Security Plugin

As said above, sooner or later we’re all a victim of a hack – in one way or another. One of our dear clients just went through this trauma – thank heavens she had wisely invested in an all-inclusive hosting pack as this was not a simple story, this was serious and sorting things out took lots of time and effort.

Additionally, I just installed a BulletProof Security Plugin to close some more doors… We will have to observe things over the next weeks and see whether this slows us down or causes any conflict. Hopefully all will go well as we’re on a WP based Semiomantics XO script. While there is lots to read and study, here are a few tips on how to instal and activate the plugin in the settings panel in your dashboard.

1. Security Modes

Click on Create secure .htaccess File (this is a Master Access File) … and let things happen.

See: POPUP green SUCCESS (on yellow background) right at the top.

To activate Master Access File go to Activate Security Modes below

Tick BulletProof Mode and ACTIVATE.

See green note at the top of the page confirms we are now protected… and then it says “IMPORTANT! BulletProof Mode for the wp-admin folder MUST also be activated….

Go now to the next: Activate Website wp-admin Folder .htaccess Security Mode
Tick BulletProof Mode and ACTIVATE.

See green confirmation at the top on yellow.

Go down again to Activate Deny All htaccess Folder Protection For the BPS Master htaccess Folder.
Tick and ACTIVATE.

It’s optional –but let’s use it.

Now go down to the last one: Activate Deny All htaccess Folder Protection For the BPS Backup Folder.
Tick and ACTIVATE.

Once we are done with that one, we go back to the Security Status and you will see now that it will say – on the bottom right in RED – that you haven’t backed up your root, etc yet.

And on the top left everything is fine.


6. Go to Backup & Restore

Here we want to backup the current htaccess files… so TICK (underneath CAUTION) on Backup .htaccess Files and click on Backup Files.

Once you did this, you see further down also Backup Your BPS Master .htaccess Files
So TICK and Backup Files here as well

So the second we don’t do because that’s a restore button.

And now you see everything GREEN underneath.

And go back to Security Status: everything is green except your admin name if you’re using ADMIN.

No let’s have a look at our System information.

When you’re moving to another server you can see here what your server configuration is that you have here.

It seems the BulletProof is increasing the use of memory.

9. Go to Edit-Upload-Download

One could backups here, instead of backups on server. One could also lock some pages… if one wanted to.

10. Go to Maintenance Mode

Here one could insert a message to tell visitors if the site is on maintenance mode
and activate the Maintenance Mode accordingly at the bottom.

11. Go through the rest for interest but that’s all we need.

BulletProof may slow you down and can cause conflicts. In that case check which plugins need to be disabled … disable all and then reintroduce one after the other and check behaviour. Where it stops working that’s the one that’s causing the trouble.

Don’t load a cache plugin. If they are not updated it’s the worst.
While editing don’t run caching plugins as you always have to empty the cache to see what you modify on the site.

Plugins and Security

The htaccess file security we now created works a little like a firewall. The htaccess files are our doorkeepers. They filter stuff coming in or being kept out.

When you’re installing a plugin, you basically allow that plugin to run on your website. This means you allow this plugin to open doors and to sneak through the htaccess file. Some of these plugins write to your htaccess file when you set them up, automatically. Like this one here.

When you’re using these plugins, they alter the htaccess file, and here is a source of errors. What happens when you’re deleting the plugins from FTP – then you have deleted the plugin, but not the modification the plugin may have made on htaccess files. So the door remains open – but the door guards that are constituted by the plugin itself – they are gone. So you can sneak in through those.

It is therefore important that when you’re deleting a plugin that you do it properly and that you delete it from the back office if possible as most modern and good plugins will erase at least the information that allows people to come through. It will not erase their advertising information etc in most cases though, but at least they will shut down the doors and erase also what they might have done to your wp-config file or to your htaccess files.

If you have to delete a plugin from FTP then you should delete it from there, come back, reinstal it and then uninstal it properly from the back office. Otherwise you have to go into the documentation of the plugin and see what kind of files it creates and database entries.

Database entries

All the information you enter into these form fields go to the database. So if amongst those settings you have allowed this and that, then you understand that if the plugin is not properly uninstalled then this stuff will remain in your database.

The same applies to your social network plugins which are probably the worst.

Testing plugins is important. Do so on a separate blog to test and experiment. Don’t clutter up your database with a lot of entries… get 36 databases instead of 11. Make sure that when you kick plugins out that whatever they have created on the database goes as well. This is important to avoid the problem of ‘open doors’!

That’s for security! Remember: the more doors you close, the more you shut yourself off – and that’s possibly not what you want. It’s a matter of careful choice…

Most importantly: invest in a Hosting pack that includes Maintenance and Support!