JP2006024089A

JP2006024089A - グラフィカルユーザインターフェースの部品画像作成方法及び装置

Info

Publication number: JP2006024089A
Application number: JP2004203066A
Authority: JP
Inventors: Hiroyuki Yoshinaga; 弘行吉永
Original assignee: Fuji Photo Film Co Ltd
Current assignee: Fujifilm Holdings Corp
Priority date: 2004-07-09
Filing date: 2004-07-09
Publication date: 2006-01-26

Abstract

【課題】複数のレイヤに配置された画像を重ねた多層構造の画像から、ＧＵＩの部品画像を適切に切り出す方法及び装置を提供する。
【解決手段】複数の画像の各々を複数のレイヤに配置して重ね合わせた多層構造の画像において、統合レイヤ情報の指定したレイヤに配置された画像同士が重なり合った重畳画像から、切出領域情報に従って部品画像を切り出し、画像ファイルに記憶する。このため、従来のように、各レイヤに配置された画像を１つ１つ手作業で切り出し、その後に手作業で重ね合わせることで、当初のデザインと異なった部品画像が作成されてしまうという不都合を回避できる。
【選択図】図２

Description

本発明はグラフィカルユーザインターフェース（ＧＵＩ）の部品画像作成方法及び装置に係り、特に複数の画像を複数のレイヤに配置した多層構造の画像からＧＵＩの部品画像を作成する方法及び装置に関する。

従来、レイアウトされた状態に適した画像部品の切り抜きを行う技術が様々考案されている。例えば特許文献１の画像レイアウト装置は、１ページ画像を表示する表示手段と、ユーザの指定に従って１ページ画像上に画像部品を配置するための部品配置手段と、１ページ画像に配置された対象画像部品に対してユーザの指定に従って切り抜きマスクを作成するマスク作成手段と、対象画像部品に関して作成された複数の切り抜きマスクを用いて複数の切り抜きマスクで切り抜かれた対象画像部品を１ページ画像上に描画する描画手段とを備える。
特開平９−１４７１３１号公報

ところで、ボタンなどのグラフィカルインターフェース（ＧＵＩ）の部品画像をデザインする際、デザインの変更を容易にするため、あるいは複雑な図形を表現するため、複数のレイヤに配置された画像を重ねた多層構造の画像を用いることが通常である。デザインされた画像を実際のＧＵＩとして表示画面に実装するには、各レイヤに配置された画像の必要部分を手作業で個別に切り出した後、画面の配置位置や大きさなどを指定して重ね合わせてＧＵＩの部品を作成していく作業が必要である。ところが、この過程では、各レイヤの画像を個別に手作業で切り出し、後で重ね合わせるため、当初のデザインと比べて各画像の位置やサイズが微妙にずれるという問題がある。

この点、特許文献１の技術では、１ページ画像に配置された対象画像部品を切り出すだけであり、各レイヤの画像をずれないように切り出す技術は具体的に開示されていない。本発明はこのような問題点に鑑みてなされたもので、複数のレイヤに配置された画像を重ねた多層構造の画像から、ＧＵＩの部品画像を適切に切り出す方法及び装置を提供することを目的とする。

上述の課題を解決するため、請求項１に係る発明は、複数の画像の各々を複数のレイヤに配置して重ね合わせた多層構造の画像を入力する第１入力ステップと、前記多層構造の画像の配置されたレイヤの内、統合すべきレイヤを指定する統合レイヤ情報の入力を受け付ける第２入力ステップと、前記統合レイヤ情報に従ってレイヤを統合し、前記統合レイヤ情報で指定されたレイヤに配置された画像同士が重なり合った画像である重畳画像を作成する重畳画像作成ステップと、前記重畳画像を切り出す領域を指定する切出領域情報の入力を受け付ける第３入力ステップと、前記重畳画像から前記切出領域情報で指定される領域内の画像を切り出した部品画像を記憶する記憶ステップと、を備えるグラフィカルユーザインターフェースの部品画像作成方法を提供する。

この発明によると、従来のように、各レイヤに配置された画像を１つ１つ手作業で切り出し、その後に手作業で重ね合わせることで、当初のデザインと異なった部品画像が作成されてしまうという不都合を回避できる。

