Welcome to San Francisco Drew

Greetings to anyone who is reading this. This is my chance to give an update since so many things have happened in the last year. Let me just say Wahoo!!!!!. So the family is now living in Alameda, CA. Love it there. Very family friendly and close to everything in the bay area. Things have never been more exciting from a day to day perspective. Since my last few posts I have moved my family out to San Francisco to work at CrossCap.com. My son is now 3 and half years old and just thriving, which is very exciting. I plan on starting my posts back  up with relevant Fireworks workflow samples of how I am tackling large complex problems and managing them through fireworks. In the meantime here are some fun photos.



Idea Paint Universe

Play Time with homemade Bamboo Swords

astronaut sketch


Out in front of the house

Out in front of the house




I live in Alameda, CA

Awesome Design Resources

Awesome Design Resources


It’s been a while since my last post but wanted to let every in on a few more great resources I’ve compiled in the last 6 months.


Fireworks Resources

1. Specctr – Awesome Specing Command – Visit Site

2. Explosion of Fireworks Resources – Too much to list. –  Visit Site

3. Extending Fireworks – nice blog for Fireworks lovers. Visit Site

4. Bootstrap for Fireworks  – Visit Site

5. Developing A Design Workflow In Adobe Fireworks - Visit Site

6. 7 Reasons to use Fireworks Vs PhotoshopVisit Site

7. 50 reasons NOT to use Photoshop for Web Design - Visit Site

8. Typekit – ” If you have adobe cloud you can sign in with your adobe ID. It is apart of your membership” – Visit Site

9 . John Dunnings Fireworks Commands – Visit Site

10. How to Use CSS Sprites in Fireworks and Dreamweaver –  Visit Site

11. ZurbVisit Site

12. Mobile Web Best PracticesVisit Site

13. Responsive Design Awesomeness – This is incredible Resource,Thanks to Brad Frost – Visit Site

Testing Responsive

ResponsinatorVisit Site

Responsive PXVisit Site


Other Cool Resources

1. http://gradients.glrzad.com/ – CSS Gradient Creator

2. mediaqueri.es  - My absolute favorite website to see the latest and greatest Responsive Designs.

3. HOW TO: Grow an Avocado Tree from an Avocado Pit

4. ShopTalk – Chris Coyer from CSS tricks has a cool talk show


More Resources from Michelle

Axure: http://www.axure.com/
Heavy duty wireframing and prototyping tool

Evernote: http://evernote.com/
App for storing online notebooks. There are versions of it for mac, pc, android, and iphone so you can keep all of your notes synched and available on all your devices. I use it to store code snippets, how to’s, research, my portfolio, and morgue files for design ideas

Safari Online Books: http://my.safaribooksonline.com/
We have a subscription that gives us access to thousands of books and videos

Lynda.com: http://www.lynda.com/
Subscription to training videos for all Adobe apps plus a bunch more, SharePoint, Office, etc.

DeepTrawl: http://www.deeptrawl.com/
Application for checking links and other usability issues automatically for a whole site

Pocket: http://getpocket.com/
Web app that used to be Read It Later, has apps for ipad and iphone, lets you mark sites you want to read later and it synchs across all your devices

Feedly: http://www.feedly.com
It’s a feed reader but made more for designers, has a cool ui, makes all your feeds look like a magazine, reminds me of Flipboard for iphone

Survey Monkey: https://www.surveymonkey.com
We use this for all of our surveys and portal update requests

Google Glass (Now With Video!) Demo Video

Incredible introduction to Google Glass. This really opens the door for so many things. WOW. This takes a huge step in technology and delivers so much possibility. Watch the Video, and think of how many things you could do with this. The first few things that came to my mind.

1. Demoing any new Product! “LIVE!”
2. Mountain Bike, Camping Trips
3. Experiencing crazy things on the spot quickly and efficiently.
4. Augmented Realty live apps.
5. App Integration for this could be so cool.
6. Concerts, Conventions, Training, Sports,


Have fun watching!


EPA Recycling Widget

This tool helps you understand the energy saved by recycling small quantities of common household products, rather than landfilling them.

Fireworks CS6 is awesome!

Adobe CS6 creative cloud is pretty awesome. My favorite update to the new version would have to be Fireworks CS6. It’s super fast and has so many new little additions but big enhancements. I’ve only been using it for a few days now and I wanted to list my top 5 favorite additions.

1. Common Library – The new common library has a bunch of out of the box goodies. The adobe team has add the iphone/ipad toolkit for wireframing. This is great for beginner designers who haven’t messed much with IOS elements. It also comes with some basic icons which can help when prototyping and creating some placeholders for your new custom icons to come in the future.

