I recently purchased Drew Wilson's Pictos icon library. It is a library of flat, monochromatic icons for use on the web and elsewhere. The only issue is: they're vectors. I know my way around Illustrator a little bit, but ultimately I want to import these icons into Photoshop CS4 and resize to various dimensions.
When I import an icon and resize it to, say, 20x20 pixels, I notice that there is a fair bit of aliasing around the edges of the icon. I'm sure there is some magic number where the edges of these icons will remain crisp, but I can't find any option or setting that will allow me to size these icons properly.
How can I snap these icons to the closest size that removes or minimizes the aliasing?
The aliasing / pixelating is because vectors export out of illustator # whatever size they're copied #
Try opening the icons in illustrator... scaling them waaay up
And then just keep a copy of the huge ones in a separate layer
Copy that layer when you want to scale it down ..annnd that way you'll have a copy to work with..and u won't have to re
Open the file every time u need to make an edit
And a good rule of thumb for pixelation is
You can always size down.. but sizing up will create pixelating in bitmaps
Chances are, you have your logo in .eps format. If you do, open your .eps file in Photoshop. A dialog box will pop up asking the size you want to import. Be sure to select RGB color if this will display on the web. Select the Anti-aliasing checkbox. When your file opens up, zoom in, and you'll notice that Photoshop has neatly anti-aliased all of your edges for you.
Related
I've an image like the one in the following link
https://www.freecodecamp.org/news/how-to-center-an-image-using-text-align/
I want to cut and move one half of the image close to the other (one building close to the other in the example image share above). In real case, I have a similar image with white space in between. To cut one part of an image I do Object-> Clip -> Set on the selection. This crops the selection alone. But I am not sure how to select and move the selection.
Could someone please help?
Duplicate the image, then clip both images to the two parts that you need. Then use snapping to move them both together exactly.
Or (better), use a raster graphics editing tool of your choice and do the same. While the above-described workflow works, Inkscape, being a vector graphics editor, is not the appropriate tool for this kind of thing.
Here's the issue at hand. I need to be able to pick a background (an image showing an object, let's say, a starship model). I want to be able to apply various previously prepared textures to various areas on it, as some kind of a "colour your own object" app, but without the need to prepare dozens of individual segments.
Ok, so this is one, newbie way to do it. We have those images:
Two kind of different versions, an original photo and a quickly Photoshopped one. Let's say we only want the Borg-ish green deflector and warp nacelle from the second picture, without the odd pink hull. You have to have a mask, basicly an image of an equal resolution (or at least the same aspect ratio, which you can reliably scale to image's resolution), with the area filled with color (or whatever else), and transparent area everywhere else. As the mask, I've used a few strokes of brush on an empty layer, set to overlay mode, and then saved as PNG, with transparency. And this is how the code went:
First, import images.
QPixmap background("orig.png"); //import base image
//import alt version/texture/whatever you want, anything will work with a good mask
QPixmap element("alt.png");
QPixmap mask("deflector.png"); //mask. Just nacelles and deflector.
Then, isolate the area that interests us from alt version
QPainter painter(&element);
painter.setCompositionMode(QPainter::CompositionMode_DestinationIn);
painter.drawPixmap(0, 0, mask.width(), mask.height(), mask);
And finally draw it onto the target object.
QPainter inter(&background);
inter.drawPixmap(0, 0, element);
ui->label->setPixmap(background);
The result:
This method respects any and all transparency you could've done in Photoshop or another image editing software.
Simple, but an effective solution, for when your app has to work with graphics prepared by someone else, elsewhere.
I have an SCNNode that has its geometry populated from a collada file (.dae) and displays correctly on screen. I can apply materials to the geometry easily enough, however I'd like to change the scale of the material.
I currently populate it with
nodeArray[0].geometry?.firstMaterial!.diffuse.contents="wood.png"
but the scale of the material is too small. While I can edit the png in GIMP or something similar and import it as wood2.png is there any way I can set the material scale programatically?
what do you mean by "too small" ?
Geometries are made of different sources such as the vertices' positions, but also their texture coordinates. These texture coordinates (they belong in [0,1]x[0,1]) are specified per vertex and indicate where to look in the texture.
In your 3D modeler please check that your texture coordinates match what you want (i.e. they cover the whole image i.e. they go from 0 to 1 in very direction), and make sure that your image has no extra transparent margin or other wasted space.
You can have a look at SCNMaterialProperty's contentsTransform property. But please check your model and texture before using it.
You need to open your UV snapshot in an image editing software like Photoshop, scale the wood texture in Photoshop over your UV's, then resave your PNG/JPG, move PNG/JPG back to Xcode
I have a lot of images with a resolution around 500x1500 and I want to show all those images in a grid on my website. Each picture in the grid should be 200x200px.
If I scale down the images with CSS from 500x1500px to 200x200px and I show 10 200x200px images on my website, does this mean that the visitor first have to download the 500x1500px images and then their browser scales the pictures down?
If that is the case, then it's a bad solution to do it like this, right? Instead I should have two versions of each picture, one 500x1500px version and one 200x200px version. Am I right?
The question then is what's the easiest way to scale down hundreds of images?
Yes, I think it is the case that the browser will download the larger image and then scale it. You can check for yourself by opening the dev tools on the browser (press F12 if you're using Chrome) and monitoring the network traffic when you reload your site.
The easiest way to scale down hundreds of images is find or write a program to do it.
You are right. You can set height and width of the images but 1) the user will have to download a bigger image than necessary and 2) the height x width ratio will be trouble (the big one is 1x3 and the small one is 1x1). I would either use http://www.imagemagick.org/ , gimp or a similar tool to crop the images, but the problem is that the cropped area might not be very good. Only a human can select a good fit for the cropped area :-(
Edit1: Perhaps a well-trained neural network could select the most "interesting" part of every image programatically but that's kind of a lot of trouble to do that. Still it could be pretty interesting :-)
Has anyone seen tooling, or even a process concept to generate css sprites from an existing website's images, and css during the build process?
I should think the steps would be:
walk an images directory
create a single sprite file from all the images in that directory
for each image
find any css classes using that image
update the css class to use the new sprite file
I'll using asp.net so something in msbuild would be awesome. However, I'm finding little out there even coming close.
You could use this http://spritegen.website-performance.org/ which is BSD licensed code. (see the download link on the right hand side.)
An automatic process like that only works well if you have a few simple images. There are several reasons to do the process manually:
Some image formats work better than others for sprites. If you try to make sprites out of JPEG images the compression will easily bleed from one image to another causing artifacts. Index color formats like GIF and 8-bit PNG has a limited number of colors, so if you put images with too varying color palettes together you will lose colors.
You may want to repeat an image horisontally or vertically, which makes it harder to combine the sprite image.
If the image is smaller than the element that you use it in, you would have to pad the image with transparent pixels. If the size of the element is dynamic in any way, the automatic process would not even know how much padding the image would need.