3D style look and feel

ansifpi

Hi,

We are developing an UI for an embedded project. Initially we use png images, but due to performance reasons we shifted to svg images. But svg images are not giving much 3D look and feel. Later i found the qlineargradient stylesheet method which looks very good and can be easily use.
I would like to check whether we can stick with stylesheets which contains properties like qlineargradient etc. Is there any better solution using svg or other methods for UI development.

Regards
Ansif

SGaist

Hi,

Depending on what you need to do QtQuick might be the better option.

ansifpi

@SGaist Thanks for the reply. Actually the code is written in QWidget and its difficult to convert everything into QML. I found using stylesheet with Gradients is a better option.

Does UX designers plays well in developing Qt UI applications. I saw companies like www.ics.com developing cool Qt applications. But what about performance when loading these designs into the application.

Any help is really appreciated.

SGaist

Yes they do. The thing is to ensure they understand what can be done with the toolkit at hand.

The advantage they have with QtQuick is that they can more easily fiddle with the GUI.

You also have KDAB that does great application development.

mrjj

Hi
Depending what you goal is, you can also create your own style
http://doc.qt.io/qt-5/qtwidgets-widgets-styles-example.html

Could you give an example of a button before and after gradient ?

ansifpi

@SGaist said in 3D style look and feel:

Yes they do. The thing is to ensure they understand what can be done with the toolkit at hand.

The advantage they have with QtQuick is that they can more easily fiddle with the GUI.

You also have KDAB that does great application development.

Yeah KDAB and ICS are the top performers in developing great UI's. Thanks for the info.

ansifpi

@mrjj said in 3D style look and feel:

Hi
Depending what you goal is, you can also create your own style
http://doc.qt.io/qt-5/qtwidgets-widgets-styles-example.html

Could you give an example of a button before and after gradient ?

Hi,

I am now using the Qt stylesheet method which is very easy to manage. I tried the "qlineargradient" property which is giving a nice 3D style buttons and the screenshot is attached here,

The advantage of qlineargradient is it doesn't need any images. This makes reduce in the size of application and also performance too.

mrjj

Hi
ahh, that sort of 3d effect. i was not sure
what was wrong with svg. but you need a non flat button look.
thank you

ansifpi

@mrjj said in 3D style look and feel:

Hi
ahh, that sort of 3d effect. i was not sure
what was wrong with svg. but you need a non flat button look.
thank you

Hi,

I tried using svg buttons, but not giving 3D look. But stylesheet fits well for me :). Do you have any svg exampel(screenshot) about 3D look.

Regards
Ansif

mrjj

Hi
Well most of the methods is actually also just gradients inside SVG
http://www.svgopen.org/2008/papers/86-Achieving_3D_Effects_with_SVG/

also some uses glossy way
https://openclipart.org/detail/77821/orange-glossy-buttons

There a many SVG there. ( free to use )

so i think a stylesheet is just fine for giving the buttons 3d look. since its all you want.
I most likely would tone it a bit down as rest of design is flat (modern) and
the buttons stick out a bit. But thats a personal preference.

ansifpi

@mrjj said in 3D style look and feel:

Hi
Well most of the methods is actually also just gradients inside SVG
http://www.svgopen.org/2008/papers/86-Achieving_3D_Effects_with_SVG/

also some uses glossy way
https://openclipart.org/detail/77821/orange-glossy-buttons

There a many SVG there. ( free to use )

so i think a stylesheet is just fine for giving the buttons 3d look. since its all you want.
I most likely would tone it a bit down as rest of design is flat (modern) and
the buttons stick out a bit. But thats a personal preference.

Sorry for the delay. This is exactly i was looking. I really appreciate your support.

mrjj

@ansifpi
Np, but i think a very detailed SVG might be more heavy than stylesheet with gradient but its hard to guess at as it depends on the device also :)

I assume the goal is a modern look with not super flat buttons but rest of the widgets should follow the flat style ?

I also like looks like this
https://dribbble.com/shots/588694-Blue-Milk-UI-Kit-Updated
even not flat.

ansifpi

@mrjj said in 3D style look and feel:

@ansifpi
Np, but i think a very detailed SVG might be more heavy than stylesheet with gradient but its hard to guess at as it depends on the device also :)

I assume the goal is a modern look with not super flat buttons but rest of the widgets should follow the flat style ?

I also like looks like this
https://dribbble.com/shots/588694-Blue-Milk-UI-Kit-Updated
even not flat.

Yeah it looks very cute. I also likes the same. Ite better to change the whole UI with lightweight controls like Blue Milk UI Kit.

mrjj

@ansifpi
well its actually just a design.
I dream of one day to make a QStyle plugin with it :)

There are many options for looks. But if board is not strong at drawing some will be too heavy.

ansifpi

@mrjj said in 3D style look and feel:

@ansifpi
well its actually just a design.
I dream of one day to make a QStyle plugin with it :)

There are many options for looks. But if board is not strong at drawing some will be too heavy.

Well said. Thanks for all the tips. Keep in touch.

mrjj

@ansifpi
I hang out here alot ;)
Happy programming.