請求項２に係る発明は、複数の画像の各々を複数のレイヤに配置して重ね合わせた多層構造の画像を入力する第１入力部と、前記多層構造の画像の配置されたレイヤの内、統合すべきレイヤを指定する統合レイヤ情報の入力を受け付ける第２入力部と、前記統合レイヤ情報に従ってレイヤを統合し、前記統合レイヤ情報で指定されたレイヤに配置された画像同士が重なり合った画像である重畳画像を作成する重畳画像作成部と、前記重畳画像を切り出す領域を指定する切出領域情報の入力を受け付ける第３入力部と、前記重畳画像から前記切出領域情報で指定される領域内の画像を切り出した部品画像を記憶する記憶部と、を備えるグラフィカルユーザインターフェースの部品画像作成装置を提供する。

この発明は本願第１発明と同様の作用効果を奏する。

以下、添付した図面を参照し本発明の好ましい実施の形態を説明する。

［概略構成］
図１は、本発明に係るグラフィカルユーザインターフェース（ＧＵＩ）部品画像作成装置１（以下作成装置１で表す）のブロック構成図である。作成装置１は、図示しない記憶媒体やネットワークなどから各種データを入力する入力部１１と、各種データを記憶する半導体記憶装置などで構成された記憶部１２と、ＣＰＵで構成された制御部１３と、ユーザの操作入力を受け付けるキーボードやマウスなどで構成された操作部１４とを備えている。これらの各部はバスで接続されている。作成装置１はパソコンなどで構成可能である。

入力部１１は、複数の画像の各々を複数のレイヤに配置して重ね合わせた多層構造の画像（以下多層構造画像という）のデータを入力する。図２は多層構造画像を概念的に示す。多層構造画像は、一例として、複数のレイヤＬ１〜Ｌ３のそれぞれに配置された複数の画像Ｉ１〜Ｉ３から構成されている。無論、レイヤの数は図示の３つに限る必要はなく、これより多数であってもよいし少数であってもよい。レイヤを統合すると、そのレイヤに配置された画像同士が互いに重なり合い、１つの画像を表現する。以下、この画像を重畳画像という。複数の画像が重なり合うと、下層の画像は上層の画像で遮蔽され不可視となる。図２ではＬ３が最上層であり、Ｌ１が最下層であるから、重畳画像では、Ｉ２についてはＩ３と重なる部分、Ｉ１についてはＩ２あるいはＩ３と重なり合う部分が不可視となる。どのレイヤを統合するかは選択的に指定でき、指定されたレイヤが統合すると、その指定されたレイヤに配置された画像同士が重なり合う。どのレイヤを統合するかは、後述の統合レイヤ情報が指定する。

重畳画像は、単に画像同士を重ね合わせただけの状態であるため、ＧＵＩの表示に必要な部分を重畳画像から切り出す必要がある。作成装置１は、後述の切出領域情報に従って重畳画像から部品画像を切り出す。部品画像とは、ボタン、背景、台座などのＧＵＩの部品を構成する画像である。実装画面に対する部品画像の表示位置や表示サイズは操作部１４からユーザが入力する必要がある。

図３は、統合レイヤ情報及び切出領域情報の概念説明図である。この図では、部品名と統合レイヤ情報と切出領域情報とが対応づけられた部品画像作成情報が示されている。部品名は後述の部品画像作成処理で重畳画像から切り出した部品画像に付与する名称である。統合レイヤ情報及び切出領域情報は操作部１４の操作で入力されるが、他のパソコンなどで作成しておき、入力部１１から入力してもよい。

［部品画像作成処理］
以下、図４のフローチャートに基づき、作成装置１の実行する部品画像作成処理の流れを説明する。

Ｓ１では、多層構造画像のデータを入力部１１から入力する。Ｓ２では、統合レイヤ情報と切出領域情報とが対応づけられた部品画像作成情報を操作部１４から入力する。

Ｓ３では、統合レイヤ情報に従ってレイヤを統合し、統合レイヤ情報で指定されたレイヤに配置された画像同士が重なり合った画像である重畳画像を作成する。例えば、図３の部品名「ボタンｅ」に対応する統合レイヤ情報に従うと、レイヤＬ３及びＬ２に配置された画像同士が重なり合った重畳画像Ｏ１が作成される。一方、部品名「ボタンｄ」の部品画像に対応する統合レイヤ情報に従うと、レイヤＬ３及びＬ１に配置された画像同士が重なり合った重畳画像Ｏ２が作成される。即ち、レイヤＬ３に配置された画像に重ね合わせる画像をレイヤＬ１に配置されたもの又はＬ２に配置されたものに切り替えることで容易に異なる複数の重畳画像が作成できる。

