So I got one more thing that we're gonna cover today, fully wrap up. And that was the question about high resolution stuff, because as photographers, we want to showcase our work in HD. Right. Quote unquote HD. So how do we do that? Well, first of all, I'm gonna need a pretty big image, so I'm gonna go find one. Okay, So I'm gonna go out here, and I've got some photos in here that are pretty large. Let's get, uh, not that one. Let's go here. And yeah, in here. This one's pretty big. Okay, so this one is 1936 pixels wide by 2592 pixels tall. Chances are nobody's gonna want to look at that on the Web like this. And they're not gonna wanna have to just, you know, do this all day long. They're not gonna want to do that, right. Some people might want to, but, you know, I don't think so. So let's open that back up again and closed of accident. Um, So how do we get this to display in high resolution on the web? In a place where not only are file is protected, but people can actually see the f...

ull, you know, full on version of the file. Photo shop has a very unique feature called Zoom. If I and if you've never used Zoom if I before inside a photo shop, it's a very cool little feature, and it's found underneath the file menu. And if you go down here, too, um, I believe it is export. There it is. Export zoom. If I so one would think that this would be underneath safer Web because this is where it's going, but it's not. It's underneath the export menu, and it's called Zoom If I in the zoom. If I section, you get to pick a template, but you don't necessarily have to use the template, OK, because we're gonna be putting this on a WordPress site. I'm gonna show you how to get around this. Okay, so, template, you can just pick whatever you want. It says Black background gray background, white background. Uh, Zuma five. You are it. This isn't matter. In this case, I'm gonna do black background. That's cool. I'm gonna put it in a folder on my desktop that I'm just gonna call zoom if I Okay, there's unify right there. Choose that file. Base name. In this case, I'm gonna call it Vegas because this was taken in Vegas. Let's do it. Lower case. Vega's. Okay. Image quality. Well, I'm putting this up there for a reason. I wanted to be pretty big, so maximum maximize it out. Okay? How big is the actual window that I'm going to display this in When I show you what this does, this will make more sense. But in this case, I want this to be see how big is my content window on my website? Let's go back there for a second about me. I think this is nine. You are five. Let's do 500 pixels. Okay, so let's do 500 pixels by 500 picks. Actually, this is a vertical photo, a portrait photos. So let's do 800 pixels. Okay. All right. It can open it in the Web browser. When you're done, if you want, I'll go ahead and say, OK, watch what happens. It's gonna go through, and it's going to generate this. I was thinking it would open it up in the Web browser. Apparently, it's trying to launch flash builder. So let's just go into the Web browser and open it up myself. Zoom if I Vegas. Okay, Flash builder. I really I don't want to talk to you right now. Okay, so here's the big file can check this out. You get this little guy down here and he clears up and he clears up and you can pan and zoom and watch it clear up. Blurry. Clear, blurry. Clear. Here's the cool part about it up. If you right, click on it. It's flash based. No way to jack the full resolution image. So what you can do now is take this. Okay, Lets just exit out of this. And in a code adding application Dreamweaver, what have you wherever you wanted to put it, Okay, you could go out and find this file. It's inside the Zuma five folder that you did. Okay, here are the, um, things you'll need to throw up their My suggestion would be to throw these in, like, an images folder or something. So let's just do that. Let's take all this stuff that's in here. Let's go back to let's go back in my FTP program and let's go into the root directory of mine domain. Okay, The root directory of mine domain is right here. And so I'm gonna create a new folder. Whoops. Upset. I want license that text. Excuse me, but the file, not a folder. Sorry. New folder. There we go. New folder. Alright. Images. Just gonna put that in the images folder. Okay, let's open up that folder and show you there is absolutely nothing in it. Let's go to my finder window. This is everything I need right here. Okay, so we'll do this and we'll throw it in here. It may take a while for all these images to go in there. Let's open this up in O not flash builder. Good Lord, You just won't die. Uh, it's open. Head up in Koda. Ah, much better. Okay, let me shrink this down so I can actually read what's in here real quick. All right, let's drink that down to 12 pixels. Right? Much more readable for me. Okay, so this is gonna look at I'm looking for this thing, okay? All of this stuff here, You want to look for the object tag? That's what you're gonna copy out to put into your WordPress site. Okay, What you're gonna have to do is go in here though, and find where it, like, links to this stuff. Like the Zuma five viewer. Remember, you put that in the images folder, right? So you're gonna have to find this stuff and then type out like http colon slash slash shudder click dot com slash images slash Okay. And then I'll take this and I'll just copy and paste then everywhere that I needed to go. Okay. So, like this right here, it goes there. And that may be the only place I need to put up right there. No, that's good. All right. Let's see if this works. There may be a couple of areas that I missed in there, but we'll just see if this works. Let's tell us this in there and copy this. Now, let's go back over to the web page here and go into pages. Add new. You'll have to go into the HTML editor of this and pace that end just like that. Save that as a draft and preview it. Okay. I didn't get the the links correct in there, but you can see it did paste in the zoom if I code. And so basically, what you would have to do is go in here and make sure you get all the values right. Like this right here. Probably needs the link to the to the site and all that good stuff. But once you replace all this information, basically what happened was in here. See how this is Vegas underscored image. That's the folder it's living in when it's locally on the machine. In this case, I need it to be wherever it says Vegas underscore image. I need to replace that with the U R L to my site. Right. So once you find that and replace it all, it should be right there. Embedded and able to be used. Zoomed in, zoomed out. All that good stuff. Yeah. Question that's gonna require flash. Which means IPads and IPhones, sir. IPhones ipads were left on the cold. Okay, unfortunately. All right, let's take a couple questions for you. Wrap. Let's do that. Um, I don't know if you would be willing. Uh, Bridget would like to know if you could just repeat those steps again. Really quick. Were exporting out of unifying Yeah, Yeah, do that. Okay. Thank you, People. You take your photo here, you gotta file you go down to export and you choose Zoom if I you pick what color you want. If you want to have this a standalone thing, you could just, you know, choose your thing there, pick a folder, name your image and hit. OK. And so if I Let's just put this out on the desktop here by itself, choose okey doke. That's gonna go through and do it. Of course it's gonna launch flash Builder, because why wouldn't it? Um, no offensive use flash builder. I just I don't use it, and it just gets in my way. So and apparently right now, it's causing the beach ball of death. So, uh, next question while we feel the beach ball All right, uh, question from shutter better Will the pixel size very four different devices or does have to be optimized for only specific devices like a monitor and not mobile or vice versa. Most. Most of the time, it's optimized the same across all devices. Unless, of course, you're talking about an IPhone or one of those phones and has the quote unquote retina display because on an IPhone, theoretically, they have a 300 pixel, four inch display. Most other phones Air 72 or 96 Pixels Branch, which you know are relatively close together, so you shouldn't have to optimize too much. If you're designing an icon to go on a phone like IPhone or something, you will have to optimize it for the higher resolution. But otherwise now, Sam Cox would like to know if there's a rule of thumb for how large a Web page can be before loading becomes excessive. Huh? That is a very tough question, I would say if I have to wait longer than Oh, man, I don't know. Five to wait longer than a minute for your patient load. I'm not. I'm not on there, you know. I'm not staying on, uh, I would say 30 seconds. But you know, that's just me. Depends on your audience. Sure depends on a lot of things. So if you're, um, target market is little old ladies in Nebraska with dial up, then your sight better be pretty light. But if you got a bunch of gamers with superfast connections that are the only people gonna look at your site, then go ahead and make it heavy. Absolutely. Yeah. It does depend a lot on different things. Just in. A couple of people are asking, Did we go through the Google Fonts steps? So we didn't go through Google fonts. I'll tell you what, We'll add that on tomorrow. Okay. Cool. What? She might cover this as well. Good Gardena would like to know what's the appropriate ratio for the font size Koerting and and leading for the web. We just cover that tomorrow? Um, Well, yeah, I'll cover that tomorrow because, um, on the web, turning and letting are so different, then they are in print, so totally different animal.

