Wednesday, December 28, 2011

How To Make Your Photos Look Professional (3)

The Extreme Contrast Effect:

I'm still not very sure when this effect works the best. I guess the more the photo has bright colors, the more it looks great with it.

Anyway, I'll use this photo of Pooh reading a book about PHP. I took it using my Nokia cell phone's camera. Not a high resolution photo at all.


Step 1: Duplicate the background layer by clicking the keyboard shortcut Ctrl+J. This will add a new layer called "Layer 1".


Step 2: Desaturate the new layer by hitting the keyboard shortcut Shift+Ctrl+U to make the image appears in black and white.


Step 3: With "Layer 1" selected in the Layers palette, press Ctrl+J to duplicate it, so we'll now have two black and white layers in the Layers palette.



Step 4: With "Layer 1 copy" selected, change the blend mode of  it to 'Screen' and lower the opacity to 50%.



Step 5: Click back on the original Background layer. Then press Ctrl+J to create another copy of it, named "Background copy". Then drag & drop it to the top of the layer stack.


Step 6: Change the layer's blend mode to "Overlay", and the opacity to 75%.


Step 7: With the "Background copy" layer still selected, press Shift+Ctrl+Alt+E to merge all layers onto a new layer at the top of the layers palette.


Step 8: Add noise to the merged layer [Filters > Noise > Add Noise]. And use the values of the following screen.
Aside: Well, feel free to set the "Amount" of noise you'd like & that suits your photo.


Step 9: Sharpen the image to enhance the noise [Filter > Sharpen > Smart Sharpen]. Use the following settings.


Step 10: Add a "Curves" adjustment layer [Layer > New Adjustment Layer > Curves], and set its blend mode to "Multiply".




Step 11: Grab the Elliptical Marquee tool from the Tools palette, and drag out a large oval selection inside the document, making it so large that the edges extend out past the left and right of the image.




Step 12: With Black color as your Background color and the Curves adjustment layer selected in the Layers palette, use the keyboard shortcut Ctrl+Backspace to fill the selection with black. You're not covering the image itself with black. Instead, you're filling the area on the Curve adjustment's layer mask with black, which will cause the Curves adjustment to be hidden inside the area you selected, allowing the original lighter version of the image below it to show through. Only the corners of the image remain darker.


Step 13: Soften the edges with the "Gaussian Blur" filter [Filter > Blur > Gaussian Blur]. Use the following settings.
Aside: Again, this depends on the resolution of the photo. So, change the value till you get a smooth enough edges.


This is the last step to have an Extreme Contrast effect on your photo. For this particular one, I'll add some blur effect to the background, to make Mr Pooh stand out of it.

So here's the final result. Click to enlarge.

References:

Saturday, December 24, 2011

How To Make Your Photos Look Professional (2)

Here's another trick of almost one step, which is called:

Cross-Processing:

This effect usually works fine with images that have a lot of colors, as it depends on manipulating the Red, Green, & Blue colors of the image.

I'll use this photo of the Nile.


Step 1: Add a Curves layer [Layer > New Adjustment Layer > Curves]. Then press OK.

Step 2: From the Channel drop-down box, select the Red channel and drag the top right of the curve a little to the left. Then drag a couple of points on the curve so that it forms a very gentle S — darkening the shadows and brightening the Red channel's highlights.


Step 3: Select the Blue channel and drag the curve's top-right point downward. It doesn't need to be much — just enough to take some blue out of the highlights. Then drag the curve's bottom-right point up a little, blocking up the Blue channel in the shadows.


Step 4: In the Green channel, add another gentle S curve — increasing the contrast, especially in the highlights.


Step 5: Change the Curves adjustment layer's blending mode to Color.


And here's the final result. Click the pic to enlarge.


Well, it almost depends on how much you control the channels curves, and your eyes trying to figure the best balance between the three colors. So, watch your hands & eyes ;)

References:

Thursday, December 22, 2011

How To Make Your Photos Look Professional

I'm still a believer that a good photo should be good enough for no photo editing whatsoever! Yet, I found myself sometimes need to make some precious shoots look much better.

