Photoshop Tutorial How to Create a Lightning

Photoshop Tutorial How to Create a Lightning

This Photoshop tutorial go through some really basic and important Photoshop techniques while showing you how to create a fearsome lightning bolt from scratch. You will be using Filters, Adjustment Layers and much more  to create the lightning effect.

Step 1: Create Lightning

a) Create a new document e.g. 600x600px

b) Create a new layer and name it Lightning

image

c)Open the Gradient editor (Type G and click on the gradient in the top left corner) and create a black and white gradient with a narrow gray area as shown below:

Gradient

d) Paint the document with a linear gradient. The more narrow the grey area is the more clean the lightning will be so don’t make it too narrow.

image

e) Next make sure you have selected black as foreground and white as background

image

Then goto Filter > Render > Difference Clouds. Feel free to undo and redo to get the lightning effect you want:

image

f) Notice the main black line through the middle. This will be your lightning bolt. But to isolate it, you first invert (Image > Adjustments > Invert or Ctrl+I) it:

image

f) Add a new Adjustment layer with levels. You could also apply the levels directly but really in this tutorial you may need the flexibility later to fix the levels

image

g) You should adjust the levels to increase the intensity of the lightning.

image

Step 2 Add Color

a) Create a new layer and paint it with a blue gradient

blue gradient

b) Set the blending mode to overlay

image

c) Create another layer and call it Red Light. Then set the layer blending mode to soft light. Select a soft, big round brush and paint some lights with  a red, yellow and/or a violet color

image

d) If you want to intensify the lightning even further I recommend you add an adjustment layer for Curves and Hue/Saturation. Set the Curves first. Individual settings for your setup may be needed.

image

Than only adjust the Lightning a bit down in the Hue/Saturation layer

image

The Result – Lightning Created in Photoshop

image

Embroidery Effect with Illustrator and Photoshop

I have received quite a few emails asking me how to create a embroidery effect in Photoshop. It is a really nice effect and I had no idea how to do that in Photoshop. So one of these days while running I sort of had this idea of using the Scribble effect in Illustrator and then going to Photoshop to make it look real. After giving it a try I got a very nice result and that is what I share with you today.

So for this tutorial I will show you how to create a embroidery effect using Illustrator and Photoshop. The whole process is quite simple and it will take an average of 45 minutes to get it done.

Step 1

Open the logo or shape you want to apply the effect in Illustrator. In my case I am using the Abduzeedo logo, the 2011 version.

Embroidery Effect with Illustrator and Photoshop

Step 2

Select the shapes and go to Effect>Stylize>Scribble. The Scribble Options will open and you will be able to customize the settings. The Abduzeedo logo has a sort of 3D effect, so I used different angles for the Scribble direction.

Embroidery Effect with Illustrator and Photoshop

Step 3

Now it’s time to go to Photoshop. The first thing to do here is to find a really cool texture. The one I am using is courtesy of Shutterstock and you can find it at http://goo.gl/PNAHF

Place the texture in your design. Again, the texture is really important to make your design look real.

Embroidery Effect with Illustrator and Photoshop

Step 4

Copy the logo from Illustrator and paste it in Photoshop. I aligned it in the center of my canvas.

Embroidery Effect with Illustrator and Photoshop

Step 5

Go to Layer>Layer Styles>Inner Shadow. For the Blend Mode use Color Dodge with white for the color at 45% Opacity. For the Angle use 90º, 3 pixels for the Distance, 0% Opacity and 3 pixels for the Size. Also for the Contour use the one I used in the image below.

Embroidery Effect with Illustrator and Photoshop

Step 6

Select Inner Glow. For the Blend Mode use Linear Burn with black for the color at 40% Opacity and 0% Noise. Change the Size to 8 pixels and keep the rest as it is.

Embroidery Effect with Illustrator and Photoshop

Step 7

Duplicate the layer once and move it up a few pixels and to any size a few pixels as well.

Embroidery Effect with Illustrator and Photoshop

Step 8

Duplicate the layer a few more times and move it to the sides and up and down. The idea is make it look less uniform. After that select all layers and merge them (Layer>Merge Layers)

Embroidery Effect with Illustrator and Photoshop

Step 9

Go to Layer>Layer Styles>Drop Shadow. Use black for the color with Color Burn for the Blend Mode and 50% Opacity. For the Angle use 120º, for the Distance keep 0, for the Spread use 0% and for the Size use 15px.

Embroidery Effect with Illustrator and Photoshop

Step 10

Select Inner Glow and then for the Blend Mode use Color Dodge at 50%, white for the color, Center for the Source, 0 for the Choke and 40 pixels for the Size.

Embroidery Effect with Illustrator and Photoshop

Step 11

This is the result after the layer styles. The whole idea is to create the highlight and the depth that we always see on the embroidery effects.

Embroidery Effect with Illustrator and Photoshop

Step 12

Here I added the Abduzeedo word with the custom font with the same effect. Just repeated the previous steps.

Embroidery Effect with Illustrator and Photoshop

Step 13

Select all layers and duplicate them. After that go to Layer>Merge Layers. You can use the keyboard shortcut for that Command (mac)/Control (pc) + Shit + Alt + E. Then go to Filter>Blur>Gaussian Blur. Change the Blend Mode to Screen.

Embroidery Effect with Illustrator and Photoshop

Conclusion

Go to Layer>Layer Mask>Hide all then with the Brush Tool (B) and a very soft brush with white start painting in the center to make that area visible.

As you can see the technique is pretty simple, it’s all about some layer styles and the Scribble effect in Illustrator. There’s also another ways to do that, like with custom brushes, but I think the scribble filter does a really good job for a quick result with nice realism.

Embroidery Effect with Illustrator and Photoshop

Download the Photoshop File

Click here to download the Photoshop file used for this tutorial

About the author

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. You can get in follow us via Twitter at@abduzeedo

Create a Settings Page For Your WordPress Theme

Creating your own theme for WordPress is a great way to give your blog or other WordPress powered web site an original touch. But even the nicest looking theme is not that nice if you have to get under the hood and edit the theme’s HTML or PHP code whenever it’s time change some aspects of it. Especially, when it’s not you but a paying customer using your theme. Luckily, creating a settings page for your theme in WordPress is not very hard, and after reading this tutorial, you will be able to create one in no time!

 


Step 1 Deciding What Settings Are Needed

It all starts from the need: to create a clear and useful settings page, you have to figure out the things that will need to be changed and leave out everything else. Every new setting you add to the admin menus adds complexity to the user interface and risks making the theme harder to use. That’s why it’s better to be careful and handpick the options that are going to be changed often and leave out one time customizations that can easily be done changing one file inside the theme.