Class Materials

bonus material with enrollment

WordpressSlides.pdf

wp_seo_101.pdf

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Justin Seeley

"Educating the World One Pixel at a Time" - Justin Seeley is an experienced software trainer, graphic designer, and entrepreneur with his finger on the pulse of the social web. He is the creator and host of the Photoshop Quicktips Podcast, a

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Ratings and Reviews

a Creativelive Student

I watched all three days of the course. I am a photographer. The course was titled WordPress for Photographers. Only about 5% of the course was tailored to photographers. Most of the content and discussion was for pro website consultants and bloggers. That aside, Mr. Seeley is so well versed in what he knows well. Imagine sitting in front of the camera for 3 straight days remaining articulate and very professional! The class was really presented for bloggers, not photographers. An example of this is on day 3 where the presenter, after talking about photographers' concerns for an hour or two, said he wanted to transition out of photography into blogging. The class seemed short on the type of content that photographers need. It would have served photographers better if the students present in the studio were all photographers. Discussions on watermarking, photo file size and image theft/copyright infringement showed that Mr. Seeley's background in the needs of photographers is lacking, while his expertise in graphics and web design are VERY impressive. Too much of the class time was devoted to answering narrowly focused tech support questions from people other than photographers. It was a wonderful class for the audience that hijacked it, but it should have been titled and described differently if it was intended for web-blog designers. I really liked the energy, humor, and expertise of Mr. Seeley but the class was too-often off-mission. On day 1, it would have been very productive to show a photographer's WP website that was esthetically beautiful and had all the bells and whistles photographers are looking for. Then explain how you get from nothing to the final website using WordPress. That would have met the needs of pro photographers!

