Multiple Images to PDF Presentation / Multi-Page Document Using Photoshop

As all we know, you can save a single image into PDF format using Photoshop by hitting ctrl+shift+s then save as Photoshop PDF. But many of us still don’t know that you can save multiple images into a PDF Presentation / Multi-Page Document using Photoshop.

Here are the simple steps to do that…

1. Go to File>Automate>PDF Presentation.

2. Click ‘Browse’ then choose the Images you want to include.

3. Either choose ‘Multi-Page Document’ or ‘Presentation’ depending on your need. There are lot of options you can check to customize your output. You can sort the image files by name, you can include the each file’s file name, etc. Then after that, you can now click ‘Save’.

Add Contacts to Actionetics ClickFunnels from HTML or WordPress Site

Creating Your Optin Form

The basic requirements in order for this to work are the following:

  • Must use ClickFunnels Field Names
  • Must use the ClickFunnels Optin Page URL for the Form Action
  • Must use POST Method
  • Below is an example of code.
<form action="CLICKFUNNELS_PAGE_URL">
Email Address:
<input name="contact" type="text" />
Name:
<input name="contact[name]" type="text" />
Phone Number:
<input name="contact[phone]" type="text" />
<input type="submit" value="Submit" />
</form>

You may modify this code as you please, but you must replace CLICKFUNNELS_PAGE_URL with the Control Page URL for your ClickFunnels optin page in order for this to work correctly.

After you have created your optin form, you can embed it on any site.

Add smooth scroll functionality in your website

Here’s how to create scroll to any element on the page in your website. If you’re using WordPress or a static HTML, you don’t need to use a plugin. It’s very simple:

Just create a custom.js file in your website and paste the code below, this code will check if the href attibute of the anchor start with a sharp sign(#) and scroll the page to the target element

<script>
jQuery(function($) {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 500);
        return false;
      }
    }
  });
});
</script>

Additionally, if your website have a sticky header some of the content of the target element will go underneath the sticky header to avoid this we have to rewrite the code.

We have to get the height of the sticky header by adding this code

 var headerHeight = $(".stickyheader").height();

then we have to change this code

 scrollTop: target.offset().top

to this

 scrollTop: target.offset().top - headerHeight

this will subtract the sticky header height to the target offset

the final code should be like this

<script>
jQuery(function($) {
  $('a[href*=#]:not([href=#])').click(function() {
    var headerHeight = $(".stickyheader").height();
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - headerHeight
        }, 500);
        return false;
      }
    }
  });
});
</script>

If this steps are difficult I suggest to check wordpress plugin here https://wordpress.org/plugins/search/smooth+scroll/ that have the functionality you need. Goodluck 🙂

Moving W3 Total Cache CSS and JS to the footer

By default, W3 Total cache plugin does not provide any option to move CSS files to footer. It places the CSS files at the top of the page which results in render blocking the page. When we test the site on Pagespeed Insights, you will get the suggestion to remove the render blocking CSS and JS files.

Move W3 Total Cache CSS to Footer
Using the W3 Total Cache tag, we can easily move CSS and JS files to the footer by adding following code:

<!-- W3TC-include-css -->

Put above code before wp_footer(), so that our CSS to be loaded prior to our JavaScript files. This will move all Combined and Minified CSS Files to the footer.

Move W3 Total Cache JS to Footer
We can move JS files created by W3 Total Cache easily by choosing manual minify. This is to move JS files by inserting following code to the footer before the closing tag.

<!-- W3TC-include-js-head -->

Adobe Photoshop: Color Range

We often use magic wand or pentool to separate/isolate objects from its background. But sometimes it doesn’t go well using those tools.

Here is another way to remove the background of your images.

If you aren’t familiar with the Adobe Photoshop’s feature called “Color Range”… then you must try it! It will help you a lot in many ways not just by removing the background of your images 🙂

Open your image. Go to Menu>Select>Color Range.

A pop-up dialog will appear like in the image below.

Click on the background of the image. Color picker will be the appearance of your cursor once you hover outside the pop-up dialog.

Hold shift while clicking on the background to add the range of color to the selection. You will notice in the preview that there are white and black areas. White areas are the selected portions of the image vice versa. You  can change the preview mode in the Selection preview dropdown.

You can adjust the fuzziness to your preference to adjust the range of the color selection but for me I will set the fuzziness to 40. You can also check Localized Color Clusters for better selection.

After that, click Ok. The selection will appear like this.

You can refine your selection in various ways by using refine edge functions but that’s a different topic so I won’t be explaining it too further.

Hope you’ve learned something new again by reading this tutorial. Thank you for reading! 🙂