Ｓ４では、各統合レイヤ情報に対応する切出領域情報で指定される領域内の画像を、その統合レイヤ情報に従って作成された重畳画像から切り出して画像ファイルに記憶する。例えば、図３の切出領域情報に従うと、部品名「ボタンｅ」の重畳画像Ｏ１に対応する切出領域情報「Ｒ」で指定される領域内の部分を切り出した部品画像は、ファイル名BE.bmpの画像ファイルに記憶される。一方、部品名「ボタンｅ」の重畳画像Ｏ２に対応する切出領域情報「Ｒ」で指定される領域内の部分を切り出した部品画像は、ファイル名のBD.bmp画像ファイルに記憶される。その他、適当な統合レイヤ情報及び切出領域情報を操作部１４から入力し、表示はされるが押下できない状態を示すボタンの部品画像の画像ファイルなどを適宜作成することもできる。

なお、上述のステップＳ１〜Ｓ４を制御部１３に実行させるプログラムは記憶部１２に記憶されている。

以上の処理により、統合レイヤ情報と切出領域情報を操作部１４から指定すれば、それに従って多層構造画像から部品画像の画像ファイルが作成される。即ち、従来のように、各レイヤに配置された画像を１つ１つ手作業で切り出し、その後に手作業で重ね合わせることで、当初のデザインと異なった部品画像が作成されてしまうという不都合を回避できる。

なお、図５に示すように、上記の処理で作成された部品画像ファイルは、部品情報と対応づけて記憶部１２に記憶される。部品情報は、どの画面のどの位置にどのようなサイズで部品画像を配置するか、あるいはＧＵＩとしての動作の属性などを規定する。部品情報はＧＵＩの機能に応じてユーザが作成する必要がある。

部品情報の作成の簡便のため、部品名あるいは部品画像のファイル名は、部品画像の動作の属性が識別できるように命名することが好ましい。特に、図３のような部品画像作成情報に含まれる部品名に基づいて、部品画像の動作の属性を特定できるファイル名を部品画像の画像ファイルに付与することもできる。即ち、部品名「ボタンｅ」の部品画像に対応する画像ファイルには、ボタンが押下可能な状態（enable）を示す部品画像として「BE.bmp」を命名し、部品名「ボタンｄ」の部品画像に対応する画像ファイルには、ボタンが既に押下されている状態（disable）を示す部品画像として「BD.bmp」を命名する。

一方、ボタンの動作を規定するプログラムが、ボタン押下が検知されない間は「BE.bmp」を表示し、ボタン押下が検知された場合は「BD.bmp」を表示するようにすれば、部品画像のファイル名と実際のＧＵＩの動作がリンクし、各部品画像にＧＵＩとしての動作を組み込む作業が容易になる。

本発明に係るＧＵＩ部品画像作成装置のブロック構成図多層構造画像、切出領域情報、重畳画像及び部品画像の概念図統合レイヤ情報及び切出領域情報の説明図部品画像作成処理の流れを示すフローチャート部品情報の説明図

符号の説明

１：ＧＵＩ部品画像作成装置

Claims

複数の画像の各々を複数のレイヤに配置して重ね合わせた多層構造の画像を入力する第１入力ステップと、
前記多層構造の画像の配置されたレイヤの内、統合すべきレイヤを指定する統合レイヤ情報の入力を受け付ける第２入力ステップと、
前記統合レイヤ情報に従ってレイヤを統合し、前記統合レイヤ情報で指定されたレイヤに配置された画像同士が重なり合った画像である重畳画像を作成する重畳画像作成ステップと、
前記重畳画像を切り出す領域を指定する切出領域情報の入力を受け付ける第３入力ステップと、
前記重畳画像から前記切出領域情報で指定される領域内の画像を切り出した部品画像を記憶する記憶ステップと、
を備えるグラフィカルユーザインターフェースの部品画像作成方法。
複数の画像の各々を複数のレイヤに配置して重ね合わせた多層構造の画像を入力する第１入力部と、
前記多層構造の画像の配置されたレイヤの内、統合すべきレイヤを指定する統合レイヤ情報の入力を受け付ける第２入力部と、
前記統合レイヤ情報に従ってレイヤを統合し、前記統合レイヤ情報で指定されたレイヤに配置された画像同士が重なり合った画像である重畳画像を作成する重畳画像作成部と、
前記重畳画像を切り出す領域を指定する切出領域情報の入力を受け付ける第３入力部と、
前記重畳画像から前記切出領域情報で指定される領域内の画像を切り出した部品画像を記憶する記憶部と、
を備えるグラフィカルユーザインターフェースの部品画像作成装置。