All posts tagged: photoshop
Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn
Silver and gray smartphone template screenshot

Silver and gray smartphone cover page template for PowerPoint or Keynote

I don’t know what it is, but somehow I always gravitate to metal textures in all my design work. It’s funny how it works that way, and I swear that I’m not doing it on purpose! But I’ve come to accept that this is my style and I really enjoy experimenting with it and trying to integrate those kinds of textures into whatever it is that I’m doing. With that said, I present to you another presentation cover template with mobile devices over a metallic silver and gray background. It’s actually a variant of this one that I uploaded a few days ago, and it’s interesting to see how that even though the mobile devices are the same, the mood is completely different with just a background swap.

The good thing about this cover page template is that the screen on the forward facing smartphone is blank – so inserting your own screenshots or any other kind of graphic should be really easy. Plus, it will make this template uniquely yours! Just add your elements in Photoshop, save to JPG, and import into PowerPoint or Keynote.

Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn
Transparent tubes presentation cover page template

Click to download this fully editable PSD presentation cover slide

Every now and then I go on a huge binge creating abstract background elements and textures to use in my projects, and the transparent tubes that are the main feature of this presentation cover page template are the result of my latest one. I’ve spent about 20 hours this week creating these abstract backgrounds, and I believe it to be well worth my time considering how much mileage I’m going to get from these renderings over the coming months.

This cover page template is definitely one of my favorites so far. The top section is visually rich with loads of transparency and gloss, while the lower portion was intentionally left plain and simple to allow space for a corporate logo or other information. And actually, even though I put the presentation title in the upper section, it would work just as well to leave that area blank and put all the text in the gray section below. I mocked up a version of that and it didn’t look so bad.

All of the text on this presentation cover page template is fully editable, and you can extract the background and import it into PowerPoint or Keynote . Of course you can use it as it is without changes, but I’d encourage you to change it to your heart’s content to make it something that is truly unique and specific to your needs. I always get a kick seeing how people use my work, no matter how extensive the modifications are!

Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn
Smartphone presentation cover screenshot

A fully editable presentation cover template in Photoshop format

I recently finished a huge batch of white and black smartphone illustrations, and now I’m starting to find all kinds of uses for them. Case in point: presentation templates! I recently created this cover page template  for some colleagues who were giving a talk on mobile devices and UX design, and it features three large white touch screen mobile phones arranged in a nice composition on a green and gray background. The screen is completely blank on the phone that is facing forward, so you’ll be able to put anything on there that you want (like corporate logos, screenshots, app names, etc). The rest of this slide template is spacious and open as well, so you shouldn’t have any problems fitting in the name of your presentation titles and other information.

I’ve got a lot of different versions of this template in my archives that feature phones of a different color, tablets, and different background colors and textures. I’m still using a bunch of those for some other project related things, but I’ll upload them here once I no longer have a need for them.

By the way, this cover page template is in Photoshop (PSD) format. The text is fully editable and you can change it and move it around however you want. Enjoy!

Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn
Presentation cover screenshot

Blue and gray presentation cover template. Click on the image to download it.

I recently created a TON of concepts for a UX-themed PowerPoint template, and there are a lot of leftover designs that I have no idea what to do with. One reason why I have so many is that my client was looking for several templates to use on a rotating basis – which seems to be a smart idea for anyone who gives presentations frequently. It keeps your content looking fresh and your audience interested (especially if it’s the same audience over and over again). The other reason is that I really enjoy creating presentation templates. Variations of these things are very easy for me to produce, and I find myself tweaking forever and telling myself to stop and move on…

This blue and gray cover page template is in a fully editable layered format (PSD), so you’ll be able to move things around and adjust the design however you wish before you import everything into PowerPoint or any other presentation software such as Keynote. It’s very simple, and the premise of the design is that the X from “UX” becomes sort of an abstract graphic element and part of the visual structure of the slide. The good thing is that it’s abstract enough that you can even use this template even if you don’t need to have a User Experience theme.

Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn
Website template preview

Fully editable gallery website template in Photoshop (PSD) format

When it comes to visual design, I often try a lot of different things before settling on one clear direction. This photo gallery website template is one such example. I created it back in 2009 just as I was starting to plan the Norebbo online presence, and as you can see, I was actually thinking about building my own custom image gallery site. I was pretty excited about doing everything myself and created three page templates in Photoshop before I realized how much of a nightmare it was going to be without a CMS (content management system) behind it to manage everything. I’m not code guy at all, so while I wouldn’t have any problems building the structure in HTML and CSS, I would have a ton of issues managing it over the long term. That’s when I discovered the power of WordPress, and the rest is history.