Shannon

Justin is an excellent presenter. He's easy to listen to and it's obvious he knows his stuff. As a presenter/trainer, I really appreciated his ability to stick with his outline while he fielded questions, both off and on topic. It takes some balancing to do that. He was good at noting questions that were too far afield and I think he actually answered all of them by the end of the three days. I would definitely attend more classes presented by him. Thanks, Justin and CreativeLIVE.

a Creativelive Student

Amazing class! Superb presentation! Justin kept the technical geek-speak to a minimal and made the entire class easy to understand and fun! I think this class should be called Wordpress for the Non-Geek! (As others have said there was not a lot of information specific to photographers, but when it was referenced there was great examples and information provided!)

2,000+ classes ranging from fundamentals to advanced techniques.

Displaying High Resolution Images on the Web

Displaying High Resolution Images on the Web

Lesson Info

37. Displaying High Resolution Images on the Web

Lessons

What Can WordPress Do?

WordPress.com vs WordPress.org

Domains and Hosting

Domains Q&A

Demo: 1-Click Install on HostGator

Audience Q&A

WordPress Dashboard Oveview

WordPress Dashboard: Settings

Audience Q&A

Working with Posts

Working with Pages

Audience Q&A

Using WordPress Plug-ins

WordPress Themes

Final Q&A

Managing Your Media

Managing Your Media Q&A

Working with Video

Top 5 Photo Plug-ins

Top 5 Themes for Video

Top 5 Video Plug-ins

Creating a Discussion

Moderating Comments

Creating Ratings and Polls

Purchasing a Theme

Customizing a Theme

Editing Code for Non-Geeks

Customizing Themes Q&A

CSS Crash Course

Using the WordPress Codex

Creating and Using Menus

Lightbox Plugins

WordPress Codex, Menus and Plugins Q&A

General WordPress Q&A

Optimizing Images for the Web in Photoshop

Optimizing Images Q&A