Social Media Choosing & Resizing Images for Facebook, Twitter, - - PowerPoint PPT Presentation

social media
SMART_READER_LITE
LIVE PREVIEW

Social Media Choosing & Resizing Images for Facebook, Twitter, - - PowerPoint PPT Presentation

Picture Perfect Images for Social Media Choosing & Resizing Images for Facebook, Twitter, & Other Social Media Profiles Seminar Overview How to take or find good images What image sizes mean Different file types


slide-1
SLIDE 1

Picture Perfect Images for Social Media

Choosing & Resizing Images for Facebook, Twitter, & Other Social Media Profiles

slide-2
SLIDE 2

Seminar Overview

  • How to take or find good images
  • What image sizes mean
  • Different file types
  • Appropriate resizing techniques
  • How to name files
  • Dimensions for different social media profiles
  • Q&A/Open discussion
slide-3
SLIDE 3

Take the image yourself!

  • What megapixel?

How to Get Good Images

Type of Image Minimum Resolution Number of Megapixels Web Image 640 x 480 1-megapixel & up 4” x 6” Print 2048 x 1536 3-megapixels & up 8” x 10” Print 3072 x 2048 6-megapixels & up 16” x 20” Prints 3264 x 2448 8-megapixels & up

slide-4
SLIDE 4

Good Stock Image Websites

  • Shutterstock
  • iStock
  • Depositphoto
  • DeviantArt

Where to Get Good Images

slide-5
SLIDE 5

Shutterstock.com

slide-6
SLIDE 6

Shutterstock.com

slide-7
SLIDE 7

iStockphoto.com

slide-8
SLIDE 8

iStockphoto.com

slide-9
SLIDE 9

depositphoto.com

slide-10
SLIDE 10

depositphoto.com

slide-11
SLIDE 11

DeviantArt.com

slide-12
SLIDE 12

DeviantArt.com

slide-13
SLIDE 13
  • You CANNOT steal images from Google Images or other

photo sharing sites without purchase or artist’s consent.

  • One time we did…
  • Use tineye.com to find out where the image came from

Stock Photo No-No’s

slide-14
SLIDE 14

Properly Using Editorial & Commercial Images

  • Editorial Use Only photos cannot be used to sell
  • something. It can only be used to illustrate a news-related

story or used in educational purposes.

  • Commercial photography is used to help sell or promote

a product or concept.

Stock Photo No-No’s

slide-15
SLIDE 15
  • Raster vs. Vector
  • Raster is flat & cannot scale up without a loss of quality.
  • Vector is mathematically based on points, lines, paths, & strokes, so it can increase in size without loss of

quality.

  • JPG
  • Most common file size
  • Smallest file size
  • Each time resaved, it loses quality
  • PNG
  • Made for the web – RGB colors only, no CMYK values
  • Larger file size
  • Good for images with transparencies, gradients, & drop shadows
  • TIFF
  • Can be saved & resaved without loss of quality
  • Mostly used in printing but can be uploaded to the web (takes longer)

Different File Types:

A Quick Overview

slide-16
SLIDE 16

Determine the Image Size You Need

& Downloading the appropriate file size

slide-17
SLIDE 17

Facebook

slide-18
SLIDE 18

Cover Photos: 851 x 315 px

Facebook

slide-19
SLIDE 19

TIPS:

  • Start with double size (1702 x 630 px) to get the best

quality, FB will upload appropriate proportionate size

  • Change often to highlight events or seasons
  • DON’T put up an image one might find offensive or

misleading

  • CANNOT be more than 20% text
  • Use PNG for higher quality
  • Use an unique image to represent you/your brand

Facebook

slide-20
SLIDE 20

Facebook

slide-21
SLIDE 21

Facebook

slide-22
SLIDE 22

Facebook

slide-23
SLIDE 23

Facebook

slide-24
SLIDE 24

Profile Image: 160 x 160 px Upload Images at 180 x 180 px Seen on Timelines at 32 x 32 px Seen on News Feeds at 50 x 50 px

Facebook

slide-25
SLIDE 25