This website template includes a homepage, gallery page, and text page. It was designed to showcase a large collection of images in a very clean and simple way, making them the primary focus of the design. It’s built around a simple grid system, with rectangular modules that can be inserted and removed however you want to do it. There’s even blank modules for advertising images and banners.

Now that I have no need for it, I thought I’d offer it here to anyone who would like to use it. And sorry, HTML and CSS is not included. That’s probably just as well because I’d imagine you’d want to do a lot of personal customization to it anyway.

Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn

Yeah, I’ve been pretty busy lately. I mean…REALLY busy. It’s the sort of busy that makes me feel guilty for spending too long in the bathroom, and there just aren’t enough hours in the day to do everything I need to do. But I do see some relief in sight, so that’s the only thing keeping me hanging on. A Hawaiian vacation would be epic right about now…

So what has been keeping me so busy over the last month or so? Mobile UI design, and a whole lot of it. I had a client who was looking to re-skin their existing Android app into something more “clean and white, with glowing blue elements”. I ended up generating about 10 initial design concepts for them to choose from, so we had a lot of good options before really digging into the nuts and bolts of the re-skin. The end result turned out rather nice, and I’ll try to show the final designs here once it’s officially released.

Because of the large amount of initial concepts I generated, I’m now sitting on a handful of perfectly good mobile phone UI templates that don’t have a home. I’m keeping the best ones for myself to use on future projects (sorry!), but I thought I’d throw up a couple of them here on norebbo.com for anyone who’s interested.

So…here are two fully editable mobile phone UI templates in Photoshop (PSD) format, and they are free for the taking. I guess the best way to describe them is “white and clean” – they are totally generic, but do feature some blue highlights here and there. Please use them however you wish. Both are high resolution 480×800 layouts which works perfectly for Android devices. Converting these to landscape formats shouldn’t be too difficult if you’re handy with Photoshop.

Enjoy!

Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn

Direct selection of layers

To some, this may seem like a total “duh” tip – but you wouldn’t believe the number of people I run into that don’t know that you can directly select layers in Photoshop (from your canvas) without having to wade through the layers window. I am somewhat ashamed that even I didn’t know this until a few years ago. Immediately upon discovery, I couldn’t help but to think of all the wasted hours I had spent scrolling trough the layers dialog in search of elusive layers that I was too lazy to name.
So what’s the trick to selecting layers directly from the canvas? It’s actually very simple, and I can explain it in a few simple steps:

  1. On your canvas, hover over the element you want to select the layer for.
  2. If you’re on a Mac without left and right mouse buttons, hold down the “control” key and click the mouse. Or, if you are using a mouse with left and right buttons, right click on it (works on both Mac and PC).
  3. A dialog should appear, showing you a list of all your layers located at that spot where you clicked, with the layer of the element you selected already chosen for you.
  4. Click on it, and…voila! You have just selected that layer without even having to navigate inside your layers window.

This is a total lifesaver for those times when you receive a complex PSD file from someone else who hasn’t taken the time to organize and name their layers. As a matter of fact, that’s actually what led me to discover this little trick. I was up late one night fighting my way through an edit of a PSD that I had received from another designer, and in a fit of frustration, the smashing of the keyboard and simultaneous clicks of the mouse somehow magically aligned to reveal this handy little shortcut. I was like, “Whoa! How did I do that??” Then I spent the next 10 minutes trying to recreate those key and button smashing combinations before I finally gave up and summoned the power of google to find an explicit description of the shortcut. My life as a designer was forever changed from that moment on.

Digital Book
Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn

A few months ago I built a 3d illustration of a generic tablet computer, and I used it as the basis for a large collection of royalty-free stock images. I often receive requests for a version of just the tablet by itself, so I thought it was time to do something about that. For all of you who have requested it, here you go!

I left the screen completely blank, so you can do whatever you want with that. And don’t worry – the reflection is on a separate layer so it won’t interfere with whatever you’d like to put on the screen.   Note: you will need Adobe Photoshop to view and edit this file.

Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn

Photoshop Blending Modes

I admit it – I’m a blending mode junkie. Most of the background images in my portfolio are the result of a LOT of blending mode combinations that are used together to create interesting effects. Before I begin to create a new background image, I don’t always have a clear idea in my mind of what I want it to look like – I usually just end up throwing several textures together in the layers palette and experimenting with blending mode adjustments until I get something that looks halfway decent.

