WheeQo.web.id » Design

Google Currents vs. Flipboard in case Rendering an Article

R. Bambang Widiatmoko — Mon, 20 Aug 2012 02:41:29 +0000

In some cases Google Currents did a better thing against Flipboard, for example:

Google Currents always rendering article in some website (in this case inhabitat.com) into magazine-style reading that failed rendered into the same way in Flipboard. That’s way I keep this app on my Android

Google Currents vs. Flipboard in case Rendering an Article was originally appeared on WheeQo.web.id posted by R. Bambang Widiatmoko on 20 August 2012.

Free Android Icons Set from deviantART Users Some free Android icons set available on deviantART gallery. These...
Download Name Card Template with Android 4.0 Inspired Design Name Card Template with Android 4.0 Contacts Inspired Design. Still...

Related posts brought to you by Yet Another Related Posts Plugin.

Photo Effect Battle: Instagram Lux Effect vs. Lightbox HDR Effect

R. Bambang Widiatmoko — Sun, 06 May 2012 16:09:58 +0000

One of the interesting feature on Instagram is Lux effect, the sun symbol on top, that instantly transform the look and feel of your photos. But if you don’t use Instagram or want to use the photo to something else, there is an alternative app that apply almost the same looking effect.

Meet Lightbox. Just like Instagram, it’s a community-based photo-sharing app which also has many photo enhancement features. One of its feature that similar to Lux effect is HDR effect. The difference can be seen below:

The left is original, middle is Instagram, right is Lightbox. Click to enlarge.
The result color is almost similar, but I prefer Lightbox.

Seems HDR effect has weakness when applied to photo with white background, it looks unnatural. See below.

The left is original, middle is Instagram, right is Lightbox. Click to enlarge.
There is a white-glow effect which looks unnatural. But lightbox has advantage, the result image has bigger resolution. The original is 2560×1920, Instagram is 960×960, and Lightbox is 1672×1254. Unlike Instagram, you don’t have to post it online to get the picture with Lightbox.

Photo Effect Battle: Instagram Lux Effect vs. Lightbox HDR Effect was originally appeared on WheeQo.web.id posted by R. Bambang Widiatmoko on 6 May 2012.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Tracing Bitmap Logo to CAD File with Inkscape

R. Bambang Widiatmoko — Tue, 24 Jan 2012 09:36:57 +0000

CAD program like AutoCAD has limited function for art design, so it’s quite difficult to create a design such as a logo that has complex design. With the help of design application like Inkscape, we can simplify complex design into editable CAD design.

In this tutorial I will use Inkscape to trace the bitmap logo into vector object.
1. In Inkscape go to menu File -> Import… Then select the image to be converted. Choose embed option then click OK. For sample I use logo that has a few colors to ease the conversion.
2. To convert to vector object, select the image then select menu Path -> Trace Bitmap…. The Trace Bitmap dialog window will shown.
3. Select Colors and Remove background option. The value on Scans field is depends on how many color available in the image. Less colors, less value. In this sample I fill 5 for the value. Click OK.

4. The traced object will be located above the original, so move it to see the difference. Select it, right click then Ungroup. Zoom in to the traced object. Simplify the overall object by deleting unnecessary shape, usually shape that overlapped other shape with almost the same geometry. Here is my result:

Don’t worry about the color though. We can change it in CAD program.

5. After simplified, convert it to CAD-compatible file. Delete the original bitmap object, menu File -> Save As…
6. Select Save as type: *.dxf. Click Save.
7. Open CAD program, such as AutoCAD. File -> Open. Select the .dxf file. Now you can modify it as free as you want. FYI the objects are converted to spline type. For text, I delete the traced one and use the text command to recreate it.

Tracing Bitmap Logo to CAD File with Inkscape was originally appeared on WheeQo.web.id posted by R. Bambang Widiatmoko on 24 January 2012.

Convert Full Color Image to a 3 Color Separation in GIMP I will show how to convert from full color image...
Tutorial CorelDRAW: Export Object with Transparent Background The case: I’ve create objects with CorelDRAW like this: see...
Inkscape Tutorial: Create Letterpress Text Effect This effect is become famous nowadays especially in web design....

Related posts brought to you by Yet Another Related Posts Plugin.

Download Name Card Template with Android 4.0 Inspired Design

R. Bambang Widiatmoko — Thu, 08 Dec 2011 06:26:57 +0000