TIPS:

  • Keep in mind the profile image changes sizes
  • Use a logo or an image easily recognizable to

fans

Facebook

slide-26
SLIDE 26

Make your Profile Image & Cover Photos work together!

Facebook

slide-27
SLIDE 27

Facebook

slide-28
SLIDE 28

Facebook

slide-29
SLIDE 29

App Icons: 111 x 74 px

Facebook

slide-30
SLIDE 30

Design your App Icons to match the look and feel of your brand & the rest of your Facebook page.

Facebook

slide-31
SLIDE 31

Facebook

slide-32
SLIDE 32

Event Cover Photos: 851 x 315 px

Facebook

slide-33
SLIDE 33

Facebook

slide-34
SLIDE 34

Facebook

slide-35
SLIDE 35

Facebook

slide-36
SLIDE 36

Facebook

slide-37
SLIDE 37

Photo Albums

  • Each hold 1,000 photos
  • Max upload is 2048 x 2048 px
  • Max display is 960 x 720 px
  • TIP: Check “High Quality” box

to ensure highest resolution

Facebook

slide-38
SLIDE 38

Photo Albums

  • Organize by

category or event

  • Name

albums accordingly

  • Select a

good cover image for each album

Facebook

slide-39
SLIDE 39

Photo Albums

Facebook

slide-40
SLIDE 40

Timeline Images – Images posted straight to timeline instead of uploaded to album Preview: 403 x 403 px View in Lightbox up to 960 x 720 px Upload size up to 2048 x 2048 px

Facebook

slide-41
SLIDE 41

Facebook

Timeline Photos 403 x 403 px preview

slide-42
SLIDE 42

Twitter

slide-43
SLIDE 43

Profile Image

  • 500 x 500 px: Enlarges when someone clicks on

image

  • 73 x 73 px: Shown above description on your page
  • 48 x 48 px: When you post a new tweet in Twitter

feed

Twitter

slide-44
SLIDE 44

Profile Image

  • Use a logo or recognizable image that represents you or

your company.

  • A lot of companies use the same image that is on Facebook

to maintain consistency.

Twitter

slide-45
SLIDE 45

Profile Image

  • Get creative!

Jerry Seinfeld on Twitter

Twitter

slide-46
SLIDE 46

Header Image 520 x 260 px

  • Recommended dimensions of 1252×626
  • Position & resize inside of Twitter
  • Like a cover photo, use an image to represent your

company

Twitter

slide-47
SLIDE 47

And like Facebook, you can make your Profile Image & Header Image work together!

Twitter

slide-48
SLIDE 48

Twitter

slide-49
SLIDE 49

Background Image

  • Use one of Twitter’s Premade themes
  • Check out Themeleon on Twitter
  • Thousands of background patterns & color palettes to

customize

  • OR Upload one of your own images
  • Tile Background tiles the background image to fit any

monitor size

  • Chose Background color, link colors & a white or black
  • verlay

Twitter

slide-50
SLIDE 50

Twitter

slide-51
SLIDE 51

Twitter

slide-52
SLIDE 52

Twitter

slide-53
SLIDE 53

Company LinkedIn pages have a horizontal logo instead

  • f a profile picture

Horizontal logo size: 100 x 60 px Logos shrink down to 50 x 50 px in comments

Linked In

slide-54
SLIDE 54

Company LinkedIn Cover Photos: 646 x 220 px Cover Photos are optional & not all companies have them; however, they do look more professional.

Linked In

slide-55
SLIDE 55

Linked In

slide-56
SLIDE 56

Linked In

slide-57
SLIDE 57

Linked In

slide-58
SLIDE 58

Company LinkedIn Careers Cover Photos: 974 x 238 px

Linked In

slide-59
SLIDE 59

Linked In

slide-60
SLIDE 60

Linked In

slide-61
SLIDE 61

Company LinkedIn Products & Services Banner can contain multiple images

Linked In

slide-62
SLIDE 62
  • Originally only for the iPhone, iPad, & iPod Touch, Instagram became available for

