First, I'm not talking about icon libraries or mockup tools/libraries.
I'm familiar with various icon libraries that people have created, but other than the stuff from the example code like UICatalog, I'm wondering if anyone knows of anyone who has created free libraries of custom button bitmaps (stretchable button images), slider handle/track bitmaps, etc Basically bitmaps to customize the look of standard controls for those controls (like buttons and sliders) that allow you to specify such bitmaps.
I'm also interested in any photoshop tutorials/templates on/for creating stretchable custom button images, bitmaps for slider parts, etc. (Afraid I'm not a huge PS god or anything.)
Anyone know of any resources like this for fancying up the standard controls?
I've been able to find several stretchable buttons by searching through my collections of sample code for: "stretchableImageWithLeftCapWidth"
From the Apple sample code, the UICatalog, BubbleLevel, iPhoneMultichannelMixerTest, avTouch, AQOffilineRenderTest, and TouchCells sample code all contain buttons with stretchable images.
Hope this helps!
Stretchable buttons is no problem - there's nothing special you need to do in Photoshop. Just make the image of the button stretchable and set the radius to that of any rounded corners you have on the button graphic.
Slider parts - I'm pretty sure you'd have to make your own UIControl from scratch.
To make a button in Photoshop, create a new file with transparent background, select the Shape tool, rectangle near the bottom of the tools, drag out a rectangle. Size doesn't matter™. For a rounded rectangle, click and hold the same tool, choose the rounded rect shape and set a corner radies (same radius as in stretchableImage later).
Double-click the layer right of the layer name to get the layer style popup. Check Color Overlay and set the color you want. Check Inner Bevel and make its size somewhere below half the height of the rectangle - I think 90 degrees for the Global Angle works well. A lower opacity and larger size makes the bevel look less chunky.
Ctrl-click (option-click) the graphics rectangle in your layer to select the button's outline. Deselect the bottom half of it by using the marquee tool (M) at the top of the tools. Select a light gray foreground color, nearly white. Create a new layer with the square icon under the layer list (Windows->Layers if not visible). Fill the selection of the new layer with the paint bucket, and drag down opacity for the layer until the 'matte laquer' effect of it looks right.
A simple button, but that's the gist of it.
Related
Hi I am trying to create custom buttons on unity (trapeziums). I successfully created the visible area on Photoshop and imported it as Sprite 2D UI as per the following image:
The issue arises, when I'm trying to select one of the buttons in game, their border overlap each other, since the transparent area is still being considered as part of the clickable button area. How can I remove this?
EDIT:
Practically when I import I want the squared boxes to not be counted with the image. I need the edges of the orange area to be cut flush with that and not the entire area(i.e. including the transparent boxes).
You may achieve this by using Alpha Hit Test Minimum Threshold. Take a look at this nice video tutorial.
There is one extra step that is not shown in the video but mentioned in the comments: you have to change "Mesh Type" to "Full Rect" and not "Tight" as it is.
Hope that helps.
The clickable area is based on the Rect Transform component of the GameObject. Adjust the width and height to the clickable area you want. You may have to crop your image in photoshop accordingly. If you select 'Gizmos' in the editor you can toggle viewing the click region.
I'm currently trying to implement a chat for my application but since I'm new at Swift development I got stuck at the part where I have to create the TableView cells for it. I was able to find 2 png images of "chat bubbles" (one for receiving and one for sending).
I placed them in Assets and loaded them in an ImageView. Now my problem is how can I place a Label inside the ImageView and rescale it depending on how many lines of text are in the Label. The bubble should not exceed 66% of the screen's width.
OK, there are a few considerations:
If you haven’t already, make your asset stretchable (where the corners aren’t stretched, but only the center is) by:
selecting the asset and zoom in so you can better refine the slices;
in the Xcode menu, choose “Editor” » “Show Slicing”;
click on “Start Slicing”:
click on the center “horizontal and vertical stretching” button:
move your guides to where you want them:
now when you add the image view using this new stretchable asset and choose “Content Mode” of “Scale to Fit”, it will scale in such a way that the center is stretched but the edges aren’t:
Also see Xcode documentation “Add a resizable area to an image”.
In your cell, now just add this image view and the label:
defining the label’s leading/trailing/top/bottom constraints to be inset from the edges of the image view;
define the label’s line count to zero;
define the image view’s width to be “>=” the container view width (with a multiplier of 66%);
obviously define your bubble’s appropriate leading/trailing/top/bottom constraints to its superview, too; and
make sure your cell is using automatic cell height.
For the sake of completeness, the other approach is to make an #IBDesignable view where you draw the bubble yourself with a CAShapeLayer whose path is the cgPath of a UIBezierPath. This is what I’ve done in my chat apps. But this stretchable image approach works fine, too.
By the way, if your speaker and listener bubbles are different colors, note that you might want to have flipped renditions of these bubbles for RTL languages.
I updated this with an image of what I am trying to achieve, its a blur on a image which adds a touch of shading and even white on white is visible. I am basically working on putting buttons of various kinds on top of images and welcome's any and all assistance on best practices. I know facebook does this in some way as an app example.
To summarize what I am trying to achieve. I have an image that takes up the full screen and I would like to place a button on top of that image that does something like blur around it with padding so that it looks clean on top of the image. My button is a heart png, red outline with clear inside, and is represented as a square because of the irregular shape. I would like the heart to be on top of a circle that does something like blur the image so it can always be seen.
I found a number of similar solutions to this problem using UIBlurEffect but nothing that specifically addresses the "square image" and how I would control making the blur circle larger/smaller in terms of the padding around the square. I tinkered with creating a UIView that was transparent, placing a circle with a blur into there and then adding the button with their centers aligned but this seems like an incorrect approach and wasn't quite working. I suspect that for people with expertise this is something where I just need to have the correct usage of the UIBlurEffect.
I am looking for some general advice and maybe some example code of what I am trying to accomplish if anyone knows of any for an iOS swift project. I would like to either:
A) Make the background, of the blue view, gray and only show a certain percent of the blue area.
OR
B) Overlay the gray area on top of the blue view and just keep making gray area bigger.
What I am trying to do is simulate battery power and show a battery.
I've considered using a progress bar and doing option A, but the blue area is NOT a solid color. Its actually an image. I've tried using an image for the progress bar, but the image needs to keep its dimensions. (Ex: If progress shows 20% it needs to show only 20% of the image or "blue area", but if you use an image as the progress bar it just shrinks the image and still shows 100% of it instead of just the 20% I need to show).
You can easily write a custom self-drawing UIView that will behave in exactly the way you describe. In other words, you tell your UIView a percentage, and it redraws itself with the blue on the left and the gray on the right. You can even draw the darker gray stroke outline shown in your drawings. All easily accomplished in code.
I like being able to lay things out visually and take advantage of autolayout. Here's how I would do this (in a nib/storyboard):
Place a UIView on your canvas and give it the gray background. Give it whatever autolayout constraints are appropriate for you.
Place a UIView inside the one from #1 and give it the blue background. Anchor it's left, top, and bottom to the gray parent view and give it whatever width (doesn't matter).
Add an outlet to that width constraint you made in #2.
Now all you have to do is modify the "constant" property of that width constraint to give you the desired "progress". So if your gray view is 100 wide and you want to present "20%" progress, then just do "yourWidthConstraint.constant = 20".
I have a grayscale icon that I'm editing with Photoshop with a transparent background, but I can't, for the life of me, figure out how to convert the icon to one that can be used as an iPhone toolbar icon. If I simply save the image as a PNG, it doesn't show up as anti-aliased on the iPhone because every pixel with color is being rendered as black, instead of a shade of gray.
According to the Apple docs and other sources, there needs to be an alpha channel on the image to specify varying levels of transparency for each pixel. However, I have no idea what that means. I've read these posts and docs from Adobe and I still can't figure out how to properly convert a grayscale image into one that can be used as an iPhone toolbar icon. The blog post is hard to comprehend and poorly written, and the Adobe docs don't really help.
http://cahit.hayalet.net/blog/514/converting-an-image-to-iphone-toolbar-icon/
http://livedocs.adobe.com/en_US/Photoshop/10.0/help.html?content=WS74B356C9-353F-4483-8632-7B1A102F2A2E.html
Can someone point me in the right direction or provide exact, step-by-step directions to doing this in Photoshop?
It's much more simple than having to muck with actual masks in Photoshop.
iPhone toolbar icons are about 30px by 30px, so make a new Photoshop file with those dimensions. Ensure the background is transparent (you can specify that when creating a new file).
Then, any pixels you draw on top of this transparency become what iOS uses for the icon. Doesn't matter what color it is in Photoshop for NSToolbar icons -- they're automatically used as masks by iOS.
Leave transparent the parts you want to show through. Save as 24-bit PNG, and chuck into XCode as usual.
For a few icons that serve as good starting examples, check out the ones I publish for free here: http://glyphish.com Just take one of the PNGs and open it in Photoshop and you'll see that it's drawn in an arbitrary color (#444444) with varying levels of opacity to create darker and lighter parts of the icon.
This is more of a photoshop question than coding but anyway, here's a suggestion.
Lunacore has a good tutorial on how to use masks.
What you want to do is:
Make sure you're background is transparent.
Create a new layer and
fill it with any solid color.
Create a mask on the solid color
layer, and fill your greyscale image into the mask. (Use your
greyscale image as the mask.)
Toolbar icons use your image as a mask. They only consider what transparancy the image has. Not what color or shade.