Another question to keep in mind is “Who is going to be changing these settings?” If the user is familiar with PHP and WordPress, it might be reasonable to expect that she is OK with embedding her Google Analytics code in the code herself, but you shouldn’t require that from a graphic designer, not to mention a writer who doesn’t even need to know anything about HTML and CSS.

Common ideas for things to define in theme settings include:

  • The site’s Google Analytics tracking code
  • The number of sidebars and their positioning (left, right, maybe even up and down)
  • Page width
  • The contents of your footer
  • Options for features that are specific to the theme, such as custom teaser formats.

Once you have collected the list of theme features that you’d like to control through a settings page, you are almost ready to start the implementation. Before you move on and create your settings page, you can save time by making sure that there isn’t a WordPress feature already available for the customization you have in mind. Widgets, custom menus, custom backgrounds and header images are all useful tools for making your theme customizable with a lot less work than required for creating your own settings. They are, however, topics for a different tutorial.

Settings Created in This Tutorial

For this tutorial, I dreamed up a theme front page that consists of a grid with a varying number of featured posts that can be picked, edited and reordered by the admin using a custom settings page.

In the editor, the front page elements will be presented as a list of elements to which new ones can be added using JavaScript and jQuery.

I like to be able to preview the admin page in the WordPress admin as I design the HTML, so I usually start by linking a settings page to WordPress, and only then move to designing the contents of the page. That’s why, our next step is creating a placeholder settings page and hooking it to WordPress.


Step 2 Hooking the Settings Page to WordPress

Creating a settings page starts by creating a function that sets up the menu and hooking it to the WordPress action admin_menu. This tells WordPress to call your function when its time to create the menus so that everything is done at its proper time. Add this code to your theme’s functions.php file:

  1. function setup_theme_admin_menus() {
  2.     // We will write the function contents very soon.
  3. }
  4. // This tells WordPress to call the function named “setup_theme_admin_menus”
  5. // when it’s time to create the menu pages.
  6. add_action(“admin_menu”, “setup_theme_admin_menus”);

We’ll now put the code for creating the settings pages inside the function we just created.

When creating your settings page, you have the choice of either adding the page as a submenu to one of the existing settings groups or of creating your own top level menu.

