ClassCreator.com | Blockbuster sites, amazing reunions

Share Tips

New Topic Reply Subscription Options  

School photo is too small

Forums: Questions and Answers About Building Your Site
Created on: 02/01/13 10:21 PM Views: 1618 Replies: 18
Friday, February 1, 2013 at 10:21 PM
FIT-Logo.png

Greetings,

I want to increase the size of my school photo but several attempts keep it constrained. The image has my school's seal and text. Both are too small.

How can I make this image appear larger in the header?

www.ddt-fit.org

Very Best

Clark

Reply
Friday, February 1, 2013 at 10:35 PM - Response #1

Interesting. What you're trying to do is essentially add 2 logos. The second in particular has a width height ratio of about 10 to 1. The photo slot is really meant for an actual photo, i.e. something like 4 x 3 or 16 x 9 aspect ratio. The photo has both a max width and a max height, and if the image you uploaded exceeds either one of these the system will resize it to fit in the container reserved for the photo. The short answer is you can't do what you're attempting to do here. Not with this design anyway.

The scenario you have here is an excellent case for using one of the new Advanced Designs. With these you can customize the entire top any way you'd like. Requires Photoshop, Photoshop Elements, or Serif Photo (which is free -- link on Change Design page). If you're not interested in using design software to customize your top then your next best alternative is to upload an actual photo into the photo slot instead of the long logo. Best alternative after that is take the FIT logo, crop out only the logo itself, and upload that into the school photo slot.


Reply
Friday, February 1, 2013 at 11:28 PM - Response #2

Brad, CC might consider offering alternate stock templates that vary the top dimensions. It's very easy to do. Just replacing the top with a complete overlay is the simplest. I showed John C how to do that at LINK however it's better if that was directly a CC option in the designs to avoid more complex instructions.

That's the simplest and doesn't require any photoshop layer skills. Just create the image at 140 x 1000. Using the paste feature of graphics editors makes this very easy to do. Doesn't even have to be a JPG. Or just take some image and resize if that's what a user wants.

Now if one wanted to use a Logo combined with a larger right side "school logo" that's also now very easy to do. Just look at mine. I'm actually porting in a bit to #4 along with some other details just for me. I used GIF for transparency in the logos and reordered the z-index levels.

Which reminds me, you have z-index mistakes on some of the formats and that's what is making the sites still 'blow out'. I was surprised at the first one I saw since mine just 'slid under' and had no such issues. I think it would be better to have users complain about data that 'slides' under (or over the edge) vs forcing all the data down on the home page.

If it wasn't so simple, I wouldn't suggest it, but it really will make more people able to truly customize their sitesIdea and not have to jump to a completely different design - which the advanced are.

How? For starters offer just 2 options for each 'stock' design. The full one or the split one.

Reply
Edited 02/01/13 11:29 PM
Saturday, February 2, 2013 at 4:38 PM - Response #3

Good post Jack, and nice looking site. Some questions for you. I like the top photo display you have on the home page and was wondering what video/animation feature or 3rd party object you used for it. Also, your top and left links are in the color blue. Was this a default color or did you change it?

Reply
Edited 02/02/13 6:09 PM
Saturday, February 2, 2013 at 6:15 PM - Response #4

Gary,
I like what you did on the side menu of your home page with what is like a slide show of illustrations. How did you accomplish this? Thanks.

Reply
Saturday, February 2, 2013 at 6:23 PM - Response #5
FIT-Logo.png

Michael Clark wrote:

Greetings,

I want to increase the size of my school photo but several attempts keep it constrained. The image has my school's seal and text. Both are too small.

How can I make this image appear larger in the header?

www.ddt-fit.org

Very Best

Clark

Michael, did you know you can change the words "Classmate" and "Classmates" as used throughout your CC website to anything you want -- such as "Brother" and "Brothers" for your fraternity reunion site. It's under "Preferences" - scroll down a ways.

Reply
Saturday, February 2, 2013 at 7:27 PM - Response #6

