Design Challenge -- Round Corner mask on images

Scott Rossi scott at tactilemedia.com
Mon Mar 28 00:41:16 EDT 2016


Oh, I understand -- I'm just saying a graphic + backPattern may be a good
option because you have control over the shape (the roundRadius of the
corners be changed), the radius will auto-scale across different screen
sizes, and you don't have to pre-process all the images with rounded
corners.

Regards,

Scott Rossi
Creative Director
Tactile Media, UX/UI Design




On 3/27/16, 9:25 PM, "use-livecode on behalf of J. Landman Gay"
<use-livecode-bounces at lists.runrev.com on behalf of
jacque at hyperactivesw.com> wrote:

>My method doesn't use a graphic at all. The button itself just uses the
>image as a backpattern.
>
>I'll leave my test stack here for a while:
><https://www.dropbox.com/s/ho56oaaaqjvbe26/RoundRect%20Button%20example.li
>vecode?dl=0>
>
>On 3/27/2016 11:03 PM, Scott Rossi wrote:
>> Jacque's backPattern idea is an option purely for masking images as
>>well,
>> though you're more limited using that option.  The image and graphic
>>need
>> to be the same height, and you need to have "extra" image on the left
>>side
>> so you can crop off the rounded corners on the left.
>>
>> The advantage of that option is you probably won't get any rendering
>> artifacts with acceleratedRendering enabled (no ink effects needed).
>>The
>> disadvantage is the image needs to be fit precisely to the masking
>> graphic, while in a group with ink effects, you have more flexibility in
>> placing/sizing the image.
>>
>> Regards,
>>
>> Scott Rossi
>> Creative Director
>> Tactile Media, UX/UI Design
>>
>>
>>
>>
>> On 3/27/16, 8:38 PM, "use-livecode on behalf of J. Landman Gay"
>> <use-livecode-bounces at lists.runrev.com on behalf of
>> jacque at hyperactivesw.com> wrote:
>>
>>> On 3/27/2016 5:26 PM, Sannyasin Brahmanathaswami wrote:
>>>
>>>> I'm thinking this is probably (I hope)  not that hard to implement.
>>>>
>>>> it's obviously easy enough to create a background graphic with round
>>>> corners, add a small field on the left site that is transparent, lock
>>>> that, put an image on the right side, make this a small group and
>>>> give the name of a target and we have a nice cool "button" but how do
>>>> I get the image in the right half of the group to take the rounded
>>>> corners of the background graphic?
>>>>
>>>
>>> I could reproduce it this way:
>>>
>>> Have your designer create the entire content of the image area,
>>> including the beige left-side label area, but without any text. Import
>>> the image.
>>>
>>> Make a button the same dimensions as the image. Set the button
>>> properties to:
>>>
>>> Showborder: false
>>> Opaque: true
>>> Backpattern: the ID of the image
>>> Margins: 4,4,250,4
>>> Textsize: 28
>>> Label: set it in the msg box or script:
>>>     set the label of btn x to "Three" &cr& "Line" &cr& "Label"
>>>
>>> You can't type in a multi-line label in the inspector, but you can set
>>> one via script.
>>>
>>> This gives you a regular button that you can attach a script to
>>>normally.
>>>
>>> --
>>> Jacqueline Landman Gay         |     jacque at hyperactivesw.com
>>> HyperActive Software           |     http://www.hyperactivesw.com
>>>
>>> _______________________________________________
>>> use-livecode mailing list
>>> use-livecode at lists.runrev.com
>>> Please visit this url to subscribe, unsubscribe and manage your
>>> subscription preferences:
>>> http://lists.runrev.com/mailman/listinfo/use-livecode
>>
>>
>>
>> _______________________________________________
>> use-livecode mailing list
>> use-livecode at lists.runrev.com
>> Please visit this url to subscribe, unsubscribe and manage your
>>subscription preferences:
>> http://lists.runrev.com/mailman/listinfo/use-livecode
>>
>
>
>-- 
>Jacqueline Landman Gay         |     jacque at hyperactivesw.com
>HyperActive Software           |     http://www.hyperactivesw.com
>
>_______________________________________________
>use-livecode mailing list
>use-livecode at lists.runrev.com
>Please visit this url to subscribe, unsubscribe and manage your
>subscription preferences:
>http://lists.runrev.com/mailman/listinfo/use-livecode






More information about the use-livecode mailing list