I wanted to know is there is any one who had this design or any one could tell me the way how to create this type of shadow behind the words in the following image
image
so is there is anyway to create this in illustrator
From my knowledge that design would probably be a vector, which someone may or may not have. Overall you could remake a similar on with Photoshop, or illustrator, or a free editing software and overlaying white letters on a background with a drop shadow. There are tons of tutorials on google of how to achieve these task hopefully this helps
Related
I am looking for some insight on how to achieve a certain result with email-specific HTML+CSS. I've done some searching and I can't really find anything quite specific enough to fit my needs. I am a decently experienced front-end website designer/builder, but I am new to email HTML. My clients have always used a drag and drop service, but I want to be able to offer higher-quality email designs.
Here is an image that shows my desired outcome, with the green color being the background of the body of the email so that the shape just blocks out the correct parts of the image:
I know this might not be possible with the limited html/css that is required in email design, but if it is I'd love to see an example of it working or if anyone knows a good resource to learn the ins and outs of email code I'd really appreciate it.
My idea originally was to use image 1 as the background of a table, then the 2nd layer of the table, use image 2 as the background, or just add in the image inline with full width. I'd love to be able to put text positioned center, but again that might not be possible, I just don't know the limitations well.
Thanks!
I am planning to create a little website(forum) with Quiz questions. So I had an idea to make cool borders in Photoshop(ice, fire, earth) and to implement them on the website. I don’t have any experience in creating live websites whatsoever, so I am interested to know what are the best practices for doing this? The problem is that questions could have anywhere from 10 to 100 words so I need different border sizes.
I currently have two ways of doing this, but neither really satisfies me.
1) Create different border sizes in photoshop and when posting questions check for character length and use appropriate border.
2) Create images with questions already, and post it like that.
I am also worried about the speed of the site. I realize that this is not a common practice, but is it doable? Any input or guide is appreciated.
The easy way to do this is with the CSS border-image property. You can create a square image with the borders you want and then add a CSS prroperty with the following format:
question-border{
border-image: url(<url of image on webserver>) <px size of border> <stretch/round>
}
Using stretch will stretch the middle part of the image, while using round will tile it.
The example on w3schools shows this well.
I want to create a rounded border in CSS that looks pixelated when zoomed in.
This is what a rounded border looks like up close: http://imgur.com/zbNv8pB
And this is what I'm trying to make it look like: http://imgur.com/ODK6Cm3
This is a specific aesthetic that I'm trying to achieve with my site, but I could not find any tutorials on how to do this. What I want to know is if this is possible outside of going oldschool and using images. I'm sure anyone who wants to recreate old-fashioned looking webpages will find this useful, and there's an entire community of pixel-artists that would love to use this too.
The fact that I can find no help on this tells me it's either not possible or I'm literally the only person who cares about this. If it's the latter then that's a serious negligence on the part of this programming language, especially when this option is already available for images with image-rendering.
This is mainly a question about the quality of logos/icons used in Websites. I create logos/icons using Illustrator but when I see icons on professional websites (see image and links), they look crisp like a text, with no blurriness. The edges are very clear. For example, please see this image, especially the search icon and the menu list icon:
This is my own Blog that has bad icons, the Logo and the Menu icon. Both of them are PNG images.
This is Entrepreneur website with awesome menu icon and search icon. If you check the Inspect Element for mobile site, you'll see that the search icon and menu icon are not images (I don't know actually the reality). It is using a pseudo element. How does it work? Maybe this has something to do with quality.
Same is true with TimeofIndia website. Here the menu icon is made using hr tag, so it's obviously great, but still the search icon is beyond understanding as it is using a pseudo element.
And another scenario is related to this Business Insider website's technique. I've seen it at most of the websites, especially Facebook like sites. They use a single image for all icons. How's it possible? If you don't understand please visit this website and check the URL of the menu and search icon's image. How's it done?
So first I would like to know how these things work? How these icons render?
Secondly why I'm not getting the quality like them? Should I stop using images like them? I'm asking this because I've tried exporting in many ways using Illustrator, with same dimensions as required, but still quality sucks. If you can see, in my own blog's (Blog) mobile site, the middle horizontal bar is blurred despite the original image looks awesome before upload. Why is that?
I think these are too many questions. I would appreciate if you can provide suitable links to understand these things fully, if explaining them here is not easy.
Thank you.
If I could, I'd give #marc-b five upvotes :) The first step, before coming to SO, should always be trying to solve the problem yourself. Then you can come to us with an on-topic question. Here, that first step is to right click on one of the icons you're interested in, and choose "inspect".
There are a couple questions here: what are some ways of making crisp images?, and what's the deal with having multiple images in one file? Both of those are very Googlable, but I'll give you a head start:
Two common ways to make images crisp are:
SVG (vector graphics - as an Illustrator user you already know about the difference between those and raster graphics, and why they're crisp. If not, google "vector raster difference")
2x images - the technique here is to make an image twice the final display size, and then use CSS to shrink it down. The in-browser scaling will have a crisper result that just displaying a 1x image.
Having more than one image in one is called a "sprite." You can have a raster sprite or an svg sprite.
Here's an intro to svg https://css-tricks.com/using-svg/, here's an intro to sprites https://css-tricks.com/css-sprites/, here's an intro to svg sprites https://css-tricks.com/svg-sprites-use-better-icon-fonts/, and here's an intro to the latest thing, srcset https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
i already have this sprites on my computer (taken from internet), but how do i make it faces top left? because this sprites do not have character that faces topleft.. My question is, how do i do that? i want use this sprites character for my game, 2.5D..
Thanks.
I want it to faced like this (topleft):
I appreciate your answer. Thanks.
You're wanting to make the sprite face diagonally, somewhat up, and somewhat to the left? (To me, it looks like the chicken is facing to the right, but it's hard for me to really make out individual features on the chicken.)
In that case, you probably really need to draw a new graphic that is based on the others. Hire someone else, if you have to. Stuff that's easy to do in a typical programming language would have to do more with moving graphics around (translation), flipping them, rotating them, stretching them, that kind of thing. Those are the four basic geometric transformations in a programming language, and simply changing the alpha of the whole thing or something like that should be easy as well. But it's not easy at all to programmatically create something that looks like a brand new graphic, even if it is sort of similar to some graphics you already you have.