Thanks for the compliment Bob. Many of our classmates enjoy that display too. It is a .gif animation that I created in Serif PhotoPlus but really only consists of a sequence of 17 different .jpg images displayed at 10 second intervals in a continuous loop. It is like a slideshow in the form of an animation.

I collected every old and new school logo and lettering style I could find on the Internet, current school websites, mascot images, our town Historical Society, old and new yearbooks, reunion booklets, etc. At first I was uploading a new image every week and then said the heck with that and made the animation.

I also have two other animations on our site. The "51st Reunion" link has a very fast animation of our last Reunion Booklet with the goal of getting classmates to purchase the booklet by showing them what it consists of, yet not giving them time to really identify the photos. I also put together the booklet for printing using Serif PhotoPlus.

Our "Acalanes Photos/Nostalgia" album link has an animation of our school letters that are sequenced and timed to coincide with a school cheerleader yell. You have to kind of chant out the letters as they appear.

Reply
Saturday, February 2, 2013 at 8:57 PM - Response #7

Gary, I too like you idea of using GIF animation. Might do that for the top 'banner' - always worry about load times a bit. Could also now 'automate' that just like the main image rotation. I'll experiment with that in a few.

What our site is showing is what you can do with the new CC styles. I just restyled what CC offered in Professional 4 removing some elements that I wasn't fond of (some is obvious).

The color combos might or might not be available via CC. I just made them the colors I wanted, not through CC options.

I coded all the stuff on our website because I wanted to learn javascript, not have foreign objects that delay loading, and last but not least, Flash doesn't work on Apple iPad, etc.

The only 3rd party thing I used was for the music player, but there I intercept if I'm on an iPad and switch to an iPad compatible player. I only have an iTouch, but it works on that thus should work on iPad, etc.

Reply
Edited 02/02/13 9:00 PM
Saturday, February 2, 2013 at 10:55 PM - Response #8

WOW...I am so overwhelmed by Serif PhotoPlus. I can't figure out how to use it as that side of my brain has echos when you speak. Is there a Serif for Dummies available? I like the possibilities just not the procedures. Any help that you know of? Thanks.
Bob

Reply
Saturday, February 2, 2013 at 11:05 PM - Response #9

Serif has some great help videos. A great way to begin We'll be having a webinar on Serif and how to use it specifically with our psd tops. Stay tuned for that. For anyone who misses it we'll be capturing a recording.


Reply
Edited 02/03/13 10:53 AM
Sunday, February 3, 2013 at 10:38 AM - Response #10

I agree with Brad. Serif does have some excellent help videos and tutorials and searchable help files, although all of that may not be included with their starter version. I know that the starter version does not the include the Extract function (Cut-Out Studio) and may not include animation capability. I also have Serif PhotoPlus-X5 which, believe it or not, came with a printed User Manual and printed Resource Guide with tutorials. I find it a lot more beneficial using printed resource documents than searching the Internet or scrolling through hundreds of pdf pages.

Learning to use a good photo program can create and enhance new possibilities for your CC site, as Bob suggests. Learning the program just takes practice, practice, practice. One of our popular features is the In-Memory photomontage (Acalanes Photos/In Memory album) showing classmates in alphabetical order with date of passing. We also enlarged this image to poster size and framed it to display at the reunion and included it in our Reunion Booklet. A much more dramatic presentation than just listing names on a page.

Our latest feature is a Then and Now photomontage (Reunion Photos/Then & Now page) of classmates that consists of side-by-side yearbook and reunion portrait photo. The facial portrait photo was extracted from the waist-up reunion photo that usually included a spouse. This was changed to grayscale and a new background was put in.

We have also used some photo manipulation in Class Emails. If we have a new feature to announce we might include a very small and/or a very blurry image of the feature. The idea is to encourage users to visit the site and not just view and save the image for themselves.

Reply
Sunday, February 3, 2013 at 11:47 AM - Response #11
JL edit - Irondequoit Fish and Game copy3.jpg

Gary,
I have the Limited version of Serif. I had no problems editing the Advanced Design "top.psd" file. in fact i got the Logo and was able to even do a masked layer and remove the excess of the photo with the paintbrush tool.