2. Common Styles – The best thing about the update in CS6 is if you create styles in one document. Fireworks saves this for future documents. This is incredibly nice and convenient.

3. Grid Structures – New out of the box grid templates to design from. At Savannah College of Art & Design we learned the importance of making and breaking the grid. But its super smart to be aware of grids and how to use them in design.

4. Saving a document. – Now you can append a .fw.png to the document so you and differentiate between a source file or a simple flat png graphic. Clean Clean Clean, and super helpful in my workflow process.

5. Properties Panel - Color Picker is enhanced, you also have the option to copy the Hex/rgb and paste it directly into your development tool. I really like the feature to change the opacity of the color inside the pop up window shown below. This is a super handy powerful weapon we as designers now have.

The Future of Mobile

Business Insider released this incredibly valuable Slide Deck on mobile statistics. This is changing everything. The way we design, the way we think about mobile first. The list goes on and on. If your a business owner, designer, developer, market strategist, this should be a priority in your growth initiatives. Check out the Deck and really absorb these staggering statistics.

Your Friends at Bridewell Design

Click Here to review the Slide Deck

50 Reasons Not to use PhotoShop for Web Designs

I Read this article on reinegger.net and thought it was worth sharing. We have been using Fireworks at Bridewell Design since cs3 and are extremely happy with its outcome. Hopefully in the new cs6 release of fireworks it will support Auto Save and fix a lot of the issues cs4 and cs5 have had with Forcing Quit (not Responding).

If you have a few minutes leave a comment and let me know if you prefer Fireworks or Photoshop and why.

Here is some of the article. The Top 5 – READ FULL ARTICLE

1. Pixel Precise alignment

Pixel Precise alignment
Fireworks CS5 In the Property-inspector, both the X and Y position, as well as the width and height of an object are shown. This allows easy editing of any object on the page with pixel precision. First, changes can be made quickly and accurately down to the pixel. These values can be read easily for transfer into the stylesheet file for HTML & CSS.
Changes take: few seconds
hours : min. : sec.
Photoshop CS5 Values of the Info panel can only be viewed, not edited directly. Changes may be highly inaccurate with the mouse on the object itself.
Changes take: secondes till minutes
hours : min. : sec.

2. Quick Infos

Quick Infos
Fireworks CS5 A tooltip with cursor informations displayed when moving objects. When working with guides, hold down the shift key to show distances between guides.
Very convenient!
Photoshop CS5 -
Not available

3. Rounded Rectangle

Rounded Rectangle
Fireworks CS5 Aside from the fact that the rectangles are real vectors that can be precisely modified about the properties, there is the possibility later on, to easily change the rounding of the edges at any time.
Changes take: few seconds
hours : min. : sec.
Photoshop CS5 There is a rounded rectangle tool where the value of the radius has to be defined up front . You only see the result after drawing the rectangle. Once drawn, the curves can only be modified in a very time-consuming and imprecise way with the Direct-Selection-Tool.
Changes take: seconds till minutes
hours : min. : sec.

4. Line width and fill color

Line width and fillcolor
Fireworks CS5 The color for fill, stroke, and line width of the contour can be adjusted quickly on the properties panel. The same applies to textures / patterns.
Changes take: few seconds
hours : min. : sec.
Photoshop CS5 All the changes for the fill color, outline color, line weight, texture, etc. must be added and changed in extra dialogue boxes. These dialog boxes are confusing, not as efficient, require more mouse clicks, and each selection further complicates the layers palette.
Changes take: secondes till minutes
hours : min. : sec.

5. Gradients

Fireworks CS5 Gradients creation is simple and precise, and easily edited in a comfortable and intuitive way. There are also more than twice as many gradient types available.
Changes take: seconds
hours : min. : sec.
Photoshop CS5 The Gradient tool is not really intuitive and takes a long trial and error process to produce the desired gradient. The Gradient Overlay layer style can be used, but again, it is not that particularly intuitive to control using a dialogue box.
Changes take: minutes
hours : min. : sec.

BD Partners with Foxy Press to bring more Custom Themes

Coming soon to… Foxy Press

Visit Foxy Press

Foxy Press is an amazing WordPress service that can get online ordering implemented in a very short amount of time. It has fully customizable css, Secure Checkout, Lightbox effects, and the list goes on and on. Its a practical, simple, solution to get your store up and running.



Facebook Iconfacebook like buttonTwitter Icontwitter follow button