If you aren’t aware of the power of these layer blending modes in Photoshop, you’re missing out on a whole world of creative possibilities. In a nutshell, this tool is found in the layers palette in the form of a drop down box at the top of the window. You need several layers in your palette before this drop down box becomes active, and you cannot apply these blending modes to the bottom (base) layer. Go ahead and pick any layer (as long as it’s not the bottom one), and try out a few blending mode options. Your image will update in real time, and depending on the blending mode that you choose, it can create some rather dramatic effects. Pretty neat, huh?

If you are like me and you incorporate these blending modes into your normal workflow, you’ll need a quick way to cycle through them quickly instead of picking them one by one (which takes far too long). Here’s how to do that:

On Windows:
Make sure the layer you wish to apply the blending modes to is selected, then click on the blending mode drop down box. Choose “Normal”, and let go of the mouse. The drop down box will stay highlighted, and you can now quickly toggle through the entire list with the up and down arrow keys on your keyboard.

On a Mac:
Make sure the layer you wish to apply the blending modes to is selected, then click on the blending mode drop down box. Choose “Normal”, and let go of the mouse. The arrow keys on your keyboard won’t toggle through these blending modes like they would on a Windows machine, so you’ll have to hold down the Shift key and use the “-” and “+” keys to cycle through all the modes.

Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on LinkedIn

As a producer of royalty-free images, there are a lot of repetitive tasks I am faced with in my day to day work. Every illustration I produce must go through some sort of post processing before I can upload them, which can include things like resizing, keywording, and general retouching of any sections that didn’t render exactly like I had planned. I wish it were as simple as just pressing the “render” button in FormZ (my 3d modeling program of choice) and have the resulting image prepped and ready for upload to Norebbo.com – or any other site that I upload to. If life were easy, that’s exactly how I would envision it to work. But as we all know, life is never that convenient is it?

For the sake of this explanation about Photoshop actions, I’ll discuss one of the most common repetitive tasks that I must do with all of my royalty-free 3d illustrations: batch resizing. I normally need three sizes of every image that I produce: one large version that is 8000px wide (for my own archives), a version that is 5000px wide (for uploading to all of the major microstock websites), and one 4000px version with some minor alterations specific to istockphoto.com‘s strict upload requirements. Of course, if it’s an exclusive image that will only be uploaded to Norebbo.com, I only need two versions for my archives: an 8000px version, and a 1024px version. But no matter what the image will be used for, the same issue applies: I need a quick way to batch resize images, and Adobe’s “Actions” tool in Photoshop can really help with that.

This is how I set up my Photoshop actions to automate my image resizing tasks

First of all, if you aren’t familiar with the actions tool, it can be found in the “Window” menu drop down box in Photoshop’s main toolbar at the top of the screen. Selecting the actions tool will launch a small window in your screen space containing all of the functions and options for setting up your actions.

If the idea of yet another floating window on your screen seems a bit messy, have no fear – you can very easily organize them with Photoshop’s powerful window tools. Did you know that you can combine several windows into one? Yep, it’s true – just click and drag any window into another, and they will “attach” together. The contents of each will be viewable by selecting the associated tabs in the new combo window. Pretty neat, huh? I normally combine my layers, actions, and text windows into one, as they are by far the most useful palettes for my particular workflow. Feel free to arrange things however you prefer.

Step one: Creating a new action from scratch

So now that you’re organized and ready to go, let’s set up an action that will re-size large images down to, say, 2000px. The first thing to do is to open an image that you want to resize. This will be your “template” image, meaning that the actions you apply to and record for this one will be applied equally to any other image you will apply this action to.

Open your actions palette, and you will see a list of default actions already in place. Ignore those for now, as none of them will do what we want to do. So we will need to create a new action from scratch.

Now that the palette is open, you will notice a small “page” icon in the bottom right hand corner of the frame (screenshot shown at right). This is the “new” icon, and it is a common element in all Photoshop palettes. Clicking this icon is a much faster way than manually selecting the “New Action” item from the main menu at the top of the page – so it’s something that you might want to make a habit of. It will make your workflow much more efficient!

Don’t worry about about all those other icons along that bottom menu yet – I’ll explain what each of those do as I go through each individual step. Click this button, and proceed to the next section.

Step two: create a name for your new action