So, I've googled for some tricks, and I found a lot for VERY nice ones ;). I'll share what I've leaned her. Each trick per post.

Here's one of the easiest ways to enhance the look of your photo. It' my favorite too :). I cal it...

The Filters:

I guess this technique would work better with photos of quite bad lightning. Where it would need some sharpen.

I'd use this photo of mine to apply the technique on.


This is the original photo without any editing, using a special effect in my camera to have those "spectra".

Step 1: Sharpen the image a bit using the Unsharp Mask [Filter > Sharpen > Unsharp Mask]. Use the values in the following screenshot.


Step 2: Add a Levels Adjustment layer [Layer > New Adjustment Layer > Levels]. When the Levels dialog opens, just click on Auto.


Step 3:  Add a Brightness/Contrast Adjustment layer [Layer > New Adjustment Layer > Brightness/Contrast]. Set the values as in the following screenshot.


Step 4: Add a Hue/Saturation Adjustment layer [Layer > New Adjustment Layer > Hue/Saturation]. Set the values as in the following screenshot.


Step 5: Add a Photo Filter Adjustment layer [Layer > New Adjustment Layer > Photo Filter], with the default Warming(85) setting.
Aside: Here, I usually change it to "Color". My favorite color that I usually use is "White". So, it's quite up to you to use whatever you like.


& we're done!!!
Can you see the difference? (Click the picture to enlarge. The original is the right one, the modified is the left one).