Android users in early 2012.

  • Confines user to square shaped photos
  • Added Video sharing in June 2013 to compete with YouTube & Vine
  • Mostly viewed on cell phones & tablets
  • Can share photos on Instagram easily to Facebook & Twitter

Instagram

slide-63
SLIDE 63

Instagram

slide-64
SLIDE 64

Small Thumbnail: 205 x 205 px Large Thumbnail: 410 x 410 px Profile Image: 110 x 110 px Most Recent Images: 161 x 161 px

Instagram

slide-65
SLIDE 65

Photos open up in Lightboxes viewed up to 612 x 612 px depending on device

Instagram

slide-66
SLIDE 66

Profile Image is 40 x 40 px in Photo Feed Photos are 510 x 510 px in Photo Feed

Instagram

slide-67
SLIDE 67
  • Profile is a circle with a radius of 270 px
  • Cover Photos are 2120 x 1192, but most people or companies haven’t

updated there’s since the new updates in May

Google +

slide-68
SLIDE 68

Google +

slide-69
SLIDE 69
  • Shared Image sizes

vary, but are typically about 497 x 373 px

Google +

slide-70
SLIDE 70

Pintrest

  • Profile images: 165 x 165 pixels.
  • Pins in feed: 238 pixels x adjusted to height.
  • Expanded pin size: 735 pixels x adjusted to height.
  • Pin boards complete size: 238 x 284 pixels.
  • Cover image: 217 x 146 pixels.
  • Tiny thumbnails: 51 x 51 pixels.
  • http://www.authormedia.com/the-pinterest-cheat-sheet-to-

image-sizes/

slide-71
SLIDE 71

How to Resize Images

Photoshop: the King of Image Editing (or so says me)

slide-72
SLIDE 72
  • OPTION 1: File – Open (Select the image you want to use)

Either go to: Image – Image size to resize the image Image – Canvas size to crop the image Use the crop tool (PSCS6 will tell you the image size as you are cropping

  • OPTION 2: File – New

Enter size for the canvas File – Place (Select the image you want to use) While holding SHIFT, drag the corner of the image to fit the canvas Move the image around to fit your taste or need Hit ENTER (or check mark at the top) to confirm placement of the image

Photoshop

slide-73
SLIDE 73

Free Online Photo Resizing

slide-74
SLIDE 74

1.

Browser computer for image, click Continue

2.

Crop photo by dragging box around image, click Crop Selection (Image size is displayed in the bottom right)

3.

Continue on to Step 2: Resize Your Picture Make my Picture: Select a size OR type in width & height (or just width works, too)

4.

Choose a Special Effect – or not, up to you

5.

Save As – Choose “Best Quality”

6.

View Image to preview

7.

Click Resume Edit to go back & make changes or Save to Disk to download image

Picresize.com

slide-75
SLIDE 75

1.

Upload Image

2.

Click square to enter image size in pixels

3.

Use + or – to shrink the image to fit in the highlighted sized area

4.

Click yellow circle

5.

Save this Image – jpg, png, or gif options

resizeyourimage.com

slide-76
SLIDE 76

1.

Browse to Upload Image (Optimizes image for you & gives you a preview comparison)

2.

Crop Image – type in pixel dimensions

3.

Sharpen/Image Quality options & Image editing like B&W, Monochrome, etc., add image border

4.

Scroll back up under the image & click Download Image

webriszer.com

slide-77
SLIDE 77

Paint.net

  • OPTION 1: File – Open (Select the image you want to use)

Either go to: Image – Image resize to resize the image Image – Canvas size to crop the image

  • OPTION 2: File – New

Enter size for new image File – Open (Select the image you want to use) Image - Select All, Copy and Paste into a new layer onto new image Move the image around to fit your taste or need, hold Shift to maintain aspect ration File Save as new image

slide-78
SLIDE 78
  • Save images with proper keyword tags for the best SEO results
  • Separate keywords with dashes – not underscores_ or spaces
  • When adding images to websites you can add keywords to up to 5

places per image.

  • File name
  • Alt Text
  • Description
  • Caption

Saving & Naming Images

slide-79
SLIDE 79

Website-Keyword-Opportunities

slide-80
SLIDE 80

Practical Applications