Now, the problem lies with the "side.psd" file.....I added a layer (photo) over the existing one. I kept the decorative accents on the main image.

Next i go to "save as" and it won't let me save as a .jpg format like the top did (attached photo). Any ideas why? Did I miss a step? I thought I followed the same as the previous.

Reply
Sunday, February 3, 2013 at 12:44 PM - Response #12

Bob- The "Save As..." command only saves the file as a native Serif file with the extension .Spp and is only readable by the Serif program. Any changes you make to a photo image in Serif should always be saved in this format as a backup and so you can work on it again.

To save your image as a .jpg file, or any other supported image file, use the Export Optimizer command. After saving a .jpg file I always bring that file into MS Paint (or a similar program) and then just save it again without making any changes. This will eliminate a lot of extra format characters and significantly reduce the file size without affecting the resolution. I always do this with scanned images and digital photo images too. I have seen some file sizes reduced by 90% this way. Check the file size before and after saving to see the difference.

Reply
Sunday, February 3, 2013 at 1:10 PM - Response #13

Gary, the reason for the file size differences in jpg saved in different programs are different compression settings. Don't know if Serif has a setting or not, but many graphic programs have settings for how aggressive one wants to be.

CC for example has very low compression settings to keep distortions low. Hence a file uploaded from your system can grow to 3X the size if size adjustments are done.

There is no free lunch here. For Web stuff, you usually can't tell (unless one really goes overboard). Large format Printing is a different story.

The 2 basic suggestions are:

Always save (keep) the original JPG from a source (web or camera).

Never save a JPG you've already saved and save it again. That creates more and more distortion. Start over with the original and make changes (size, hue, contrast, etc).

Reply
Edited 02/03/13 1:13 PM
Sunday, February 3, 2013 at 1:13 PM - Response #14

Awesome. That worked and I used paint to save a second time. I am please with the results of my first attempt and look forward to more.

Thank you both Gary and Brad for all your tips. Now I have to practice, practice, practice!Very HappyVery HappyVery Happy

Reply
Sunday, February 3, 2013 at 1:25 PM - Response #15

OK, just checked Serif Export.

It has a compression setting for JPG. It's called "quality" since the lower that number, the more data is 'compressed' and lost to some degree. Hence 'quality'.

Default value is 100%. For example, at 25%, size is 19KB. This is preferred over going to MSPaint (or any other program to get a smaller file). You'll get a much better image for the same file size.

Image quality depends on the image. Plain images like the top, will not show much loss since there's not much variation in the image.

Reply
Edited 02/03/13 1:26 PM
Sunday, February 3, 2013 at 1:33 PM - Response #16

More hints for compression for CC tops. If you use the default PSD as a sample and export to JPG at 25% and then open the JPG you can flip back and forth on the bottom images shown. Now flip back and forth between the original PSD and the JPG.

Pay attention to the left logo. Sharp lines are a good place to see the changes made with compression. 25% is not greatWink 66% is 28kb vs 19kb and not bad. 86% is 42KB and pretty good IMO.

There are also some other options that may or may not work for you in the lower part of that dialog.

Reply
Sunday, February 3, 2013 at 1:53 PM - Response #17

Jack,
Thanks. I think that is for the next semester for me.Rolling Eyes

Reply
Monday, February 4, 2013 at 1:23 PM - Response #18

Bob - Regarding Serif PhotoPlus, I forgot to mention that I also used this program to design and compose all our reunion Name Tags. Very easy to do and you have full control over the photo size and position, text font, size, alignment and location, edge borders and shadows, school info and logos, etc. I created just one template with all the text in place so I only had to edit the classmate or guest name. I left a blank space on the template where I would merge and position the photo on a level beneath the template. I would then merge 8 name tags into a new image and print them out at home in black on colored paper. These were then cut out and placed in a plastic holder. We used name tags for classmates, and guests & volunteers without photos, plus some blank ones.

Reply
New Topic Reply  
Subscription Options: Have all new forum posts sent directly to your email.
Subscription options are available after you log in.