Name Card Template with Android 4.0 Contacts Inspired Design.
Still using various icon sources, altough there are Android 4.0 icons available.
Created with Inkscape.
Download via My DeviantArt

Download Name Card Template with Android 4.0 Inspired Design was originally appeared on WheeQo.web.id posted by R. Bambang Widiatmoko on 8 December 2011.

Download Android 4 Pencil Stencil GUI and Icons For those who want create Android app based on new...
Free Android Icons Set from deviantART Users Some free Android icons set available on deviantART gallery. These...
Download Free CV Template 1 The CV design is inspired from Smashing Magazine. Designed with...

Related posts brought to you by Yet Another Related Posts Plugin.

Download Curriculum Vitae Template with Google+ and Metro UI Style #2

R. Bambang Widiatmoko — Mon, 17 Oct 2011 15:00:20 +0000

My second design, Curriculum Vitae with Google+ and Metro UI style combination. Now formatted .doc so it’s compatible with Microsoft Word. Based on table grid so it will easier to modified, better than shape based.
Created with free Kingsoft Office 2012.
Download CV Google+ n Metro UI style #2 | via deviantART
Preview:

Download Curriculum Vitae Template with Google+ and Metro UI Style #2 was originally appeared on WheeQo.web.id posted by R. Bambang Widiatmoko on 17 October 2011.

Download Curriculum Vitae Template with Google+ and Metro UI Style Created with LibreOffice Text, quite powerful but also quite difficult...
Download Name Card Template with Android 4.0 Inspired Design Name Card Template with Android 4.0 Contacts Inspired Design. Still...
Download Free CV Template 1 The CV design is inspired from Smashing Magazine. Designed with...

Related posts brought to you by Yet Another Related Posts Plugin.

Download Curriculum Vitae Template with Google+ and Metro UI Style

R. Bambang Widiatmoko — Mon, 25 Jul 2011 07:29:39 +0000

Created with LibreOffice Text, quite powerful but also quite difficult compared to Microsoft’s.
CV Google+ n Metro UI style | via deviantART

Download Curriculum Vitae Template with Google+ and Metro UI Style was originally appeared on WheeQo.web.id posted by R. Bambang Widiatmoko on 25 July 2011.

Download Curriculum Vitae Template with Google+ and Metro UI Style #2 My second design, Curriculum Vitae with Google+ and Metro UI...
Download Name Card Template with Android 4.0 Inspired Design Name Card Template with Android 4.0 Contacts Inspired Design. Still...
Download Free CV Template 1 The CV design is inspired from Smashing Magazine. Designed with...

Related posts brought to you by Yet Another Related Posts Plugin.

Islamic Wallpaper 320×480 for Phone

R. Bambang Widiatmoko — Fri, 08 Oct 2010 02:51:29 +0000

I’ve created some Islamic Wallpaper for my phone, Samsung Galaxy 5. The wallpaper resolution is 320×480, can be used for other phone of course. If you want another resolution please ask me. Hope I’ve some time to create it Insya Allah. Hosted on zedge.net.

Since the third link is broken, you can download all Islamic wallpaper here.
1. Islam ad-diinul Haq

2. I Love Islam Full

3. Bismillah

4. Islamic Nexus One

Islamic Wallpaper 320×480 for Phone was originally appeared on WheeQo.web.id posted by R. Bambang Widiatmoko on 8 October 2010.

Islamic Wallpaper 6 – Sayyidul Istighfar Du’aa Sayyidul Istighfar — HR. al-Bukhari, kitab ad-Da’awaat, bab Maa...
Islamic Wallpaper 2 1. Available in 1920×1200, 1280×800, 1024×768 Download: HERE 2. Available...
Islamic Wallpaper 3 1. Available in 1920×1200, 1280×800, 1024×768 Download: HERE Download in...

Related posts brought to you by Yet Another Related Posts Plugin.

Free Android Icons Set from deviantART Users

R. Bambang Widiatmoko — Tue, 14 Sep 2010 09:47:57 +0000

Some free Android icons set available on deviantART gallery. These icons can be used to customize your Android theme UI or desktop theme.

1. Breathe
Inspired by iPhone styled rounded icons.

2. iDroid
iDroid is a fresh and elegant replacement icon set for the Android OS in use on many modern handsets, such as the HTC Hero.

