I recently created a Red Drupal theme mockup, and thought I would make a walk through on creating the ddblock part of that mockup. This can also be used for creating a mockup for any web design featuring a slider like this one. All is all done in Photoshop, this will not be a working website. If you are looking for a great tutorial on how to actually use the ddblock module, check out my friend Ed’s blog. He has the best tutorial for setting ddblock on the web. This tutorial is just to give a potential client an idea of what you could create for them.

Here is what the ddblock mockup will look in PhotoShop like when we are done:

Start with new image, I used 718 wide x 333 tall to get the over all size I needed. You may want a different size, but make sure that the proportions are the same, so if you wanted to make the with 900px for example, the hight would need to be 417px. Make sure the background is transparent. Set the resolution at 72 if this is for the internet, 300 if you are making a mockup that will be printed.

Next, you will want to select the whole background by dragging the Rectangular Marquette tool (M) across the whole document. Do not use the “select all” function in the “Select” menu, as this will not allow you to do the next step.

Go to the “Select” menu and Select → Modify → Smooth. Set the Sample Radios at 7. You should then get a nice selection with rounded corners.

Color this in. I used white, you may want another color. Also, you can go to Layer → Layer Style if you want to make it stand out more if it will be alone by adding a drop shadow etc.

Next, create a new layer, I call this one “background2” as it will be the box we are setting everything up in. Here, use the Rectangular Marquette tool (M) again and make a box. If you are looking at your ruler, start at the first micro-inch at the top left and the side top, pull down to the same position, opposite side; top left, side bottom. (See the arrows in the image below.)

Next we’ll need to find an image that will fit in a section 475×295. Open that in Photoshop and sent it to the side for now.

In our ddblock mockup, lets create another layer, call this one “featured.” We are going to use the Rectangular Marquette tool (M), this time to select starting top left second micro-inch and the side top second micro inch, pull down to the same position, opposite side; top left, side bottom but this time stop on the top ruler one micro0inch away from 7 inches.

Now, go to the “Select” menu and Select → Modify → Smooth. Set the Sample Radios at 7. You should once again get the rounded corners.

Go back to that 475×295 image can select it by going to the Select → All or by pressing command+a on a Mac, Control+a on a PC. To paste this into the selected area, go back to your ddblock mockup and go to Edit → Paste Into. This will insure that only part of the image that fits will be in the picture. If the image you are using is lager than 475×295, use the Move tool (V) to position the image insuring the best possible cropping.

Keep in mind that the ddblock module will not allow for moving the image, but in this instance we are trying to make a presentation image, so it should look as good as possible. When using ddblock on an actual website, the image will need to be cropped properly before using. This is just a shortcut.

Next, we will use the Rectangular Marquette tool (M) in another layer I call infobar. The top edges should be right on the image in the featured layer, but the width should start 2 micro-inches away from the 1 inch mark and it should end three micro-inches away from the 3 inch mark. Once selected, paint or fill this black.

Next we will set the transparency of the layer itself at 66% on the Layers tool box. Your image should now look something like this:

I already created a “read more…” button, and you should have buttons like these pre-made as well. They really come in handy. There are also websites like Da Button Factory that can help you make buttons quickly if you need it. However, it is a better idea to learn how to make your own buttons.

So, now we open a ready made button, copy it and paste it on the ddblock mockup, making yet another layer. Name this layer “link1” to keep things easy.

Next we need to add something to all that red (or what ever color you are using on the background2). So, lets add some more buttons. If you already have buttons this size, that’s great. I didn’t. So, on a new layer we select and area with the Rectangular Marquette tool (M), half and inch tall by 2 inches and 6 micro-inches wide. Go to the “Select” menu and Select → Modify → Smooth. Set the Sample Radios at 7. This should be old hat for you by now.

Using the Gradient tool (G), we next shade the selection. Hold down the shift key, to insure that the gradient is properly lined up from right to left.

Copy this button, making six buttons total for this example. Name these layers by position, ex: sidelink1, sidelin2, etc.

You can use Image → Adjustments → Brightness/Contrast to alter the look, making one button stand out (the one the featured image is on). I made one button lighter than the others, but you could also make one darker than the rest. I would recommend that you not make the featured button another color all together, as this would stand out too much.

Also, ddblock allows you to put less that 6 featured content nodes in the rotation. If you want to have less, do the math for size, making the buttons taller. I would recommend at 4, three at the very least, but no more than 6 total as they would get too squashed together.

Now we add the cars. The best way to do this is to find 5 more images (you already have the featured) that we can crop and shrink to 40px by 30px. Make sure they look good small. Then, Select → All (presuming you are doing these one at a time) and paste them into your ddblock mockup. You will want to rename these in the order you have them positioned, I used cars, so car1, car2, etc.

As for positioning, make sure the images are a full micro-inch from the left side of the side buttons with about a micro-inch space between the top and bottom as well.

Last, we add the text. I get my text from Lorem Ipsum. Tell them how much you need, and they give you plenty of dummy text. After all, who wants to write up a bunch of real content?

Starting in the info bar, we add a title, be sure to use the same title on its corresponding sidebar link! Make sure it is a common web font as in a real website, the user’s computer will replace the font if a proper one is not found when loading the site. For this mockup, I used Helvetica bold, 18 pt. For the teaser text below it, I used Helvetica regular 14 pt. You should use a font and size that match your design.

Last, add the dummy titles to the buttons. Again I used Helvetica, this time bold, 14 pt. Keeping the font uniform is a better deign stranded.

Now, your ddblock mockup should look like this:

Save it, copy it and put it in your web design mockup. Then, show off your design to the world.