After clicking on the “new” icon, it will launch a dialog window that will allow you to set basic parameters of the action such as a name and color identification (which comes in handy if you’re going to create a lot of actions). Go ahead and name it whatever makes the most sense to you – and you can also set up some keyboard shortcuts if that sort of thing floats your boat. I think it’s a neat feature, but I had difficulty setting it up to work correctly on my Macbook Pro. No matter what Function keys I selected, my Macbook refused to execute the actions. I’m sure there is an easy fix for that, but that’s the topic of another tutorial… Anyway, I will name may action: “norebbo 2000 wide”. I know, I know. Sometimes I astound myself with my own creativity.

Step three: setting the parameters for the action (or, more simply: recording the action)

As you can see in the actions palette to the right, the name of my new Action named “norebbo 2000 wide” is automatically selected. That means that it’s ready to receive recording information. It is very important that you pay attention to what action is selected in your palette before you begin recording! I can’t count the number of times I made the bone-headed move of recording data to an action I had made previously.

With the name of your new action selected, press the red “record” button in the bottom menu of the action palette. The button will appear to be pressed in when you click it, indicating that you are now in a recording mode.

It is very important to understand that from this point forward, with that red “record” button selected, everything you do now will be recorded as part of the action. So this is not the time to experiment with color variations or layer adjustments. You don’t want your actions to be bloated with unnecessary tasks, so be very certain that what you do to your image while you are recording is what you want to do to every image you apply this action to. Filling your actions with a lot of unnecessary steps will increase the time it takes to perform the action, and that can add up if you have a lot of images to process.

So now that you are in a recording mode, you can begin processing your image. In my case, I need to make an action that will scale a large image down to 2000px wide. As I complete that step, everything I do is recorded in the actions palette as a separate list item. As you can see from the screenshot to the left, I have also added one more adjustment in addition to the image size change: a bit of shapening, faded it by 50%. Happy with the way the image looks, I save the image and close it. Notice how the actions palette records every step – even the closing of the image!

Before you do anything else, stop the recording by pressing the gray square “stop” icon at the far left of the tool bar (shown in the diagram to the left). This is the one step that I seemingly forget over and over again, and if the action is still gathering data, it will record everything I do until I press that “stop” button. Don’t forget!

But if you are like me and you do end up forgetting this crucial step, no worries. You can edit your actions even after you’ve stopped recording. Just double-click the item in your action that you wish to change, and you will be able to change the parameters you set while you were recording. Note that you can also change the order of the steps by just clicking and dragging an item, or you can even delete individual steps as well by selecting it and pressing the trash can icon in the far right end of the tool bar. It’s an easy way to fix your action if you are bone-headed like me and forget to press the “stop” button before moving on to other things.

Step four: executing your action on a single image or an entire batch of files

Now that you have created your action, it is time to apply it to other images. You have several options in order to go about doing this. The easiest way is to simply open up another image into Photoshop, select the name of the action you want to execute, and press the gray triangle icon (“play button”) in the toolbar of the actions palette. Photoshop will take care of the rest and process your image quicker than human hands ever could. Voila. It’s that simple!

But what if you need to apply that action to an entire folder of images? No problem – that’s very easy too. Use Photoshop’s built in “Batch” command (found by going to “File > Automate > Batch…”) to set up the parameters for applying actions to large batches of images. This will launch a dialog window crammed full of settings that will require you to select the action you want to use, choose the images you want to apply that action to, and how you want to save them. Personally, I find this dialog box too complicated for simple batch tasks. Luckily, there is one more (easier) way to do it: use Adobe Bridge!

Adobe Bridge is a visual file browser, which lets you see thumbnail images of all your files instead of just text file names. If you have Photoshop, you have Bridge – they are bundled together. Launch Bridge, and go to the directory where you have placed your files that you want to apply your new action to. Select every file that you want to change, and then go to the Bridge menu and select “Tools > Photoshop > Batch…”  This will invoke that same dialog I discussed above, but the added benefit of doing it through Bridge is that the files you want to change are already selected in that dialog. So basically, it eliminates one step. You may prefer to do this directly through Photoshop, but I have found that it’s easier to do it through bridge – try it both ways to see what works best for you.

Conclusion

As you have just read, Photoshop’s actions tool is a great way to automate repetitive tasks. It can be used for very simple one-step processes like renaming files, but it’s also powerful enough to create complex 50-step actions that would take forever to do on an image-by-image basis. And since every step in the actions are fully editable, you can continue to tweak and fine-tune your actions until you get them right. No need to delete and start over if you don’t get it right the first time!

Although setting up and using Photoshop actions may seem complicated, you will quickly discover how much of a valuable asset they are in developing an efficient work flow.