Reference:

    Wednesday, December 21, 2011

    The Pet Projects - An Idea For Ideas!


    While reading “Agile Product Management With Scrum” book, I found the following paragraph -under “Techniques For Creating Vision” section- very interesting. It says:

    “At companies like Google, developers are encouraged to spend 20% of their time on “pet projects.” Those private research projects result in new ideas implemented as prototypes. The results justify Google’s investment: Half of all products released by Google in the last six months of 2005 started as pet projects (Mayer 2006). The developers who cam up with the original idea continue to work on the project that brings the product to life, as in the case of the Google’s Chrome browser. Ben Goodger & Darin Fisher, two of the engineers who came up with the original prototype, played an important role on the Chrome development project (Levy 2008). Ken Schwaber (2007, 80) favor this approach to developing new ideas:

    I recommend you set aside a part every employee’s time to pursue activities that are outside their current Scrum teams & that benefit the enterprise. I recommend an allowance of 20 percent of their time. Let people coalesce into interest groups where they work together. Some of this can be spent working with peers in sustaining & enhancing functional expertise. Some of the work can be researching & prototyping new ideas. The yellow sticky notes of 3M & Gmail at Google were developed this way. ”

    I looked up for more info about the “pet project”, & I found this article with more detials about the idea. I’d liket to excerpt those few paragraphes here:

    “According to 3M’s Web site, the company has an “unstoppable commitment to innovation, creating new technologies and products.” From this commitment came the invention Post-It Notes, back in 1977, which was a personal project of one of its researchers.”

    “The day-to-day work week can sometimes become dull and uninspiring, so by having a fun, inspiring personal project to work on, employees can reenergize themselves to keep working on their daily tasks.”

    “Try implementing a program like this at your company—even for a couple months—to see the kind of response you get from it. You may be completely surprised (and have some great new company projects to brag about!).

    Though often very difficult for employers to swallow—employees already complete personal tasks on company time, approved or not. A recent survey from Salary.com found that the average worker frets away about two hours per day, not including lunch.

    So since it’s happening anyhow, your company might as well benefit from it.”

    Well, I think this might be a quit good idea for coming up with new project ides for almost any thing! Just think big... & act small ;)

    Tuesday, December 20, 2011

    Batch (Bulk) Image Editing Using Photoshop

    In this post, I'll do what exactly I wanted to do at the previous post, but this time using Photoshop.

    Initially, I admit that GIMP is a bit easier than Photoshop here!!

    Anyway, to resize the images, we will use two functions called "Actions" & "Batch".

    Create a New Action:
    • Navigate to Window > Action from the main menu to display the Action window.
    • Create a new Action. 
    • Click Record when you’re ready to begin recording your new Action.
    • At this point, apply the edits that you routinely do to your image: resizing, applying filters, save to web, etc. 
    • In our case here, simply open a photo, click "save as", & minimize the quality of it; then "close" it.
    • When you’re done, click the Stop Playing/Recording button in the Action window. 
    Edit Multiple Pictures with a Batch:
    • To apply your Action to a Batch, click File > Automate > Batch from the main menu.
    • A new window will appear that shows all of the Batch settings you’ll configure. The most important settings are which Action to apply, where the images you want to edit are stored, and where to save the edited images. Note that you must apply a Batch to all photos within a folder. 
    More detailed tutorials:

    Monday, December 19, 2011

    Batch (Bulk) Image Editing Using GIMP

    Taking a lot of images with a high resolution camera, is a great fun! But saving them on a limited disk space, or uploading them on any photo hosting site is a great headache!

    I've been suffering from the tedious process of re-sizing my images to convert the 3+MB image to 300+KB image!

    I've googled how to do so using GIMP, & it's pretty easy. Just download DBP Plugin. DBP is a simple batch processing plugin for the Gimp - it allows the user to automatically perform operations (such as resize) on a collection of image files.

    Since I'm in a Windows environment, I'v just downloaded and unzip the file, and copy dbp.exe into the plugins folder.

    The batch editing window is really easy. Navigate to it from the Filters menu in the main Gimp window, select Batch Process... to bring up the DBP window. The processing steps are laid out on a series of pages, one for each step.

    I liked that!! :)

    More Resources:
    http://members.ozemail.com.au/~hodsond/dbp.html
    http://www.makeuseof.com/tag/use-gimp-to-batch-edit-your-images-windows-specific-instructions/

    Sunday, November 27, 2011

    Seven Habits of Highly Effective Websites!

    I came cross this article some time ago. & I liked it! I'll quote some of it here.

    Habit # 1: Be Proactive: 
    Covey talks about this habit in the following words: 
    “Your life doesn't just ‘happen’. Whether you know it or not, it is carefully designed by you. The choices, after all, are yours. You choose happiness. You choose sadness. You choose decisiveness. You choose ambivalence. You choose success. You choose failure. You choose courage. You choose fear. Just remember that every moment and every situation provides a new choice. And in doing so, it gives you a perfect opportunity to do things differently to produce more positive results. Being proactive is about taking responsibility for your life. You can't keep blaming everything on your parents or grandparents. Proactive people recognize that they are response-able."
    In the user-experience world, this is the responsibility of the website managers. Web managers can be proactive by making user centered choices about their websites. Either they can react to the business’s demands for feature and content overload, or they can be proactive by understanding their audiences, their feedback and needs, and by making sure that the website meets the needs of the users. 

    Every user-experience project starts with proactive website managers, who choose to make the website better. This is a case of top-down vs. bottom-up management. If you let the changes come to you, you end up taking orders for the business units in your organization. If you set the direction, define the standards and ask business units to meet them, you end up leading rather than following. 

    Habit # 2: Begin With End In Mind
    As Covey says, habit two is based on imagination — the ability to envision what you cannot see with your eyes at the outset. It is based on the principle that all things are created twice. There is a mental, or first creation and a physical, or second creation. The physical creation follows the mental, just as a building follows a blueprint.

    In UX projects, we use this habit in many different ways. We set up visioning workshops with the business’s stakeholders. We create a common vision, where the user is playing an important role. 

    Our back-casting exercises are somewhat like beginning with the end in mind. We see where the project is going to be when it’s finished and then define the steps that will get us to that endpoint. The wireframes are the blueprints of the future website. They are how we make the future visual. 

    It’s also important for teams to set objectives, or at least overarching design goals. For web teams, we see setting business objectives (and measuring performance) as a key way for them to get out of the rut of merely being content managers. 

    Habit # 3: Put First Things, First: 
    In user-experience projects, prioritization activities are very important. Priorities are established based on the users’ needs. This is a very healthy habit for a successful website. Ask yourself this question whenever a new request for content or feature on the website comes along: Who does it benefit? Does it benefit your customers/stakeholders and your business equally? Another thing to look for is whether new content or functionality benefits the organization as a whole or just the person who’s recommending the change.

    Covey says, “To live a more balanced existence, you have to recognize that not doing everything that comes along is OK. There's no need to overextend you. All it takes is realizing that it's alright to say no when necessary, and then to focus on your highest priorities.”

    So, It’s OK to question a request that will make your website fall out of a good habit. This decision becomes really easy when you understand the value of that feature and content. 

    Habit # 4: Think Win-Win: 
    Think Win-Win isn't about being nice, nor is it a quick-fix technique. It is a character-based code for human interaction and collaboration. 

    In user-experience practices, we are not just advocating for the users. We are also advocating for the business’s requirements. We bring both of them value. So it’s important to have a good understanding of the business, and then to align your functionality so that your user needs and business needs are met. 

    Habit # 5: Seek First To Understand, Then To Be Understood: 
    It’s one of the basic underlying techniques in the user-experience field. We use this technique liberally during our user research, and design phases. It’s a very important habit in the UX field. Researchers and designers use different techniques and methodologies to first understand the users. They then use that understanding to help the business be understood. 

    Most of the time, we’re not experts in the business. In fact we might start a project without knowing anything about the business. So it’s critical we keep our eyes and ears open so that we can design an appropriate solution. On the other side of this equation, we’re almost always surprised by what users actually do. We may have done hundreds of usability tests on a product and we can still find something interesting about the 101st participant.

    Habit # 6: Synergize: 
    Covey explains this habit this way: 
    “Synergy means ‘two heads are better than one.’ Synergizing is the habit of creative co-operation. It is teamwork, open-mindedness and the adventure of finding new solutions to old problems.”
    We view this habit often in user-experience project teams. We work with a group of people to make the website better. That group usually includes a business analyst, researcher, technical architect, user specialist, designer, project manager, etc.

    It’s the case with UX projects teams. Technical and business teams cannot be effective without UX teams and UX teams cannot be fully effective without engaging technical and business teams.

    Habit # 7: Sharpen The Saw:
    The last but not the least habit Covey recommends for highly effective people is to sharpen the saw, by taking time off from the daily routine, learning something new, taking a break and coming back more effective. It’s about constantly reflecting on you and improving your skills and habits.

    In terms of website and user-experience practices, it’s important to know that your job is not done once the site is designed or redesigned, and launched. You constantly need to reflect on and evaluate your site, and to keep on improving it. 

    It’s much better to do ongoing evaluation, and get creative about ways the site can be improved. But it takes a lot of discipline, and that’s really the hard part. 

    Conclusion:
    Whether you have already adapted these UX habits or are getting to know them, remember this sentence from Covey: 
    “We at first make the habits and then habits make us.”
    The sooner you start thinking about your websites in terms of these habits, the sooner you’ll be known in terms of your great habits!

    My Conclusion:
    Most of those habits I've practiced them already myself, and I got much better results. They are very recommended for any websites manger, developer, designer, or administrator.

    References:

    Wednesday, September 28, 2011

    Remove Page Titles from Panels - Drupal Theme

    There may be times when you want to remove a page title from a page, but leave it as the meta title. By default, Drupal will display the node title in the h1 tag. If you take a look at page.tpl.php, you will see it there. In most themes, it will look something like this:

    <?php if ($title): ?>
    <h1 class="page-title"><?php print $title ?></h1>
    <?php endif; ?>


    Now you may be asking why on earth would I want to remove the main page title? I will give you an example. The Panels module gives you the ability to set a title for a panel page. This title will appear in the main h1 on the page and also in the meta title tag (across the top of the browser). Because Panels brings in content from other places such as views, blocks or nodes, you may not actually want this title on the page, as each mini panel may have its own title. Sure, you can just leave the title field blank, or set it to no title. However, what if you want to keep the title for the meta title tag, but not have that title displayed in the main h1? Panels doesn't give you the ability to do that out of the box.

    Removing the title and h1 solution
    1) Make a list of the paths for the Panel pages
    2) Go to the theme's template.php file
    3) Find the pre process function for pages. If this doesn't exist, create on as such:

    /** 
       * Hook_preprocess_page(). 
       */ 
      function theme_name_preprocess_page(&$vars) { 
      }

    4) Add the following switch statement to the preprocess function:
    In this example, I will assume the following is a list of URLs for the Panel pages where I want the title removed:
    http://www.example.com/page/foo
    http://www.example.com/page/fi
    http://www.example.com/section/zoo
    http://www.example.com/bart

    //Remove title variable from certain Panel pages 
      switch (true) { 
          case arg(0) == 'page' && arg(1) == 'foo': 
          case arg(0) == 'page' && arg(1) == 'fi': 
          case arg(0) == 'section' && arg(1) == 'zoo': 
          case arg(0) == 'bart':  
             unset($vars['title']); 
             break
       }

    In the switch statement, if the case returns TRUE, then the code to unset the page title will be executed. Therefore, for those pages, the title will be removed totally from the page. Because the title variable is unset, the main h1 element will also not appear.

    Therefore, because $title has been unset, the condition here will return false, and the h1 element will not be displayed. But it will remain as a meta title, which is exactly what we want.

    Full article:

    Friday, July 22, 2011

    Two Years Experience!

    Two years since my graduation in July 2009. Yet, for me, it all like just yesterday! Can't believe it's whole TWO YEARS!!..


    Anyway, after my first week at my first job (Aug. 2009), I wrote down some thoughts, that ware highlighted in my mind back that time. In May 2010, after my first week in my second job; I added more thoughts to my list. And I wrote: "... I know that one day, I'll pass by this blog old posts, and I'll pass by this post, and it'll make me recall some serious staffs that I'd have already forgotten!!! (actually it happens so often)..."

    And what I expected, just happened! Every time I pass by my list, I do remember a LOT. So, I decided to share it with the public:

    1# Be yourself!

    2# Be yourself!!

    3# Do NOT pretend to be someone else. i.e., just BE YOURSELF!!!!!


    4# Do believe in your abilities. I recall a word that Eng. Khaled Al-Kady used to say to us "Our problem is that we think that we can do NOTHING! But, indeed, we can do ANYTHING!"



    5# Do NOT EVER EVER EVER let go of your OWN dreams, whatever the temptations are (Big company, great salary, I have just to get a job, etc).

    6# Take care of every course, topic, technology you pass by. You'll need it later.

    7# Take extra care of people who pass by your life. One day, you might find yourself in one, and only one, project with some of them!!!!


    8# It's all about YOU! Your believes, thoughts ,dreams, and preincipels are the MOST important at all.

    9# (Work environment == Maze) && (You goals == The Cup)!! And as Dumbledore once said, at a Harry Potter Movie, "People change in the maze. Oh, find the cup if you can. But be very wary; you could just lose yourselves along the way".


    10# Do NOT fall in "fetna" easily!! aaah! "Fetna" at work is TOO much!! You need to specify exactly what you need, what you're looking for, and what will you get from this company.

    11# Remember those *teeeeeeeet* projects and assignments you've delivered?? OK, suck them away! They are NOTHING! YOU CAN DO ANYTHING. Nothing out there so complected that you cant' handle... by yourself ONLY.

    12# Enjoy your day ;). They're 8 loooooong hours after all.


    13# Watch extremely carefully your bosses and workmates. You'll learn too much from them, without they even notice :D

    14# Ask any question that you have in mind. Even if you feel it's stupid.

    15# Market yourself. Don't miss any chance to market about yourself. Use break times to talk about your experiences, your skills, your interests, your coming plans about learning something, or whatever. But, do it smartly. Don't be naive or gullible!


    16# Take it easy, and be friendly. But don't stress on yourself, or give up any of your rights.

    17# Keep learning. Aya has better words than me here :)


    18# And this's the mooooooooost important issue. Don't miss your best ever friends you have in your life. They are the one, and only one, source of endless inspiration and emotional, & technical support for your lifetime ;) :D


    19# It's totally ok to be not honest 100% with anyone in your life. But you have to, and must be 1000000% honest with yourself!! Fool anyone, but yourself!!!! You need her desperately. Share your strengths, weaknesses, fears, hopes, dreams, shortages, wishes together.

    20# Listen to that little voice coming from deep down your heart. Most probably it speaks the truth.

    21# Dare to break rules; as long as you don't harm someone else.

    22# Have courage to take risks when needed. Just make sure that you have no more options but taking risk.


    23# Plan, plan, plan, and plan!


    24# Take your time in thinking. Don't rush.

    25# Remember this Sami Yusuf's quote: "... All of this came about of me following my dream, being truthful with myself, not faltering or diverting when others have suggested a path I felt in my heart was wrong. Happiness and success come when you make sure you hold your ideals and dreams as sacred, and then I assure you anything and everything is possible to achieve in life..."

    That's all!.. For now.. I know that I've learned a LOT.. Yet, I still eager, keen, & yearning for more & more to learn & see.. & I know that I will.. En shaa Allah! :)

    Wednesday, June 15, 2011

    Facebook Social Plugins Module Doesn't Pick Proper Image From Drupal Post

    I faced an issue with Facebook Social Plugins module at my Drupal website; where the "Like" button used to not pick an proper image for my post. It picked  an icon image instead of the post main image, which was very annoying!!


    The most optimum solution for me was to have the post's main image. But, till this moment, I couldn't find a how-to solution. The solution I figured out now, is to have the site logo (or any default image) to be used.

    Well, Facebook Like button needs a og:image tag to use in sharing. Yet, no Drupal module (as mush as I know), offer that tag till this moment. So, we need a way to add that tag at our <head> tag.

    All what's needed is to add this piece of code at your theme template.php file:
    function YOURTHEMENAME_preprocess_page(&$vars, $hook) {
       drupal_set_html_head('<meta property="og:image" content="THE/PREFERRED/IMAGE/URL" />');
       $vars['head'] = drupal_get_html_head();
    }
    This will add the meta tag at every page & content type. In order to have it at a certain node type, all we need is an IF-statement:

    function YOURTHEMENAME_preprocess_page(&$vars, $hook) {
        if (!empty($vars['node']) && in_array($vars['node']->type, array('story'))) {
            drupal_set_html_head('<meta property="og:image" content="THE/PREFERRED/IMAGE/URL" />');
           $vars['head'] = drupal_get_html_head();
        }
    }

    It worked perfectly with me. Hope, one day, Drupal has a good module to manage Open Graph tags is a much better way :)


    Hint:
    I'm using:

    Links:



    Wednesday, March 23, 2011

    Install JSON PHP Extension on CentOs


    I needed to install JSON on a Centos 5.4 server with PHP 5.1.6 installed there. So, I tried those steps, and it worked fine. Very helpful article.

    NOTE: As of PHP 5.2, json extension is now standard. If you’re running PHP 5.2 or later, or like to upgrade instead, you can skip this!
       1. Ensure you have the necessary dependecies (php, php-pear, php-devel, gcc, make):
              * $ sudo yum install gcc make
        * $ sudo yum install php php-pear php-devel
       2. Use PECL (PHP Extension Community Library) to download the json package:
              * $ sudo pecl download json
       3. Use PEAR (PHP Extension and Application Repository) to extract and install the extension:
              * $ sudo pear install json-1.2.1.tgz
       4. Create a file in /etc/php.d called “json.ini”, and add the following lines:
              * ; php-json extension
        * extension=json.so
       5. Restart apache (gracefully if you’re running a live site:
              * $ sudo service httpd restart (apachectl graceful)
       6. Check for availability by creating an info.php file in the web root with the following line:
              * <?php phpinfo(); ?>
       7. Load info.php in your browser and check for JSON. You now should be all set, but if it doesn’t appear, verify all of the above steps very carefully.
    References: 
    http://www.itecsoftware.com/web-development/install-json-php-extension-on-centos-redhat 

    Sunday, February 6, 2011

    When a Developer Demonstrate! (2)


    Well, as a developer, documentation is something very important. Who on earth could ever imagine that IT would lead to such "evolution"!! All credit to the new age language :) ...

    Saturday, February 5, 2011