25 Replies Latest reply on Jan 30, 2012 2:51 PM by ACandelaPhoto

    creating a type logo in PS

    ACandelaPhoto

      I've just created a simple type logo using my full name.

      I need to get it sized down to fit the position of where it will be placed on my site. These are the specs I have to work with:

       

      The dimensions of the logo (or space for your logo) differ for each logo position. The height of the logo is always 98 pixels.

      If your logo is on the left, the available width is 270 pixels.

      If your logo is on the right, the available width is  340 pixels.

      If your logo is on the top, the available width is 300 pixels.

       

      My first dilemma is how to save this logo so that it can retain it's effects. For instance it's on a 12" X9" document but the size of the font is 20pt.

      What is a good "document size" to start out when creating a type logo so that when it's saved all what's needed is to change the pixel size?

      Or is that incorrect thinking?

       

      Hope this makes sense..  ~A~

        • 1. Re: creating a type logo in PS
          JJMack Most Valuable Participant

          My Crafting Actions Package Contains

          • Action Actions Palette Tips.txt
          • Action Creation Guidelines.txt
          • Action Dealing with Image Size.txt
          • Action Enhanced via Scripted Photoshop Functions.txt
          • CraftedActions.atn Sample Action set includes an example Watermarking action
          • Sample Actions.txt Photoshop CraftedActions set saved as a text file.
          • 12 Scripts for actions

          Download

          Example Three types of watermarks on any size image Action

          http://www.mouseprints.net/old/dpr/WM900x600.jpg

          • 2. Re: creating a type logo in PS
            Noel Carboni Level 8

            I suggest saving it as a PNG-24, which can offer some effects based on partial transparency, such as drop shadowing.  As an example, open this page and resize it to see how an irregularly shaped and partially transparent PNG-24 can interact with a background...

             

            http://noel.prodigitalsoftware.com/temp/TransparencyTest/TransparencyTest.html

             

            Regarding good one-size-fits-all dimensions...  You might want to consider saving it at several different sizes and seeing if reducing the pixel count makes the byte count for the download significantly smaller.  It may be that you want to provide the web page designer with several different sized images to choose from.  If you don't see much of a difference in file size then I suppose saving a larger one and having the browser downsize it per the HTML style attributes could make sense.  Without knowing more, specifically, about what it looks like it would be hard to advise you in any more detail than this.

             

            One additional detail:  If you DO save it with a larger pixel count than needed for a particular page, if someone zooms their browser (becoming more common now, especially with tablets) the image will upsize with higher quality, much like text does.

             

            -Noel

            • 3. Re: creating a type logo in PS
              Noel Carboni Level 8

              As a graphic example, open the above link and zoom the browser.

               

              Now do the same with this page:  http://noel.prodigitalsoftware.com/temp/TransparencyTest/TransparencyTest2.html

               

              Note that this one takes quite a bit more data to be downloaded just for the potential of zooming to see a higher resolution.  Marian Driscoll has pointed out that this could be automated e.g., with a Javascript to choose an appropriate size and avoid teh higher data bandwidth unless needed.  If the logo isn't much different in file size between small and large versions (possible, if it's not as complex as an image), then such complexity might not be needed.

               

              -Noel

              • 4. Re: creating a type logo in PS
                ACandelaPhoto Level 1

                     Noel,

                     Thanks for the reply. Below is what I'm looking at with changing the background to either a color or texture. Same goes for the font logo.

                     What I'm trying to acheive is creating a layer where I can change the background texture/color when needed and keeping that separate from the logo.

                    

                    I ended up having to resize the overall logo a few times to find something close to the size needed to fit on the site and when enlarged it still holds definition.

                     If you (or anyone else) can provide more suggestions I greatly appreciate it. I feel that I'm close, but not quite nailing it!

                 

                    thanks   ~A~

                    AC photo logo.jpg

                • 5. Re: creating a type logo in PS
                  Noel Carboni Level 8

                  Well, sizing a logo that's just a text message is a bit of a tough thing, because people come to expect the kind of rendering tricks that browsers do to real fonts.  If you size an image of text down to the kind of size you're showing above, it loses all the advantages of the fancy rendering processes employed to render

                   

                  Here's a PNG file, made with a font similar to the one you're showing but very large, with surrounding transparency.  It isn't too large a file, and can be sized via HTML to whatever size you want.

                   

                  http://Noel.ProDigitalSoftware.com/temp/LogoTest/Logo.png

                   

                  Here's a page you can resize to see how it will look at different sizes:

                   

                  http://noel.prodigitalsoftware.com/temp/LogoTest/LogoTest.html

                   

                  As you can see, if you make the window very small the resizing algorithm causes the text to fall apart at the smaller sizes.  This is why fonts have special (and very sophisticated) rendering processes.

                   

                  Is there no way you could just use a font for this?

                   

                  -Noel

                  • 6. Re: creating a type logo in PS
                    ACandelaPhoto Level 1

                            Yes, since my reply I've been trying different ways to have this logo show up where it does't lose it's detail when enlarged or small.

                            I figure it shouldn't be that difficult as it's a name that will be placed on a corner or top center on my website. I'll move navigation bars according to where this logo is best suited.

                     

                            I'm working with a website company that has templates to create your own website. But little issues like this really get me stumped and have to wait to hear back from customer

                             support.

                             This is their website   viewbook.com

                     

                             What do you mean by .."Is there no way you could just use a font for this?"   This is the font that works best for my work. simple strong with some style to it. 

                     

                            Don't know where to go from here..    

                    • 7. Re: creating a type logo in PS
                      Noel Carboni Level 8

                      AHipshooter wrote:

                      What do you mean by .."Is there no way you could just use a font for this?"

                       

                      I understand that your logo is stylized, albeit subtly.

                       

                      For the best possible display of text in a browser, one needs to provide text to the browser, along with rendering instructions (e.g., font face, size, positioning, etc.).  What I was suggesting was to do just that, so that the browser renders the font in the best way on the target system.  No image would be involved.  You might not be able to stylize it just as you like, and (depending on the font) it might not be available everywhere - those are the challenges.

                       

                      The other alternative is to pre-develop images of all the various sizes you'll need, and use the one that's appropriate for the task.  In real terms, if you have a box in a web page that's 300 pixels wide in which you want the logo displayed, then create a 300 pixel wide rendering of the logo for display in that spot.  That way you have full control over what it looks like...  You could make it bolder/thicker/darker/whatever so that it looks good in that size.

                       

                      -Noel

                      • 8. Re: creating a type logo in PS
                        ACandelaPhoto Level 1

                           What you described sounds like it can't be done via PS. I don't have Illustrator. The attachment I sent was created in PS and using a font that seems to be recognized via Viewbook.

                         

                           I tried the sizing that was recommended but it still ends up being large. I'm using a small font size but need a decent size of pixels to show

                           the logo clearly when the website screen gets enlarged or shrunk down.

                        • 9. Re: creating a type logo in PS
                          Noel Carboni Level 8

                          AHipshooter wrote:

                          What you described sounds like it can't be done via PS.

                           

                          Why?

                           

                          SmallLogo.png

                           

                          -Noel

                          • 10. Re: creating a type logo in PS
                            ACandelaPhoto Level 1

                                   Please explain. All you showed was my logo..

                            • 11. Re: creating a type logo in PS
                              JJMack Most Valuable Participant

                              For print size image you should look at my Photoshop Action it can add watermar layers that are resized to fit any print size image.

                               

                              For the Web I would create a LARGE png or gif image and scale that image for your web pages. Scale the image down in size for your web page. Align it to where you want the logo be.  Here is a very Large animated gif I created in Photoshop using masked text layers and scaled in this append down to three smaler sizes. You can use view source to see how an image can be scaled with html. If you look at the full size animated gif it does not look good however scaled down in size it does.

                              Gif link open it in a new tab or window  http://www.mouseprints.net/JJMackAniShadow.gif  Png link http://www.mouseprints.net/old/dpr/JJMack8btiSrgb.png
                              [ JJMack ]
                              [ JJMack ]
                              [ JJMack ]

                              • 12. Re: creating a type logo in PS
                                Noel Carboni Level 8

                                I was just illustrating that you can resize images in Photoshop and save them at whatever size you want.  It's just an image.

                                 

                                I think we may be communicating on two different levels, and I'm sorry about that.

                                 

                                -Noel

                                • 13. Re: creating a type logo in PS
                                  ACandelaPhoto Level 1

                                  I've locked down the typeface design, but when I upload it to my website it brings in the background that it was created

                                    on. How can I create a transparent background so I can still see the typeface while in PS and that when uploaded it

                                  shows only the font and not that the background it was created on?

                                   

                                  Any thoughts??

                                   

                                     AC logo.png

                                  • 14. Re: creating a type logo in PS
                                    RenéG Level 3

                                    Turn off the layer that contains the black.

                                     

                                    You will be left with you type layer and you'll see a checkered looking background.

                                     

                                    Then go to: File > Save for Web & devices... > in one of the drop down menu, select PNG-24 with "Transparency" checked on, and then click Save.

                                     

                                    This will give you the image you want with a transparent background.

                                     

                                    Picture 1.png

                                    • 15. Re: creating a type logo in PS
                                      JJMack Most Valuable Participant

                                      You need to use a file type that is supported by browers and one the supports transparency GIF or PNG and save your logo with a tranparent background.

                                      TutorialsLinked Letters [Logo or Monogram ]

                                      [ JJMack ]

                                       

                                      The above gray background was added using HTML background-color: #808080;  and the logo centered using align=center"

                                      • 16. Re: creating a type logo in PS
                                        ACandelaPhoto Level 1

                                        Thank you RéneG.

                                          You answered my inquiry in a simple manner and it worked!

                                         

                                        Take a look at the site with the logo!  www.shootfromthehip.us

                                        I'm fine-tuning a few minor things, but it's pretty much set.

                                         

                                        Thank you again for your supportive reply!    ~A~

                                        • 17. Re: creating a type logo in PS
                                          JJMack Most Valuable Participant

                                          AHipshooter wrote:

                                          Take a look at the site with the logo!  www.shootfromthehip.us

                                          I'm fine-tuning a few minor things, but it's pretty much set.

                                          www.shootfromthehip.us get redirected to http://aimeecandelaphoto.viewbook.com/ which has a flash slideshow some of the images have your watermark. Most of your images I found in my browsers cache did not and did not have any metadata copyright info like this image. 1024px by 774px


                                           

                                          Message was edited (image removed) by: PECourtejoie

                                          • 18. Re: creating a type logo in PS
                                            ACandelaPhoto Level 1

                                                   Are you planning on using one of my images?

                                                   If you look at many websites many images are without © on the images.

                                                    As long as they're on my website and I have my copyright notice clearly on the site I'd say you just infringed on one of my images

                                                    without my asking.

                                            • 19. Re: creating a type logo in PS
                                              JJMack Most Valuable Participant

                                              AHipshooter wrote:

                                               

                                              I'd say you just infringed on one of my images  without my asking.

                                              I'm just making sure that you know that the HTML and Flash code on your web server is downloading your images to user machine and that you do not include any watermatk of copyright notice in many of those images files.  I did not download any of your images files your slideshow did.  I could care less about you images the only use I made of one was to let you know what is in every machine browsers cache that look at you web page, what your doing, what your web server and user browers are doing.  If you want to protect your copyright you should take action.  Its your responsibility to protect you copyright. IMO when you copy your images off your web server onto users machines I really think you should include some copyright information. On the image and in the files metadata of image files you want to protect. On top of this why did you strip off exif data the shows the images were captured with one of you camers. Cameras place information like camera make and serial number in image files. Information like that may help prove an image is yours instead you stript this information from the images you make available on the web why?.

                                               

                                              And by the way you didi ask for AHipshooter wrote:

                                              Take a look at the site with the logo!  www.shootfromthehip.us I'm fine-tuning a few minor things, but it's pretty much set.

                                               

                                              Message was edited by: JJMack

                                              • 20. Re: creating a type logo in PS
                                                ACandelaPhoto Level 1

                                                JJMack,

                                                  I appreciate you pointing out the images that are missing data information. Some of the images on the site are scanned from negs.

                                                I'm looking into properly © the remainder of the images. If there is a way that you can suggest doing this feel free to guide me.

                                                  Obviously, if people want to use an image from a site they will go and do so.

                                                 

                                                For now, I'd like for you to remove the image I shot from your above reply. It does state in the Adobe Forum not to infringe on © images.

                                                  I think you could have explained what was going on with my site without pulling an image.

                                                 

                                                Understandablely, I have to be a BIG stickler about this, but also I acknowledge that you want to make sure someone's work needs to be

                                                protected well. That I do agree on!

                                                I'll be contacting the website company about the metadata & © info.

                                                 

                                                Again, please remove the photo.    thank you 

                                                • 21. Re: creating a type logo in PS
                                                  JJMack Most Valuable Participant

                                                  AHipshooter wrote:

                                                   

                                                  JJMack,

                                                    I appreciate you pointing out the images that are missing data information. Some of the images on the site are scanned from negs.

                                                  I'm looking into properly © the remainder of the images. If there is a way that you can suggest doing this feel free to guide me.

                                                    Obviously, if people want to use an image from a site they will go and do so.

                                                   

                                                  For now, I'd like for you to remove the image I shot from your above reply. It does state in the Adobe Forum not to infringe on © images.

                                                    I think you could have explained what was going on with my site without pulling an image.

                                                   

                                                  Understandablely, I have to be a BIG stickler about this, but also I acknowledge that you want to make sure someone's work needs to be

                                                  protected well. That I do agree on!

                                                  I'll be contacting the website company about the metadata & © info.

                                                   

                                                  Again, please remove the photo.    thank you

                                                   

                                                   

                                                  You can use programs like Bridge and Photoshop to edit metadata and add your copyright notice add all the file info you can even setup a template to use.  I can no longer edit my above append for onec and append is replied to this site does not let one edit the replied to append.  You pushed your file onto my machine how dare you all I did was to point to your file in the browsers cache and the java code on this site pulled. You asked us to look at you site.  I was just showing you what I saw going on. I think you should contact this site I'm sure they will respect your request to have it removed.  If you had your copyright in the file this problem would not exist...

                                                  • 22. Re: creating a type logo in PS
                                                    RenéG Level 3

                                                    You're welcome. Glad it worked out.

                                                    • 23. Re: creating a type logo in PS
                                                      PECourtejoie Adobe Community Professional

                                                      AHipshooter, JJMack is trying to help. The intent of his posting of your photo was to point out that you did not include metadata or a copyright watermark.

                                                      There was no malicious intent, but in deleted the image nonetheless.

                                                      • 24. Re: creating a type logo in PS
                                                        JJMack Most Valuable Participant

                                                        AHipshooter wrote:

                                                         

                                                        I'll be contacting the website company about the metadata & © info.

                                                        There is no need for you contacting the website company about the metadata & copyright info I can not believe they would alter your files and strip data.   To see where the problem is all you need to do is look in the mirror the problem will be looking back at you.  How many web crawlers have cached and index his images? google images? bing? yahoo? ask? etc.  Have you ever look at the web statistics for you site. How many computer have copies of some of your images.  You need to educate yourself about the web. I would suggest that you remove any image you want to maintain ownership from the web till you know more and can protect them better. Any image you put on the web that can be view can also be captured. You need to read any agrement you have with any website.  Do not enter any Photo contest without reading all condition and rules often they have clauses where by you will be giving the rights to use your images any way they want to.

                                                         

                                                        Photoshop save for web will by default strip EXIF data it also has options to preserve some or all of your data educate yourself keep safe and don't but youe jewls on the web.

                                                        • 25. Re: creating a type logo in PS
                                                          ACandelaPhoto Level 1

                                                                  PECourtejoie...  yes, I realize JJMack was trying to help, but think of it from a photographer's point of view. JJMack really could have explained the issue of metadata/copyright without posting an image.

                                                                 I firmly stand by that any image that is taken off a site (whether for example or not) should at least be asked by the owner of the images before posting elsewhere, especially on a PS forum where 1000's of photographers are

                                                                  looking and helping out other photographers. Us working shooters are protective of our work especially when it comes to the web. We do what we can to best protect our work and granted with millions of web users we are

                                                                 targeted and dealing with unseen faces.

                                                           

                                                                JJMack.. don't know what more to say, as this topic involved getting feedback for creating a type logo and it has moved about copyright and photo usage.

                                                                Your last statement comes across like you don't want anyone to promote one's own work online?  No artist is going to show their own work online that they aren't passionate about. Makes no sense.

                                                               

                                                                Anyhow, I'd like to end this 'off-topic' on this thread. I got the answer I was looking for from René and happy with my results.

                                                                 I appreciate and am aware of the image metadata issues. And I will see how to handle this in the future and continue protecting my work the best way possible. 

                                                           

                                                                thank you for the feedback!