Liz Myers gives a presentation on designing mobile icons. She discusses her background in icon design for Windows 3.1 applications and how the process has improved with vector graphics. Myers recommends sketching ideas with paper and pencil before using tools like Illustrator and Photoshop. She demonstrates techniques for pixel-perfect icons, including using basic shapes, negative space, and templates from the BlackBerry style guide. Myers concludes by sharing her top ten tips and doing a live demo of the icon design process.
This magazine pertains to my growth and experiences with art. It shows the art pieces that I have made within my time in computer graphics, art seminar and previous high school work. Each art piece is given a discription as to how I developed the pieces. References to other sites where my work is, is also included within the magazine. Images from previous projects that I have done within my high school years were also included to show the similarities and changes that I have taken when creating my art.
This magazine pertains to my growth and experiences with art. It shows the art pieces that I have made within my time in computer graphics, art seminar and previous high school work. Each art piece is given a discription as to how I developed the pieces. References to other sites where my work is, is also included within the magazine. Images from previous projects that I have done within my high school years were also included to show the similarities and changes that I have taken when creating my art.
From Zero to App-Super-Hero with TitaniumLiz Myers
In this presentation Liz Myers shares the design strategy that went into building her app, 2Scoops, and demonstrates how to get started building mobile apps with Appcelerator Titanium. Also included here are Liz's favourite resources for app design & development.
Here are some simple tips/hacks which are very helpful in designing a presentation. These hacks do not need any special knowledge. All material required for the hack is included in the presentation itself.
The 17 Graphic Design Tips All Non Designers Need to KnowRam Chary Everi
I am not a trained graphic designer. But if you’re reading this post, you’re probably not either. And I’m guessing you’re not heading to art school anytime soon.
Ubercool, pixel perfct & slick design… that just doesn't workSamuel Bednar
How talked about my happy days of graphic design, how I had thought everything had been about nice fonts and colors. I didn’t bother with testing. Now when I look back, I can see the path of destruction my carefree days have left. Here are 99 problems of graphic designer.
Icons are an essential part of it that helps the viewers navigate around the app. Discover the icon design trends for 2023 and practical tips on their usage.
From Zero to App-Super-Hero with TitaniumLiz Myers
In this presentation Liz Myers shares the design strategy that went into building her app, 2Scoops, and demonstrates how to get started building mobile apps with Appcelerator Titanium. Also included here are Liz's favourite resources for app design & development.
Here are some simple tips/hacks which are very helpful in designing a presentation. These hacks do not need any special knowledge. All material required for the hack is included in the presentation itself.
The 17 Graphic Design Tips All Non Designers Need to KnowRam Chary Everi
I am not a trained graphic designer. But if you’re reading this post, you’re probably not either. And I’m guessing you’re not heading to art school anytime soon.
Ubercool, pixel perfct & slick design… that just doesn't workSamuel Bednar
How talked about my happy days of graphic design, how I had thought everything had been about nice fonts and colors. I didn’t bother with testing. Now when I look back, I can see the path of destruction my carefree days have left. Here are 99 problems of graphic designer.
Icons are an essential part of it that helps the viewers navigate around the app. Discover the icon design trends for 2023 and practical tips on their usage.
Bring the intangible to life with Concept Visualization: Part 3 of 3Deliverable Coaching
This is a three part series on Concept Visualization for presentations. It's a ton of content - text, videos, and slides - but by the end of the series, you'll know how to bring to life intangible ideas with stunning, easy-to-understand, visuals in your next presentation.
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™UiPathCommunity
In questo evento online gratuito, organizzato dalla Community Italiana di UiPath, potrai esplorare le nuove funzionalità di Autopilot, il tool che integra l'Intelligenza Artificiale nei processi di sviluppo e utilizzo delle Automazioni.
📕 Vedremo insieme alcuni esempi dell'utilizzo di Autopilot in diversi tool della Suite UiPath:
Autopilot per Studio Web
Autopilot per Studio
Autopilot per Apps
Clipboard AI
GenAI applicata alla Document Understanding
👨🏫👨💻 Speakers:
Stefano Negro, UiPath MVPx3, RPA Tech Lead @ BSP Consultant
Flavio Martinelli, UiPath MVP 2023, Technical Account Manager @UiPath
Andrei Tasca, RPA Solutions Team Lead @NTT Data
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
The Metaverse and AI: how can decision-makers harness the Metaverse for their...Jen Stirrup
The Metaverse is popularized in science fiction, and now it is becoming closer to being a part of our daily lives through the use of social media and shopping companies. How can businesses survive in a world where Artificial Intelligence is becoming the present as well as the future of technology, and how does the Metaverse fit into business strategy when futurist ideas are developing into reality at accelerated rates? How do we do this when our data isn't up to scratch? How can we move towards success with our data so we are set up for the Metaverse when it arrives?
How can you help your company evolve, adapt, and succeed using Artificial Intelligence and the Metaverse to stay ahead of the competition? What are the potential issues, complications, and benefits that these technologies could bring to us and our organizations? In this session, Jen Stirrup will explain how to start thinking about these technologies as an organisation.
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Climate Impact of Software Testing at Nordic Testing DaysKari Kakkonen
My slides at Nordic Testing Days 6.6.2024
Climate impact / sustainability of software testing discussed on the talk. ICT and testing must carry their part of global responsibility to help with the climat warming. We can minimize the carbon footprint but we can also have a carbon handprint, a positive impact on the climate. Quality characteristics can be added with sustainability, and then measured continuously. Test environments can be used less, and in smaller scale and on demand. Test techniques can be used in optimizing or minimizing number of tests. Test automation can be used to speed up testing.
Removing Uninteresting Bytes in Software FuzzingAftab Hussain
Imagine a world where software fuzzing, the process of mutating bytes in test seeds to uncover hidden and erroneous program behaviors, becomes faster and more effective. A lot depends on the initial seeds, which can significantly dictate the trajectory of a fuzzing campaign, particularly in terms of how long it takes to uncover interesting behaviour in your code. We introduce DIAR, a technique designed to speedup fuzzing campaigns by pinpointing and eliminating those uninteresting bytes in the seeds. Picture this: instead of wasting valuable resources on meaningless mutations in large, bloated seeds, DIAR removes the unnecessary bytes, streamlining the entire process.
In this work, we equipped AFL, a popular fuzzer, with DIAR and examined two critical Linux libraries -- Libxml's xmllint, a tool for parsing xml documents, and Binutil's readelf, an essential debugging and security analysis command-line tool used to display detailed information about ELF (Executable and Linkable Format). Our preliminary results show that AFL+DIAR does not only discover new paths more quickly but also achieves higher coverage overall. This work thus showcases how starting with lean and optimized seeds can lead to faster, more comprehensive fuzzing campaigns -- and DIAR helps you find such seeds.
- These are slides of the talk given at IEEE International Conference on Software Testing Verification and Validation Workshop, ICSTW 2022.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
Enhancing Performance with Globus and the Science DMZGlobus
ESnet has led the way in helping national facilities—and many other institutions in the research community—configure Science DMZs and troubleshoot network issues to maximize data transfer performance. In this talk we will present a summary of approaches and tips for getting the most out of your network infrastructure using Globus Connect Server.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofsAlex Pruden
This paper presents Reef, a system for generating publicly verifiable succinct non-interactive zero-knowledge proofs that a committed document matches or does not match a regular expression. We describe applications such as proving the strength of passwords, the provenance of email despite redactions, the validity of oblivious DNS queries, and the existence of mutations in DNA. Reef supports the Perl Compatible Regular Expression syntax, including wildcards, alternation, ranges, capture groups, Kleene star, negations, and lookarounds. Reef introduces a new type of automata, Skipping Alternating Finite Automata (SAFA), that skips irrelevant parts of a document when producing proofs without undermining soundness, and instantiates SAFA with a lookup argument. Our experimental evaluation confirms that Reef can generate proofs for documents with 32M characters; the proofs are small and cheap to verify (under a second).
Paper: https://eprint.iacr.org/2023/1886
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Quality on Tap
1. @LizMyers @2ScoopsApp MyersDesign.com
Good afternoon, I’m Liz Myers, Director of Myers Design based in London. This is JAM 399
and I’m delighted to have this opportunity to share the art of making mobile icons. Later I’ll
demonstrate the icon design and production process in detail. But first I’d like to tell you just
a bit about my background as well as show you the tools and techniques I use to create
mobile graphics.
3. @LizMyers @2ScoopsApp MyersDesign.com
Back then we used - Paintbrush which had a palette of only 16 colours. If you wanted more
you had to make them yourself by dithering or creating a swatch like you see on the far right
hand side (it’s made of alternating two of the 16 colours - pixel by pixel. (in fact as you can
see the whole image is by “pushing pixels” as we affectionately called it)
4. title bar/buttons
application icons
Here’s a closeup of the Program Manager icon. The user interface guidelines mandated 3D
with the light coming from a 45 deg angle and you can see that we had to paint that in using
white and grey highlights - the whole things was saved as a bitmap and it wasn’t flexible at
all. (didn’t even have an alpha channel)
5. @LizMyers @2ScoopsApp MyersDesign.com
Fast forward to today and things have improved dramatically. By using vector graphics we’ve
got a lot more flexibility in terms of scaling these images without losing quality. and even
more importantly in being able to colourise and apply different styling to make them fit with
all the different operating sysems: BB10, iOS, and Android.
6. @LizMyers @2ScoopsApp MyersDesign.com
http://myersdesign.com
This is why I felt it was really important to not only make these icons for you - but teach you
how to edit them and create your own. In a few moments, I’m going to share all the tools and
techniques I use in order to help you edit mine and create your own. But first I need to get
you in the right frame of mind.
9. @LizMyers @2ScoopsApp MyersDesign.com
and the right side is the creative one- where ideas are formed, artwork is created. This is
where icon design begins. All you need to get started are really paper and pencil or even
purple crayon.
10. Now to help illustrate the kind the art of sketching icons - I want to share a bit of this
children’s story - Harold and the Purple Crayon (how many know this one?)
11. @LizMyers @2ScoopsApp MyersDesign.com
One evening Harold decided he wanted to go for a walk in the moonlight. But there was no
moon, so he drew one... [i love that - a moon in two simple strokes. (You could do the same
with a half circle)
12. @LizMyers @2ScoopsApp MyersDesign.com
He also need a path to walk - so he drew one of those . . . [and now that line is defined as a
path -we’re getting drawn into the story)
13. @LizMyers @2ScoopsApp MyersDesign.com
but the path didn’t seem to lead anywhere - so he took a shortcut through the forest - with
only one tree. [clever isn’t he? already sign -posting our way thru the story, tree stands for an
entire forest ]
23. @LizMyers @2ScoopsApp MyersDesign.com
Harold sails off to the next app-venture. He’s got all the attributes of a terrific BlackBerry
Developer. His sketches flow fast and freely, and it’s all a natural process for him. This is what
i want you to remember - there’s no right or wrong way to make great icons [sure there’s a
production process] - but more importantly this is about communication - and you need to
pick up your pen or pencil or even purple crayon BEFORE you sit down to the computer. It all
begins with your right-brain, your imagination and a quick sketch on paper.
24. @LizMyers @2ScoopsApp MyersDesign.com
tools
PS
PNG
AI BB10 ICONS
Now let’s take a look at the tools and guides you can get to create icons like I am in Adobe
Illustrator and Photoshop. I like these best, but you don’t have to use these if you have
others. The techniques I’ll demonstrate here are applicable no matter what the tools.
25. https://creative.adobe.com/plans
The pro tools are actually more affordable than ever: a subscription to the Creative Cloud
where you have access to all the leading CS6 tools costs just 36 euros per month. that’s a
pretty good deal considering the stand-alone prices of PS (524 euros) and Illustrator (449
euros) and of course you get access to further tools like Edge (animation) and Shadow plus
lots more.
27. @LizMyers @2ScoopsApp MyersDesign.com
57x57
81x81
43 x43
71x71
43 x43
61x61
Large
Medium
Small
There are actually 3 icon sizes in BB10. Large is for action bar, tabs, and menus. Medium is
for components, and the smallest size is used for status indicators - like in the splat marking
new messages or updates, for example.
28. @LizMyers @2ScoopsApp MyersDesign.com
57x57
81x81
43 x43
71x71
43 x43
61x61
Large
Medium
Small
Today we’re going to focus on just the large icons. And you don’t really need to worry about
the dimensions here because they’re already built right into my illustrator templates.
29. @LizMyers @2ScoopsApp MyersDesign.com
BB10 ICONS
calls chat mail calls chat mail
#4F4F4F to #363636
#E3E3E3 to #D1D1D1
treatment
Treatment: the style guide recommends 2D or “flat design” with the light shining down at a
90 deg angle. (think angle of the sun at high noon). Regarding colour - there are two styles
for Large icons - those that are meant for a dark theme and those that are meant for the
light. Again, don’t worry about the hex values here they’re built into my templates and
available in the style guide.
30. @LizMyers @2ScoopsApp MyersDesign.com
BB10 ICONS
colour
only the smallest size status indicators have a colour system and the palette follows road
signs: red is an alert, yellow is a warning, and green/blue - the cool colours are for
information. Due to about 10-12% of the people being colour blind the basic icon is
augmented with symbols and letters.
31. Text
ustwo.co.uk/blog
I’ve also found the Pixel Perfect Precision Handbook by UsTwo very helpful and I highly
recommend you download it from their blog. You’ll want to read every word of this little
guide - but here are two of the most important parts.
32. nice!naughty
In order to get pixel perfect precision or sharp edges, you need to turn on a feature called
“snap to pixel”
33. and this is found under the view menu in Photoshop (which you see here) as well as
Illustrator (where it’s called snap to point). Additionally, the UsTwo guide tells you how to set
up your grid. . .with a line every 10 pixels. I’m also using a Gridline every 81 pixels here to
mark the outside border of the icons.
34. @LizMyers @2ScoopsApp MyersDesign.com
http://imageoptim.com
The other two big take-aways are the script plugins for PS which automate the process of
exporting layers as PNG files - as well as this image optimisation tool. And we’ll see how
those work during the demo. But we’re getting ahead of ourselves. Before we can export
anything we need to draw it first.
37. @LizMyers @2ScoopsApp MyersDesign.com
shapes
BB10 ICONS
You can make 80-85% of the icons you need from these basic shapes
No 9: “Don’t hurt me please”. (Josh Clark - TapWorthy, round is finger-friendlier)
38. @LizMyers @2ScoopsApp MyersDesign.com
Tip 8. Stick to Black and White - apply colour later.
Icon design = logo design and if works in B/W - it will work just as well in colour
39. Tip 7. Less IS more - really! Just enough detail to recognise the shape. Notice here, the open
box uses as much negative space as positive. this is interesting b/c the eye needs to fill in
the missing bits - encourages user engagement
40. @LizMyers @2ScoopsApp MyersDesign.com
Tip 6. Zoom in tight / focus the eye. Here’s i’m also “bleeding” the image off the edge - this
creates dramatic interest and is also a good technique for App Icons.
41. @LizMyers @2ScoopsApp MyersDesign.com
London-Titanium Paris-TitaniumAmsterdam-Titanium
i
BTW - this set make good app icons b/c they have a solid background shape which
establishes the space on screen and protects against busy wallpapers on device. They also
indicate the tap target for the user and provide contrast for the image overlay. BTW - more
complex vectors like the London-Eye or Eiffel Tower can be found at istockphoto.com
45. @LizMyers @2ScoopsApp MyersDesign.com
Tip 4. Self-reflection is a beautiful thing. When using the pen tool and drawing free-form it
can be difficult to achieve symmetry. So I try to focus on getting one half the image right and
then reflect and join the shapes to get the look I want.
46. @LizMyers @2ScoopsApp MyersDesign.com
10
Tip 3. when in doubt - cut it out. This means two things: a) look at the power of negative
space. In these examples, you can see how i’ve literally “cut the image out of a background
shape and the negative space provides both striking contrast and visual interest. I’ve also left
out all but the quintessential elements.
48. @LizMyers @2ScoopsApp MyersDesign.com
Tip 1. Don’t forget your big purple crayon. Remember to sketch your ideas first on paper.
This will allow your natural creativity to flow and your right brain to function properly.
There’s something about hand-eye, pencil and paper that is simple, and clean and
communicative in a way that the computer is not. So it’s really important you do this first,
then sit down to the computer.
50. @LizMyers @2ScoopsApp MyersDesign.com
10. Use basic shapes
9. Keep them finger-friendly
8. Stick to black & white
7. Less IS more
6. Give me my space
5. SHIFT+ALT+Drag are your friends
4. Self-reflection is a beautiful thing
3. When in doubt, cut it out
2. Let the computer do the work
1. Remember purple crayon (first!)
BB10 ICONS
tips
52. @LizMyers @2ScoopsApp MyersDesign.com
thank you!
JAM399
#bb10icons
I hope you’ve enjoyed todays presentation and can see just how easy it is to create BB10
icons. If you need further assistance with any custom icons, please feel free to tweet your
request to #bb10icons or get in touch via the contact form @ myersdesign.com. Thank you.