3. Android 2.2 Official Icons
The newest Android 2.2 icons.

4. Android Icons Set 2 Templates

5. Tha Icon

6. Realistic Droid Icons

Free Android Icons Set from deviantART Users was originally appeared on WheeQo.web.id posted by R. Bambang Widiatmoko on 14 September 2010.

Download Name Card Template with Android 4.0 Inspired Design Name Card Template with Android 4.0 Contacts Inspired Design. Still...

Related posts brought to you by Yet Another Related Posts Plugin.

Non-System Web Font with HTML5 @font-face Syntax

R. Bambang Widiatmoko — Sat, 03 Jul 2010 03:14:01 +0000

In this post I just want to try the new feature of HTML5 that is non-system web font support, to be used in my blog which is using WordPress. Well I’ve read some reference to implement this feature which will use @font-face syntax. You can read:
Bulletproof @font-face syntax article for the tutorial and @font-face Generator which will generate files like .eot (used by Internet Explorer to support css @font-face declarations), .svg, .html, and .css; so that you can learn @font-face syntax from those files. For converter .ttf or .otf to .eot you can use application to convert TTF files to EOT. Don’t forget to read the wiki how to use the application.

I will show short tutorial how to implement @font-face syntax. Prepare .ttf or .otf font and .eot file. Upload it to folder of your template where there is css file. For the example I use Yikes font.

Edit css and insert this code:

@font-face {
	font-family: 'Yikes';
	src: url('yikes.eot');
	src: local('☺'), url('yikes.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

.yikes1 {font: 2em 'Yikes', Arial, sans-serif;}

If you use wordpress change to HTML mode when create new post, then insert this code (for example):

R. Bambang Widiatmoko
Featuring Yikes font

And here is the result:

R. Bambang Widiatmoko
Featuring Yikes font

Try to select the text ^^ *only works for HTML 5 support browser*

Non-System Web Font with HTML5 @font-face Syntax was originally appeared on WheeQo.web.id posted by R. Bambang Widiatmoko on 3 July 2010.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Perbandingan Font untuk Menulis Arab

R. Bambang Widiatmoko — Mon, 28 Jun 2010 08:35:51 +0000

Bila Anda sering menulis atau mendesain dengan tulisan Arab di komputer, ada baiknya untuk memperhatikan font yang digunakan agar pembaca tidak kesulitan dan mengurangi kesalahan membaca tulisan Arab tersebut. Berikut contoh tulisan arab dari al-Quran surat al-Fatihah ayat 7 menggunakan empat font yang berbeda, Arial, Traditional Arabic, Arabic Typesetting, dan Andalus

klik untuk perbesar gambar

Font arab Arial dengan Times New Roman tidak jauh berbeda. Menurut saya font Traditional Arabic dan Arabic Typesetting mempunyai tingkat kejelasan yang terbaik, perbedaannya kalau Arabic Typesetting terlihat lebih rapat. Namun untuk penggunaan tasydid dan kasroh, Arabic Typesetting terlihat lebih tepat peletakannya seperti mushaf saat ini.

Lalu bagaimana untuk penggunaan di web? ~~Untungnya font seperti Arabic Typesetting merupakan salah satu font standard web, jadi kita bisa menggunakan dalam coding desain web.~~ Contohnya sebagai berikut.
Di file css:

.arab1 {font: 3em Arabic Typesetting, Arial, sans-serif;}

Lalu di file html:

صِرَاطَ الَّذِينَ أَنْعَمْتَ عَلَيْهِمْ غَيْرِ الْمَغْضُوبِ عَلَيْهِمْ وَلَا الضَّالِّينَ

Tulisan arab bisa diedit di word lalu copas ke HTML editor. Contoh jadinya:

صِرَاطَ الَّذِينَ أَنْعَمْتَ عَلَيْهِمْ غَيْرِ الْمَغْضُوبِ عَلَيْهِمْ وَلَا الضَّالِّينَ

Update:
Ternyata font Arabic Typesetting bukan font standard web jadi kalau dilihat di komputer yang tidak terinstall font tersebut, tulisan arabnya tidak seperti di screenshot. Jadi solusinya adalah dengan memanfaatkan fitur @font-face HTML5 (lihat tutorialnya).

Perbandingan Font untuk Menulis Arab was originally appeared on WheeQo.web.id posted by R. Bambang Widiatmoko on 28 June 2010.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.