Adding a submenu is done with the function add_submenu_page:

  1. <?php add_submenu_page($parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function) ?>
  • $parent_slug is a unique identifier for the top menu page to which this submenu is added as a child.
  • $page_title is the title of the page to be added
  • $menu_title is the title shown in the menu (often a shorter version of $page_title
  • $capability is the minimum capability required from a user in order to have access to this menu.
  • $menu_slug is a unique identifier for the menu being created
  • $function is the name of a function that is called to handle (and render) this menu page

If you choose to add the menu page as a submenu to one of the WordPress groups, you can use the following values as the $parent_slug parameter:

  • Dashboard: index.php
  • Posts: edit.php
  • Media: upload.php
  • Links: link-manager.php
  • Pages: edit.php?post_type=page
  • Comments: edit-comments.php
  • Appearance: themes.php
  • Plugins: plugins.php
  • Users: users.php
  • Tools: tools.php
  • Settings: options-general.php

The Appearance group looks like a good candidate for placing our settings page. Let’s try that, and create our first settings page. Here’s an updated version of our menu setup function:

  1. function setup_theme_admin_menus() {
  2.     add_submenu_page(‘themes.php’,
  3.         ‘Front Page Elements’, ‘Front Page’, ‘manage_options’,
  4.         ‘front-page-elements’, ‘theme_front_page_settings’);
  5. }

We still need to create the function theme_front_page_settings for this to work. Here it is in its simplest form:

  1. function theme_front_page_settings() {
  2.     echo “Hello, world!”;
  3. }

And this is how it looks in action:

We also need to check that the user has the rights required for editing the settings page. To do that, add the following code at the beginning of the settings page function:

  1. // Check that the user is allowed to update options
  2. if (!current_user_can(‘manage_options’)) {
  3.     wp_die(‘You do not have sufficient permissions to access this page.’);
  4. }

Now, if a user who isn’t allowed to manage options comes to the settings page, she will see nothing but the message, “You do not have sufficient permissions to access this page.”

If your theme needs multiple settings pages, it can be confusing for the user to look for them scattered all around the menu structure. In that case, creating your own settings group makes it easier for the theme user to find all the menu pages for the theme.

To add your own settings group, you need to create a top level menu page and link the submenu pages to it. Here is a new version of our menu setup function. The add_menu_page function used to create the top level menu is similar to add_submenu_page except that it doesn’t take the $parent_slug parameter.

  1. function setup_theme_admin_menus() {
  2.     add_menu_page(‘Theme settings’, ‘Example theme’, ‘manage_options’,
  3.         ‘tut_theme_settings’, ‘theme_settings_page’);
  4.     add_submenu_page(‘tut_theme_settings’,
  5.         ‘Front Page Elements’, ‘Front Page’, ‘manage_options’,
  6.         ‘front-page-elements’, ‘theme_front_page_settings’);
  7. }
  8. // We also need to add the handler function for the top level menu
  9. function theme_settings_page() {
  10.     echo “Settings page”;
  11. }

If you test the code and refresh the WordPress admin, you’ll see your new menu group appear at the bottom of the menu list:

But something doesn’t look quite right yet. Clicking the top menu element doesn’t lead you to the “Front Page” menu but a menu page called “Example theme.” This is not consistent with how the other WordPress menus function, so let’s do one more thing: by changing the $menu_slug attribute in theadd_submenu_page call to the same value as in the top level menu, we can link the two menus so that selecting the top menu selects the front page menu:

  1. function setup_theme_admin_menus() {
  2.     add_menu_page(‘Theme settings’, ‘Example theme’, ‘manage_options’,
  3.         ‘tut_theme_settings’, ‘theme_settings_page’);
  4.     add_submenu_page(‘tut_theme_settings’,
  5.         ‘Front Page Elements’, ‘Front Page’, ‘manage_options’,
  6.         ‘tut_theme_settings’, ‘theme_front_page_settings’);
  7. }
  8. function theme_settings_page() {
  9. }

Looks better. If you want to still improve the looks of your menu group, there are two optional fields in theadd_menu_page function that you will find useful. Just add the values after the function name in the method call:

  • $icon_url specifies the URL of an icon for the top level menu.
  • $position specifies the position of your menu group in the menu list. The higher the value, the lower the position in the menu.

Step 3 Creating the HTML Form For the Settings Pages

Now that we have created the settings page, and it shows up nicely in the side menu, it’s time to start adding some content. So, let’s go back to the list of settings we had in mind, and draft a page for editing them.

In this tutorial, we need a field for defining how many elements should be listed on one row, and a list for defining the actual elements. To start from the easier, let’s create a text field for the number of elements on one row. Edit your settings page function:

  1. function theme_front_page_settings() {
  2. ?>
  3.     <label for=”num_elements”>
  4.         Number of elements on a row:
  5.     </label>
  6.     <input type=”text” name=”num_elements” />
  7. <?php
  8. }

When you reload your settings page, you’ll see the first settings field appear:

To make the settings page fit seamlessly in the WordPress experience and to give your plugin a professional touch, it’s a best practice to use the CSS classes and styles that WordPress uses in its own settings pages. A good way to learn the tricks is to just go ahead and analyze the WordPress source code.

The most important thing is to wrap your setting page with a div with the class "wrap". Within that divelement, you can use many predefined styles such as headings, buttons, and form fields. Let’s start by styling the title of our settings page:

  • We will create a h2 heading for the page (You can use the heading tags from h2 to h6 to create headings with different sizes.)
  • We will show the theme settings page icon before the heading. (You can use the predefined WordPress icons with the screen_icon function. The function can take one of the following parameters: indexedituploadlink-managerpagescommentsthemespluginsusers,tools or options-general.)
  • We will put the input element inside a form and a table with the class form-table.
  1. function theme_front_page_settings() {
  2. ?>
  3.     <div class=”wrap”>
  4.         <?php screen_icon(‘themes’); ?> <h2>Front page elements</h2>
  5.         <form method=”POST” action=””>
  6.             <table class=”form-table”>
  7.                 <tr valign=”top”>
  8.                     <th scope=”row”>
  9.                         <label for=”num_elements”>
  10.                             Number of elements on a row:
  11.                         </label>
  12.                     </th>
  13.                     <td>
  14.                         <input type=”text” name=”num_elements” size=”25″ />
  15.                     </td>
  16.                 </tr>
  17.             </table>
  18.         </form>
  19.     </div>
  20. <?php
  21. }

Next, it’s time to start adding the elements.

To do this, we’ll use jQuery as it makes things much easier than writing JavaScript by from scratch, and comes bundled with WordPress. If you have used jQuery before, there is just one thing to keep in mind: the$ notation that you would normally use with jQuery doesn’t work in WordPress — you have to type the whole word, jQuery instead.

First, we’ll create the element for editing the settings for one main page block to serve as a template for the elements that are added by the user. Add this code right between the closing table tag and the closing form tag right after it.

  1. <?php $posts = get_posts(); ?>
  2. <li class=”front-page-element” id=”front-page-element-placeholder”>
  3.     <label for=”element-page-id”>Featured post:</label>
  4.     <select name=”element-page-id”>
  5.         <?php foreach ($posts as $post) : ?>
  6.             <option value=”<?php echo $post-<ID; ?>”>
  7.                 <?php echo $post-<post_title; ?>
  8.             </option>
  9.         <?php endforeach; ?>
  10.     </select>
  11.     <a href=”#”>Remove</a>
  12. </li>

Now, it looks like this:

Now that we have our template, it’s time to hide it and create the JavaScript for using it to create new featured post rows to the settings page. Set the style for the li element above to display:none;

  1. <li class=”front-page-element” id=”front-page-element-placeholder” style=”display:none”>

Then, we’ll create a list for holding the front page elements as they are added, and a link that the user will click to add the new elements. I’m repeating the entire HTML so that you can clearly see where the changes go:

  1. <div class=”wrap”>
  2.     <?php screen_icon(‘themes’); ?> <h2>Front page elements</h2>
  3.     <form method=”POST” action=””>
  4.         <table class=”form-table”>
  5.             <tr valign=”top”>
  6.                 <th scope=”row”>
  7.                     <label for=”num_elements”>
  8.                         Number of elements on a row:
  9.                     </label>
  10.                 </th>
  11.                 <td>
  12.                     <input type=”text” name=”num_elements” size=”25″ />
  13.                 </td>
  14.             </tr>
  15.         </table>
  16.         <h3>Featured posts</h3>
  17.         <ul id=”featured-posts-list”>
  18.         </ul>
  19.         <input type=”hidden” name=”element-max-id” />
  20.         <a href=”#” id=”add-featured-post”>Add featured post</a>
  21.     </form>
  22.     <li class=”front-page-element” id=”front-page-element-placeholder”
  23.         style=”display:none;”>
  24.         <label for=”element-page-id”>Featured post:</label>
  25.         <select name=”element-page-id”>
  26.             <?php foreach ($posts as $post) : ?>
  27.                 <option value=”<?php echo $post->ID; ?>”>
  28.                     <?php echo $post->post_title; ?>
  29.                 </option>
  30.             <?php endforeach; ?>
  31.         </select>
  32.         <a href=”#”>Remove</a>
  33.     </li>
  34. </div>

In a real-life theme it’s a good practice to put your JavaScript code in a separate file, but to make this tutorial a bit easier to follow, I am now adding the JavaScript in the same function with the HTML above, right before the wrap div:

  1. <script type=”text/javascript”>
  2.     var elementCounter = 0;
  3.     jQuery(document).ready(function() {
  4.         jQuery(“#add-featured-post”).click(function() {
  5.             var elementRow = jQuery(“#front-page-element-placeholder”).clone();
  6.             var newId = “front-page-element-” + elementCounter;
  7.             elementRow.attr(“id”, newId);
  8.             elementRow.show();
  9.             var inputField = jQuery(“select”, elementRow);
  10.             inputField.attr(“name”, “element-page-id-” + elementCounter);
  11.             var labelField = jQuery(“label”, elementRow);
  12.             labelField.attr(“for”, “element-page-id-” + elementCounter);
  13.             elementCounter++;
  14.             jQuery(“input[name=element-max-id]”).val(elementCounter);
  15.             jQuery(“#featured-posts-list”).append(elementRow);
  16.             return false;
  17.         });
  18.     });
  19. </script>

The JavaScript code above creates a function that is called when the user clicks the link with id add-featured-post. This function clones the template list item we created earlier and updates its fields to have unique ids and names. This way they will all be properly sent with the form when the user clicks submit. The variable elementCounter contains the next id to add. It is also saved in a hidden field so that when the form is submitted, we know how many front page elements to expect.

If you click the “Add featured post” link a couple of times, you’ll see hownew elements are added to the list:

But when you click on the remove link, you’ll notice that nothing happens. Let’s add a function for removing elements from the list:

  1. function removeElement(element) {
  2.     jQuery(element).remove();
  3. }

We also need to call to the function. Add the following code right before incrementing elementCounter.

  1. var removeLink = jQuery(“a”, elementRow).click(function() {
  2.     removeElement(elementRow);
  3.     return false;
  4. });

Before moving on to saving the form, there is one more thing to do. We’ll use the ui.sortable jQuery plugin to make the front page elements sortable by dragging them on the page. To enable the sorting functionality, we’ll need to include the proper JavaScript file (which also comes bundled with WordPress). This can be done by adding the following line of code at the end of functions.php:

  1. if (is_admin()) {
  2.     wp_enqueue_script(‘jquery-ui-sortable’);
  3. }

Then, we’ll add the following JavaScript right before (or after) the jQuery("#add-featured-post").click function defined above.

  1. jQuery(“#featured-posts-list”).sortable( {
  2.     stop: function(event, ui) {
  3.         var i = 0;
  4.         jQuery(“li”, this).each(function() {
  5.             setElementId(this, i);
  6.             i++;
  7.         });
  8.         elementCounter = i;
  9.         jQuery(“input[name=element-max-id]”).val(elementCounter);
  10.     }
  11. });

This snippet makes the list sortable and adds an event that is called whenever the user finishes sorting. The event handler updates all the ids in the elements so that the new order is preserved also when saving the form (this will become clearer once we implement the saving). When writing this stop handler, I noticed that the code for setting the id for the contents of the template was duplicated in two places so I refactored it into its own function, which I placed right before theline with jQuery(document).ready():

  1. function setElementId(element, id) {
  2.     var newId = “front-page-element-” + id;
  3.     jQuery(element).attr(“id”, newId);
  4.     var inputField = jQuery(“select”, element);
  5.     inputField.attr(“name”, “element-page-id-” + id);
  6.     var labelField = jQuery(“label”, element);
  7.     labelField.attr(“for”, “element-page-id-” + id);
  8. }

With adding new elements, sorting them, and removing them working, it’s time to move on to saving the data. But before that, add a submit button right before the form’s closing tag.

  1. <p>
  2.     <input type=”submit” value=”Save settings” class=”button-primary”/>
  3. </p>

Step 4 Saving the Form

The settings page looks good, but there is something missing: it doesn’t do anything yet. It’s time to save some data. WordPress provides an easy system for saving theme and plugin settings as key value pairs to the database using two functions: get_option and update_option. The data stored using the functions can be as simple as a number value or as complex as an array nested multiple times.

The handling of the form is done in the same function that renders the form. To know whether a form was submitted or not, we add a hidden field, update_settings to the form and then check whether that field was sent or not in the handling function.

  1. if (isset($_POST[“update_settings”])) {
  2.     // Do the saving
  3. }

The hidden field that goes inside the form looks like this:

  1. <input type=”hidden” name=”update_settings” value=”Y” />

Let’s start by saving the easier setting, num_elements. We’ll escape the attribute to make sure the user isn’t sending malicious content in the from of HTML tags and then save it to the WordPress settings storage. When using update_option, we don’t need to worry about whether the setting has already been saved or not.

  1. $num_elements = esc_attr($_POST[“num_elements”]);
  2. update_option(“theme_name_num_elements”, $num_elements);

Before we move to saving the list, let’s add the current value of num_elements to the settings form so that the user always sees what value she has entered in before deciding the next value. This will also help us test that the value was actually saved.

  1. <input type=”text” name=”num_elements” value=”<?php echo $num_elements;?>” size=”25″ />

And for cases where we haven’t saved anything yet, we’ll need to load the current value from options, so let’s add this piece of code to be executed when there is no form submitted.

  1. $num_elements = get_option(“theme_name_num_elements”);

When a form is saved, it’s important to notify the user so that she isn’t left wondering whether something happened or not. So, let’s render a simple notice saying “Settings saved.” right after the update_option:

  1. ?>
  2.     <div id=”message” class=”updated”>Settings saved</div>
  3. <?php

Then, let’s save the front page elements. The highest id value in the front page elements is passed in aselement-max-id, so we can take that value and loop through elements up to that id, saving their data into an array in the correct order:

  1. $front_page_elements = array();
  2. $max_id = esc_attr($_POST[“element-max-id”]);
  3. for ($i = 0; $i < $max_id; $i ++) {
  4.     $field_name = “element-page-id-” . $i;
  5.     if (isset($_POST[$field_name])) {
  6.         $front_page_elements[] = esc_attr($_POST[$field_name]);
  7.     }
  8. }
  9. update_option(“theme_name_front_page_elements”, $front_page_elements);

This saves the data, but we still need to present the values on the settings page. So, let’s do the same as with the num_elements field and load the default options in the beginning of the function:

  1. $front_page_elements = get_option(“theme_name_front_page_elements”);

And then, render the existing elements when doing the form:

  1. <?php $element_counter = 0; foreach ($front_page_elements as $element) : ?>
  2.     <li class=”front-page-element” id=”front-page-element-<?php echo $element_counter; ?>”>
  3.         <label for=”element-page-id-<?php $element_counter; ?>”>Featured post:</label>
  4.         <select name=”element-page-id-<?php $element_counter; ?>”>
  5.         <?php foreach ($posts as $post) : ?>
  6.             <?php $selected = ($post->ID == $element) ? “selected” : “”; ?>
  7.             <option value=”<?php echo $post->ID; ?>” <?php echo $selected; ?>>
  8.                 <?php echo $post->post_title; ?>
  9.             </option>
  10.         <?php endforeach; ?>
  11.         </select>
  12.         <a href=”#” onclick=”removeElement(jQuery(this).closest(‘.front-page-element’));”>Remove</a>
  13.     </li>
  14. <?php $element_counter++; endforeach; ?>

We also need to set the initial value for the elementCounter variable used in JavaScript by setting the hidden field’s initial value in PHP and reading it in when initializing the JavaScript variable:

  1. <input type=”hidden” name=”element-max-id” value=”<?php echo $element_counter; ?>” />

And the JavaScript part:

  1. var elementCounter = jQuery(“input[name=element-max-id]”).val();

Step 5 Using the Settings Inside the Theme

Saving and showing settings values within the admin area is great, but what really counts is how you use them to customize your theme, so now, we have come to the point where it’s time to take our settings and do something cool with them.

From here on, changes go to index.php instead of functions.php. First, we’ll read the options to variables:

  1. <?php
  2.     $num_elements = get_option(“theme_name_num_elements”);
  3.     $elements = get_option(“theme_name_front_page_elements”);
  4. ?>

Let’s loop through the $elements list, grouping them into rows with $num_elements blocks on each.

  1. <div id=”front-page-element-container”>
  2.     <div class=”front-page-element-row”>
  3.         <?php foreach($elements as $post_id) : ?>
  4.             <?php if ($num == $num_elements) : ?>
  5.                 </div>
  6.                 <div class=”front-page-element-row”>
  7.             <?php endif; ?>
  8.             <!– Render element here –>
  9.         <?php endforeach; ?>
  10.     </div>
  11. </div>

And then, using the data saved for each element, we’ll fill in the element rendering part above:

  1. <?php $element_post = get_post($post_id); ?>
  2. <div class=”front-page-element”>
  3.     <div class=”thumbnail-image”>
  4.         <?php if (has_post_thumbnail($post_id)) : ?>
  5.             <?php echo get_the_post_thumbnail($post_id, ‘tutorial-thumb-size’); ?>
  6.         <?php endif; ?>
  7.         <a class=”title” href=”<?php echo get_permalink($post_id); ?>”><?php echo $element_post->post_title;?></a>
  8.     </div>
  9. </div>

With a couple elements, it looks like this:

Still quite boring. The posts don’t have thumbnail images and there is no styling for them. To make them look better, let’s first add support for post thumbnail images. This is done by hooking a new function that sets up theme features to be called right after the theme has been loaded

  1. function setup_theme_features() {
  2.     if (function_exists(‘add_theme_support’)) {
  3.         add_theme_support(‘post-thumbnails’);
  4.     }
  5.     if (function_exists(“add_image_size”)) {
  6.         add_image_size(‘tutorial-thumb-size’, 200, 200, true);
  7.     }
  8. }
  9. add_action(‘after_setup_theme’, ‘setup_theme_features’);

The function, setup_theme_features turns on the post thumbnails using WordPress functionadd_theme_support so that WordPress adds this functionality to the post saving page. On the post’s page, we can now add one image as thumbnail by clicking on “Use as featured image” on the image upload page after uploading the photo.

The function also defines a new image size type, tutorial-thumb-size which is used when getting the post thumbnail in the rendering code.

After selecting the featured image, save the changes and reload the front page. Looks more interesting already:

Finally, we’ll add a few styles to style.css, and there we go, the theme has a configurable featured posts display:

  1. .front-page-element-row {
  2.     overflow: auto;
  3. }
  4. .front-page-element {
  5.     float: left;
  6.     margin: 10px 10px 10px 10px;
  7.     padding: 0px;
  8.     width: 200px;
  9.     height: 200px;
  10. }
  11. .thumbnail-image {
  12.     width: 200px;
  13.     height: 200px;
  14.     background: #eee;
  15.     position: relative;
  16. }
  17. .thumbnail-image .title {
  18.     position: absolute;
  19.     bottombottom: 20px;
  20.     display: block;
  21.     background: #000;
  22.     color: #fff;
  23.     padding: 10px;
  24.     font-family: Arial;
  25.     font-size: 12pt;
  26.     text-decoration: none;
  27. }

Conclusion

Now, we have created a settings page for a custom theme. The theme is far from complete, but I hope this introduction got you started with adding settings and customizable elements to your next WordPress theme.

Professional Modern Web Layout

This tutorial will show you how to create a modern web portfolio layout.

Create a new file (File>New) having 800×700 px and 72 dpi. Apply now the Paint Bucket Tool (G) to fill the background with color #131313

Create Professional Modern Web Layout in Photoshop CS

Using the Ellipse Tool (U), try to represent an element reserved for the site’s header to be that would have the white color.

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Outer Glow

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

Applying the previous instrument, try to make the next layer belonging to the site’s header, which corrections can be made with Convert Point Tool.

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Inner Glow

Create Professional Modern Web Layout in Photoshop CS

Blending Options>Gradient Overlay

Create Professional Modern Web Layout in Photoshop CS
Gradients parameters:

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

Make a copy of the new made layer and select the Free Transform option to narrow a little the copy and stretch it out a little the way it is shown below (change the layer’s parameters).

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Gradient Overlay

Create Professional Modern Web Layout in Photoshop CS

Gradient’s parameters:

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

Create a new layer having 20×20 px and 72 dpi and then apply the Rectangle Tool (U) about three times and turn over the copy with Free Transform option to create a kind of pattern of white color.

Create Professional Modern Web Layout in Photoshop CS
Create Professional Modern Web Layout in Photoshop CS

Save the Pattern!

Create Professional Modern Web Layout in Photoshop CS

Create a new layer and use on it the Rectangle Tool (U) to represent a wide stripe looking like a part of the site’s background.

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Gradient Overlay

Create Professional Modern Web Layout in Photoshop CS

Gradient’s parameters:

Create Professional Modern Web Layout in Photoshop CS

Blending Options>Pattern Overlay

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS
Make a copy of the recently created layer and select again the Free Transform option to move the copy to the right side and lift it up a little the way it is demonstrated on the picture.

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

Using the Rounded Rectangle Tool (U), represent the lowest layer reserved for the buttons’ panel on the site’s header’s menu, colored in #010101

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Outer Glow

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

Make a copy of the new made layer and select the Free Transform option to make it smaller a little and apply for this copy different parameters:

Create Professional Modern Web Layout in Photoshop CS
The layer’s parameters:
Blending Options>Gradient Overlay

Create Professional Modern Web Layout in Photoshop CS

Gradient’s parameters:

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

 

Using the Ellipse Tool (U), try to draw a flare on the right side of the buttons’ panel situated on the site’s header.

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Fill 0% on the layers.
Blending Options>Gradient Overlay

Create Professional Modern Web Layout in Photoshop CS

Gradient’s parameters:

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS
Press the Alt button and make a mouse’s click between the flare’s layer and the buttons’ panel for the flare to be applied in the limits of the buttons’ panel.

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

Make a copy of the new made layer and move the copy with Free Transform option on the left side of the buttons’ menu.

Create Professional Modern Web Layout in Photoshop CS

Select now the Rectangle Tool (U) to paint the lowest part of the site’s background in here shown color –#1A1A1A

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Outer Glow

Create Professional Modern Web Layout in Photoshop CS

Blending Options>Bevel and Emboss

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS
Choose the Rounded Rectangle Tool (U) to represent the lowest layer reserved for the site’s sections.

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Drop Shadow

Create Professional Modern Web Layout in Photoshop CS

Blending Options>Gradient Overlay

Create Professional Modern Web Layout in Photoshop CS

Gradient’s parameters:

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

Make a copy of the last made layer and apply again the Free Transform option to make the copy smaller the way it is demonstrated below and change the copy’s parameters too.

Create Professional Modern Web Layout in Photoshop CS
The layer’s parameters:
Fill 0% on the layers.
Blending Options>Stroke

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

Next we have to select two instruments and represent one more element belonging to the site’s header. Use firstly the Rectangle Tool (U) to create the primary layer and then click on the Alt button, selecting simultaneously theEllipse Tool (U) for two times to cut out the unnecessary elements.

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Gradient Overlay

Create Professional Modern Web Layout in Photoshop CS

Gradient’s parameters:

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS
We have to represent now another element belonging to the site’s header that must be placed upper than the previously made one. The operation in case needs the same Rectangle Tool (U).

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Gradient Overlay

Create Professional Modern Web Layout in Photoshop CS

Gradient’s parameters:

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

Using the Line Tool (U) on the right and left sides, try to make two vertical lines along the edges of the recently created stripe, colored in #8D8D8D

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS
Choose the Pencil Tool (B) to draw a double vertical line on the buttons’ panel, upper than the left flare.

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Blending mode-Soft Light

Create Professional Modern Web Layout in Photoshop CS

Make a copy of the new made layer and select the Free Transform option to place the flare upper than the flare situated on the right side.

Create Professional Modern Web Layout in Photoshop CS

Using the Ellipse Tool (U), draw now the primary layer, reserved for the site’s logotype.

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Outer Glow

Create Professional Modern Web Layout in Photoshop CS

Blending Options>Gradient Overlay

Create Professional Modern Web Layout in Photoshop CS

Gradient’s parameters:

Create Professional Modern Web Layout in Photoshop CS
Create Professional Modern Web Layout in Photoshop CS

Using the previous instrument, represent the next layer reserved for the logotype.

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Fill 0% on the layers.
Blending Options>Gradient Overlay

Create Professional Modern Web Layout in Photoshop CS

Gradient’s parameters:

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

Selecting the Ellipse Tool (U), try to make one more layer reserved for the site’s logotype, colored in #0A0F12.

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Stroke

Create Professional Modern Web Layout in Photoshop CS
Create Professional Modern Web Layout in Photoshop CS

Select the last applied instrument to draw now a flare on the logotype’s made element.

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Fill 0% on the layers.
Blending Options>Gradient Overlay

Create Professional Modern Web Layout in Photoshop CS

Gradient’s parameters:

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

Press the Alt button and make a mouse’s click between the layers for the flare to be applied in the limits of the primary layer.

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS
Select the Ellipse Tool (U) to draw the next logotype’s layer.

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Fill 0% on the layers.
Blending Options>Outer Glow

Create Professional Modern Web Layout in Photoshop CS

Blending Options>Inner Glow

Create Professional Modern Web Layout in Photoshop CS

Blending Options>Stroke

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

Next step includes creating a special section situated on the left side of the panel on the site’s sections. We’ll select the Rectangle Tool (U) for this operation.

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Fill 0% on the layers.
Blending Options>Gradient Overlay

Create Professional Modern Web Layout in Photoshop CS

Gradient’s parameters:

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

Make a copy of the new made layer and select the Free Transform option to turn over the copy and place it the way it is shown next picture.

Create Professional Modern Web Layout in Photoshop CS

Using three lines made of small points, try to mark the sections’ panel, keeping the demands from the tables below.

Create Professional Modern Web Layout in Photoshop CS

(the lowest line)

Create Professional Modern Web Layout in Photoshop CS

(the top lines, on the left and right sides).
The layer’s parameters are the same for the lines situated on the top and on the bottom
Blending Options>Drop Shadow

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS
Create Professional Modern Web Layout in Photoshop CS

Introduce after that the titles for the buttons situated on the site’s menu.

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

Write also the title of the site’s logotype, keeping the demands from the next presented table.

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Gradient Overlay

Create Professional Modern Web Layout in Photoshop CS
Gradient’s parameters:

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

Entitle the site’s sections, applying the demands from the next tables:

Create Professional Modern Web Layout in Photoshop CS

(about me)

Create Professional Modern Web Layout in Photoshop CS

(portfolio)

Create Professional Modern Web Layout in Photoshop CS

Insert the text in the section entitled “about me”, taking care of the demands from the next tables:

Create Professional Modern Web Layout in Photoshop CS

(the orange text)
Create Professional Modern Web Layout in Photoshop CS

(the rest of the text)

Create Professional Modern Web Layout in Photoshop CS

Insert the screenshots of our projects in the next section “portfolio”
The layer’s parameters are the same for all six screenshots.
Blending Options>Stroke

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

The last stage includes adding the site’s copyright:

Create Professional Modern Web Layout in Photoshop CS

Create Professional Modern Web Layout in Photoshop CS

Design a Professional Laptop Advert

By Tom

Step 1:

Open up a new document 1000px wide and 600px high. Then paste an image of a laptop into your document. Create a new layer set called ‘laptop’ and put the layer containing your laptop image into this layer set.

Step 2:

Now I want to create a vanishing point for the screen of the laptop. Many Photoshop users, including myself, don’t yet have Photoshop CS2 or CS3, so this tutorial won’t utilize the useful vanishing point filter available in these versions. Instead, we’re going to manually create a fake vanishing point.

Select the screen part of your laptop using the lasso tool. Then copy your selection, create a new photoshop document, and paste in the selection. Go to image>image size and double whatever your image size is. In this case the original screen was 204px wide, so I simply doubled this to 408px.

Then paste this new larger screen back into your original document. Positioning it roughly where you think it looks good in terms of perspective.

Step 3:

Now select your line tool and a nice bright color for it and draw lines each corner of your large screen through to the matching corner of the original screen and past to a vanishing point. Do this with each corner of the laptop screen, until you have something like the image below:

Step 4:

Now duplicate your larger laptop screen and select edit>free transform. Then in the menu near the top of your screen (see diagram below) change the W (width) and H (height) percentages from 100% to 90%.

Move this resized image so that it matches up with the perspective lines that you created earlier. Be sure to place this resized screen layer behind the largest screen layer but above your original laptop photo layer.

Repeat this process of duplicating/resizing/aligning using the resizing percentages of 80%, 70%, and 60% from your large screen layer. Remember that your original laptop photo is 50% of this large screen layer.

This is how your image should look after you have created this new screens and lined them up correctly:

Step 5:

Now create a new layer set called ‘photo 1′. Paste in the image that you want to manipulate. View a grid over your image and then use the free transform tool to resize your photo to fit nicely into the grid squares. Make sure that the photo fits into an even number of grid squares for it’s height and width. In this example the photo is resized to be 8 grid squares wide and 6 high.

Step 6:

Now duplicate your photo layer, as you want to retain a copy. Be sure to hide the duplicate layer and go back to your original. Select your single column marquee tool from your selection palette (it’s under the Rectangle and Elliptical marquee tools). Using your grid click the grid line that marks the center point of your image and delete a central 1px column. Then switch to the single row marquee tool and do the same to delete a 1px line across the center of your image. You want these lines to be a little larger than 1px though, so grab your magic wand tool and click somewhere outside of your photo image. This will select all of the area surrounding the photo, but also the 1px lines cutting through it. Then go to select>modify>expand and expand the selection by 3px. Then hit delete to achieve an effect like the image below:

Step 7:

Now hide all of your duplicate laptop screens except the smallest one (the one that is 60% of the size of your largest). With your photo layer selected (the one you’ve just cut up using the grid) go to edit>transform>distort and distort the photo so that it fits exactly over this smallest laptop screen image. To fit it well you make need to reduce the layer’s opacity to allow the screen underneath to show though. The image below shows the transformed photo layer at 57% opacity, allowing some of the screen underneath to show through. Be sure to move this photo layer below the next largest laptop screen layer, so that it is mostly covered by it.

Step 8:

Now go back to your original photo layer. Duplicate it again, and using the same technique as before with the single row/column marquee tools cut it into 2X2 squares using the grid. As the image is 8 squares wide and 6 high, this will result in 12 squares each 4 grid squares in size. Again, use your magic wand tool to select the area around the photo and the lines cutting through it, then expand your selection by 3px and hit delete. Then use the distort transform tool to fit your new image to the 2nd smallest laptop screen. Remember again to move this photo layer behind the next largest laptop screen layer. The image below shows the result of this, with the photo layer again at 57% to allow me to nicely fit it to the screen image beneath.

Step 9:

Now repeat these steps, but make your squares half the size each time. So using the grid that will then be 1X1, 1/2X1/2, 1/4X1/4. To cut the photo into 1/2 and 1/4 grid square pieces I would recommend just using your judgement, but if you want to be really picky you can use rulers. Another tip is to duplicate the photo after cutting it into the squares, as this will save you having to repeat the slicing process right from the start each time.

Step 10:

Here is the same image but with all duplicate laptop screen image layers hidden and all photo layer’s with 100% opacity.

Step 11:

Now is the time-consuming part. Hide all of your photo layers except for your smallest photo layer. Use your magic wand tool set at 255 tolerance to select entire squares and delete them to leave a checkerboard effect. To do this simply go down each column deleting squares, being sure to leave a square remaining between each two that you delete. Then move onto the next column and repeat, but make sure that no squares you delete are next to an already deleted square, deleted squares should be diagonal to each other. The image below shows the various stages of doing this with each photo layer:

Step 12:

You should still have your original photo layer, as it was duplicated for safe keeping near the start of the tutorial. Duplicate the layer again, and move it so that it is the first layer above your laptop image layer. Then go to edit>transform>distort and fit the photo nicely over the laptop screen. Then hide all of your vanishing point guidelines and make sure that all of your checkerboard photo layers are visible. Seeing as all these layers are within the same layer set select the layer set and drag it to make the graphic more central in your document.

Step 13:

Right click on one of your photo squares layers and click blending options. Apply the drop shadow settings shown below. Then once this has been applied right click on the drop shadow shown in your layers palette, select ‘copy layer style’ and paste the layer style to all of your other photo squares layers. The outcome is shown below:

Step 14:

Now create a new layer set below your laptop/photos layer set called ‘background’. Hide your laptop/photos layer set. Create a new layer and fill it with a white to light gray radial blur.

Step 15:

Paste a metal texture onto a new layer above your radial gradient layer and reduce it’s opacity to 20% for a subtle textured effect.

Step 16:

Now create some bendy lines across your background using the pen tool. Be sure to have a white 1px brush selected and then once you have created your bendy pen line right click on it and select ‘stroke path’. Then simply duplicate your line layer until you have multiple white lines across your background. I merged all of my line layers together and reduced the merged layer opacity to 30% for a more subtle effect.

And we’re done!

To finish things off I added some cool text. Click the image below if you want the full sized version.

Download Source File for this Tutorial

 

TILT SHIFT EFFECT MADE EASY IN PHOTOSHOP: MAKING THINGS LOOK LIKE MINIATURE FIGURES

By: ilovegraphics

Some of the more advanced cameras these days come with the TILT SHIFT effect feature. This is a specialized feature in rendering photographs that make certain objects in the image look like they were miniature figures or objects. These images are perfect for catalog printing, sometimes brochure printing or even your blog.

In this tutorial, we will tell you how you can do the same effect using Adobe Photoshop. So even if you do not have a hi-tech camera, you can also achieve that Tilt Shift effect for the different images that you have. So just follow these instructions and learn how to do it.

1. Initially of course you will be choosing an image. When you are choosing an image for this tilt shift effect, it would be better for you to choose something that is taken from a high vantage point looking down. This is essential as this is how naturally most people see miniatures. It would be harder to project the illusion of false miniatures if you do not use an image composed this way. So for this example, we are using this image that is looking downwards towards our subjects.

2. Now, once you load this image in Photoshop, make sure you duplicate it first. This gives you the background as your backup just in case you mess up the effects that we are about to do. If you do make a mistake, simply duplicate this base background we copied from and start over. To duplicate the background, simply right click on it and select Duplicate layer…

3. With our duplicate layer selected, click on the Quick Mask mode icon below the foreground/background color selection area. Afterward, make sure that your foreground and background colors are Black and white respectively.

4. Next, select the gradient tool and apply the horizontal gradient effect where your white is at the center whilst it goes on to black going upwards and downwards.

5. Now, with the gradient tool selected, drag your cursor to the canvass and draw the gradient. Remember that the center of the gradient will be where your target objects are, so apply the gradient tool appropriately. It is best not to go too vertical to make things slightly more natural.

6. Once you have selected the right focus for your image, press the Quick Mask Icon again or press the shortcut (Q). Afterwards, press SHIFT+CTRL+I to select the top and bottom areas of our image (if these were not the ones selected).

7. Now, we will be adding a lens blur on the top and at the bottom of our image to get the miniature effect. Just go to Effects -> Blur -> Lens Blur to apply this blurring filter.

8. The trick is to use a high radius value as well as a high threshold value as detailed above. Just adjust and refine the settings if you think the values above are too much for your image. Make sure to tick the “preview” checkbox above so that you can see the effect easily.

9. Once applied, you should see our Tilt Shift effect come to life.

10. As a final retouch we will want to adjust the colours and brightness so that the figures look a bit like plastic objects. To do this, go to Image -> Adjustments -> Curves…

11. Use an output approximately around 150 and an input of around 100 OR just shape the curve almost like the one you see above.

Step
12

Create a Mobile Phone Ad Design

By: ViniMan

Step 1

We start off by searching for a mobile phone image. Be sure it also has a flat background color. This can be found on stock sites like Stock.xchng. Other images you’ll need for this tutorial: 1 | 2 | 3 | 4 | 5 | 6 | 7. There are also some brushes we’ll be using in this tut: 1 | 2 | 3 | 4.

Once you’ve found a mobile phone image you like that has a big enough resolution, go to Photoshop and open a new document (Ctrl+N). Then choose a color for the background layer. I chose a light blue/grey(#cad6dd). Select the Ellipse Tool (U), and make an oval form with it. Then transform it over whole of the image.

Step 2

First, Right Click on the layer in the layers palette and then select Blending Options. Put the Fill Opacity on 0%. Press Gradient Overlay and put the Blend Mode on Overlay, Opacity on 45%. Make sure the gradient goes from White to Transparent. Then set the Style on Radial.

Step 3

Place the phone image into the document. Then use Free Transform (Ctrl+T) to fit the image in the document. Pick the Magic Wand Tool (W), andClick on the background color. Then press Add Layer Mask.

Step 4

Now that you’ve cut out the phone, turn the layer back on. Then go to Filter>Sharpen>Sharpen. Then go to Blending Options and add an Outer Glow. Also, put the Blend Mode on Overlay with an Opacity of 25%. Pick a color that you want to glow out of the phone. The size of the glow depends on the size of your document; I used 180px.

Step 5

Open your field of grass image. Drag it into the document on top of the phone image. If it’s too big use Free Transform (Ctrl+T) to scale it down.

Add a Layer Mask to the layer. Make sure the mask is filled completely with black, set your foreground color on Black (D) and use the Paint Bucket(G) to fill the mask. Then pick a big Soft Brush (B), and paint white on the mask underneath the phone. Also, paint a bit of an overlap as well, as shown in the results below.

Step 6

Find yourself some beautiful flowers. Put them in the document. Then get rid of the background so you only keep the flowers. You can do this by giving it a Layer Mask, picking a Hard Brush (B), and then painting the background away.

Another option to remove the background is to use the Pen Tool (P). This tutorial shows you how it works in case you don’t know it. If you’re lucky and the image has a flat background color, then use the Magic Wand Tool (W), or Select>Color Range may be a good quick choice as well. Use the ‘Blur Tool’ (R) where you think it’s needed to create more depth.

Step 7

Next go to Filter>Convert For Smart Filter. The mask will disappear, but you can still change the mask and image by double clicking the layers image found on the layer palette. Then Transform (Ctrl+T), and put it on the bottom of the phone. The magic of Smart Filters/Object is that you can always transform an image back to it’s original size.

Now go to Filter>Sharpen>Sharpen. Do this twice. You’ll see Sharpen two times in the layer palette. At the end of each Sharpen filter you see an icon with two arrows. Click on one of these and a box will pop up. Leave the Mode set to Normal, but put the Opacity at 50%. After hitting OK, the opacity of the second Sharpen filter will automatically be set at 50% as well, due to the awesomeness of Smart Filters.

Step 8

Next we’ll change the blending options. For Outer Glow use a Blend Mode of Overlay and Opacity of 75%. Be sure to use a Black color. Note that the Size of 90px depends on what size you’re working in on your document setup. For Color Overlay we want to give the flowers a red color. Set the Blend Mode on Overlay and the Opacity on 35%.

Step 9

Find yourself more flowersplants, and other fun stuff. Then repeat the same process as used on the flower. I added two bunches of red flowers for the background flowers, and in the front some blue ones. I didn’t convert them to Smart Filters, but rather sharpened them directly on the layer. It’s best to only useSmart filters/objects when you’re not sure of the size, filters, or when reusing multiple objects that you may change later. I also found a ladybug image and put it on one of the flowers.

Step 10

You can also do some fun stuff with cloud brushes and air balloons, put plants behind the phone, etc. Keep adding more images and details until you’re happy with it!

Step 11

Now to add some brush work to the background. I used splatter brushes and vector brushes on the area behind the phone.

Be sure to create new layers when you use brushes. Tip: Most brushes aren’t really sharp, so I Sharpen them often.

Step 12

I also made my own brush to add the sparkly design to the screen. Pick the Brush Tool (B). Then go toWindow>Brushes (F5). For the Brush Tip Shape pick a hard brush with a Diameter of 35px, Hardness of 35%, and the Spacing of 25%. Set Shape Dynamics to a Minimum Diameter 100%, Scattering, and Scatter of 600%. Set Other Dynamics to Opacity Jitter of 85%.

Step 13

Put the Opacity of the new brush on 45%. Then create a layer behind the phone layer, and you’ll see you’ve got to click only once to get that sparkly effect. I used a white color for the brush and put theblending mode of the layer on Soft Light. I also created two other ones with colors of blue and red. I set the blending mode of their layers on Overlay.

Step 14

Almost finished! As you can see, on the finished advertisement I made some line design elements and placed them on the flowers. That was made with Illustrator. To do that let’s open Illustrator. Then create a new document, it doesn’t matter which size. Pick the Rectangle Tool(M) and black as your Fill. Leave the stroke set at None. Then make your screen entirely black. I do this because we’ll be working with white lines.

Step 15

Grab your Line Segment Tool, and create a white line with 1pt stroke. This time use a Fill of None.

Step 16

Pick up the Pen Tool (P) and create a new Anchor in the middle of the line you just created. Use the Direct Selection Tool (A) to move the Anchor Point.

Get the Convert Anchor Point Tool (Shift+C) and simply Click and drag your anchor point to another direction.

Step 17

Make another line the same way we just did in the step above.

Step 18

We’ll be using the Blend Tool (W) for creating more lines between the two we just made. It’s very simple,Click on the first line and then the second. You’ll probably see there’s only one line between the two you made.

Step 19

Let’s correct that. Press Enter, while your Blend Tool is still on and the lines are still selected. A box will appear. Set the Spacing to Specified Steps of 25. And now you have a blended linear design element.Tip: You can play with your anchor points, use more than 2 lines, and experiment to get different looks.

Step 21

Copy (Ctrl+C) the lines, and Paste (Ctrl+V) them in Photoshop. A box will pop up. Choose Paste as a Smart Object.

Step 22

I also made them into brushes especially for this tutorial, so you can download these instead of creating your own shapes in Illustrator. Download them here. Put the line layers blend mode on Overlay. Then place them over the flowers. Make a Layer mask and where the lines stop, and use a Black Soft Brush to make it fade out.

Finishing Touches

Now let’s add the final details. Create a title; I used Cicle font for this. Then add a logo for the mobile phone company. The final result is below.