Forums » SEPHP Help and Tips

site images

    • 382 posts
    August 13, 2020 10:01 AM EDT

    hei Folks..
    just a general question.

    has anyone found a way of making images 'Auto sizing' ? so they fit the device screen without reducing the image itself

    such images used on, landing page, SE plugins and member profiles.

    my aim is to keep the mobile image looking exactly the same as desktop image.

     

    Thanks Guys.

    mikel.


    This post was edited by Mikel Coreclark at August 13, 2020 10:02 AM EDT
    • Moderator
    • 5919 posts
    August 14, 2020 4:20 AM EDT

    Nothing I know of other than responsive percent stuff. Maybe someone with more knowledge of how to work in responsive stuff will answer.

    • 382 posts
    August 14, 2020 7:46 AM EDT

    hei Donna

    Thanks

    will keep an eye on this for future.

    mikel.

    • 11 posts
    August 10, 2021 8:53 PM EDT

    Hi Mikel, I see that you posted your question a year ago and have very likely resolved your image issue.  I've been going through the same challenge.  I don't know what program you are using, but I've created all of my graphics through Coreldraw.  Coreldraw allows you to make vector images, which are meant to look awesome at any size.  When I saved my images in a PNG form, for the Web, they were changed to raster images and lost their quality; fluidity and responsiveness. 

    I was disappointed with the quality of my logo on my website and wanted them to respond well to any size monitor or screen too.  I did recently make some progress by making a couple of changes when I was saving my image document.  I found an old Coreldraw thread where it was suggested to uncheck "anti-aliasing".  I saved my logo image as PNG, checked transparent background, unchecked anti-aliasing and made sure the dpi was set at 300.  That did the trick on presenting a clearer image. I also changed the size of my logo.  It took several attempts.  I'm happy with the results as my image is clear from my 15" Mac to my 36" desktop monitor.  I still need to address some color changes, since my logo is blending with the header a bit more then I wanted, but otherwise, my goal was achieved for better clarity.

    To truly make an image "fluid" you can go into HTML and CSS to add code to do that.  That is not my wheelhouse so I opted for the best result for the least fuss.

    My logo here in SE, was done pretty fast, so I haven't addressed it's quality.

    • 382 posts
    August 11, 2021 6:50 AM EDT

     Hello Tiffany

    thank you for you input on this discussion.

     

    I have not resolved the issue but its not a priority. so i am prepared to let it rest and see how SE develop image 'auto sizing' for future updates and Versions.

     

    However, since you mention color bleeding, am i right in guessing you are using serenity theme or a Blue heading ?

    the thing with colors is our eyes and devices can interpret colors differently. For example the device color resolution setting are not the same on all devices. an example of this is some red colors depending on the shade can appear a pinkish color where on another device can appear red or a brown if its a dark red. Also it depends the the device screen itself, such as, touch screen, matt screen, standard screen, these can have an affect on color appearance.

    So be aware of this when choosing color choices or logo design

    Also if you put blue on blue then there is no contrast like black and white, or yellow and black, these can play tricks with our eyes.

    an example of this is a yellow background with black text, the yellow over powers the black text. But if you change the background to Black and text to yellow then the text overpowers the background and stands out much better.

    When working with blue shades, blue being a primary color (or working with any primary color) it is best to have a clear contrasting choice so your logo or text pops out.

    using silver or any chrome / shimmering / metallic can effect the look meaning as people our eyes are pre-designed to filter or interpret shinny things, in nature, only water shines and glistens, bright things are like the sun , silver affects can appear white on some screens so be aware of this. it looks good, but there has to be a clear contrast between the silver and the background.

     

    I tend to be aware of this and so do most advertising / marketing companies. The (psychology of color) in advertising.

     

    To get around this and get your desired goal, try changing the Header color either to a much darker matt blue or redesign the logo to a more contrasting color scheme. or change both.

    Also take a look at Footer color. some themes have white text / links on a light shade of blue, sometimes the white is overpowered by the blue, so again you can change the blue shade to a darker blue. this will make the white text pop out and be more visible.

     

    Hope this helps you. Ive made so many logos in the past, im like obsessed to the point of , i annoy my team., im currently changing it again and my color scheme.

     

    So if you have any other input, id love for you to share.

     

    Many Thanks

    mikle.

     

    • 382 posts
    August 11, 2021 6:58 AM EDT

    Oh by the way.

     

    I dont use any of them fancy programs.

    I just have microsoft publisher. i get all my ideas created on there and save to jpeg, png in my devices picture file. Then i just upload to my site in seconds. i find it so easy. 

     

    mikel.

     

    • 11 posts
    August 12, 2021 12:17 PM EDT

    I actually posted a response last night but for some reason it didn't post?  My operator error, lol!

    I'll try again....lots to unpack and think about.  Yes, I'm working with a vibrant blue on the verge of being a vibrant purple in my header.  My logo is using similar colors and I agree, I need more contrast and can start with the text outline color to adjust the balance and contrast between the header and logo.  

    Colors are tricky and I concur, different monitors and people with different vision perceptions will see color variations not as intentionally designed.  I use www.colorhexa and www.htmlcsscolor.com like a color religion for determining color balance, compliments, tones, gradients etc. as I design.

    I have used Publisher since 2013, which is an awesome program.  I designed several Playbills and all of the artwork for my daughter's theater productions with Publisher without any limitations on my creations.  Publisher does provide the basic shapes to create from but I switched to Coreldraw because I needed very specific intricate design control in my designs as I was hand drawing and needed the nodes and extra shape management tools to manipulate my art work.  Ha, just what every artists wants, full creative control, lol!

    • 382 posts
    August 13, 2021 6:46 AM EDT

     Hei Tiffany

     

    Sounds like you got a great program. Publisher is always being updated. on my UK publisher version i can manipulate outlines of drawings, such as turn a circle into a star or any other shape. I only found that tool by accident.

    Just a helpful tip. When doing 'text outline' , i found that if you are creating standard small text for small logo or picture designs, the outline can disappear unless you increase the outline thickness. But then this narrows the initial text thickness. If you are doing posters or large pictures, then you can do text outline to a great effect. So when you have created your logo, minimize it to to the intended size (as it would be on screen placement) so you can see how it looks baring in mind image sizes are regulated by the theme settings.

    They may increase or decrease in size (Hight or width). Many images or pictures do not look so good when minimized as they do when they are bigger. for example 16pxl upto ? 50pxl or larger sizes. you will find that aspects of the image can disappear ,sort of. You will see what i mean when you experiment with it.

    On blue or purple Backgrounds headers or footers, i tend to use a white text #FFFFFF for the main site name or anything that needs to be seen. Also try the contrast between vibrant and flat / matt shades. you will get a better result with contrast.

     

    Can display your designs or ideas on here. Its good share, exchange ideas and knowledge. others can learn and add also.

    mikel.

    • 11 posts
    August 13, 2021 8:06 PM EDT

    Happy accidents in graphic design happens to me all of the time!! 

    I do have a very bright teal as an outline.  I will try white again and see what happens.  I've played with the depth of the line thickness and have lost the gradient aspects in my texts by lines too thick.  It's defiantly trial and error to find that perfect balance.

    I always welcome advice, maybe I will be brave enough to post some images for review and critique....someday 

    • 382 posts
    August 14, 2021 6:17 AM EDT

    Hei Tiffany.

    Tip: dont add or use Text Outline. either take outline off or keep text as standard format or use text in bold.

    I recommend using Site Name text in standard format. then see how it looks over your image.

    Help ?: Send me or post here a copy of the castle turret image and i could help / work on a couple of color schemes. see what works for you.

    Also, what text format are you using. from what i see it looks like its a variation of StarTrek text.

     

    mikel.

    • 382 posts
    August 14, 2021 7:02 AM EDT

    Have a quick look.

    just an idea of what you want.

     

    I just changed the colors to a  flat / matt shades of gray. You had the right idea and i didnt want to change it, so i just tweaked the color using publisher color correction. Taking from a metallic sheen to a gray matt.

     

    The top image has no background added. so its good to copy and past over any background. the blue or the purple ?.

    The bottom 2 images ive just added a gray glow around the text.

     

    I hope this helps in your ideas for the design.

     

     

    • 11 posts
    August 19, 2021 10:29 PM EDT

    I like them all!!  I like anything with glow, glitter and dimensional.

     

    Thank you for working with my logo and coming up with new ideas.  I'd go with the blue, but my fav purple is #5500FF.  I suppose I'll be working on graphics this weekend!! 

     

     

    • 382 posts
    August 20, 2021 6:34 AM EDT

     Hei Tiffany.

    Not a problem at all.  Always good to help.

     

    mikel.

    • 11 posts
    August 20, 2021 11:05 AM EDT
    Mikel Coreclark said:

     Hei Tiffany.

    Not a problem at all.  Always good to help.

     

    mikel.

     

    Great, appreciate it!! 

    Now maybe someone can tell me where to "like posts" (otherwise I would have liked your posts and thread already and others too)....... and at what post level I will be able to edit my posts...lol...

     

    • 382 posts
    August 20, 2021 11:09 AM EDT

    Hei Tiffany. 

    Unfortunately, we cant 'edit' posts any more.

     

    As for 'liking' posts, its just a matter of 'spreading the love' to any one who may need it.

     

    mikel.

    • Moderator
    • 5919 posts
    August 21, 2021 5:25 AM EDT

    We only can't edit posts here as we have member levels set that way. We do that in order to preserve posts in case of trolling and such so that we have the proof that can't be deleted or edited by the poster. :)

    • 382 posts
    August 21, 2021 6:33 AM EDT

    Thanks Donna.

    I wasnt to sure if i was the person to mention that bit. be better coming from SE than me.

     

    mikel.

    • 11 posts
    August 22, 2021 3:42 PM EDT

    Good to know, I figured that was the case.  I'll have to really proof read before I post...

    • 382 posts
    August 23, 2021 9:49 AM EDT

    hei Tiffany.

    How are your sites coming along..You making any progress.

     

    mikel.

    • 11 posts
    August 24, 2021 5:08 PM EDT

    I am SOOOO close to launching Friend's Realm, thank you for asking.  I'm really being high maintenance for Donna right now.  (Thank you, Donna ) I'm basically making the final walk through before going "live".  Then it's on to the next website, which I'm hoping will be much easier to build lol 

     

    • 382 posts
    August 26, 2021 11:50 AM EDT

    hei Tiffany

     

    should look great great once you have finished.

    can go around like the queen of the world and tell everybody about your new site.

     

    mikel.

    • 11 posts
    August 28, 2021 12:41 PM EDT
    Mikel Coreclark said:

    hei Tiffany

     

    should look great great once you have finished.

    can go around like the queen of the world and tell everybody about your new site.

     

    mikel.

     

    Queen of the world, lol!!  I'm thinking great, positive thoughts! \u266a\u266b\u266a Very much needed in this crazy world!